:root {
    color-scheme: dark;
}
::-webkit-scrollbar {
    display: none;
}
@font-face {
    font-family: bacha;
    src:'fonts/bacha.otf';
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }  
i::selection,img::selection,br::selection,r::selection,div::selection,j::selection,h3::selection,li::selection,p::selection,a::selection {
    color: whitesmoke;
    background-color: #f79802;
}
html {
    scroll-behavior: smooth;
    cursor: default;
    font-family: Rubik;
    font-weight: lighter;
    background-color: #282828;
    color: whitesmoke;
    letter-spacing: 1px;
    line-height: 2.75vh;
}
body {
    background-image: url(img/bg-bare.png);
    background-position: center;
    min-height: 100vh;
    background-size: 400vh;
    align-content: center;
}
body, p, h3 {
    margin: 0;
}
r {
    display: block;
    margin-top: 1vh;
}
a {
    text-decoration: none;
    color: whitesmoke;
}
g {
    color: #aaaaaa;
    font-style: italic;
}
ul {
    margin: 2vh auto;
}
ul ul {
    margin: 0.5vh auto;
}
.body-body {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 60vw;
}
.top-logo {
    width: -webkit-fill-available;
    display: flex;
    padding: 8vh 3vw 4vh;
    justify-content: center;
}
.logo-logo {
    max-height: 20vh;
    max-width: 10vw;
}
.logo-logo:hover{ 
    filter: drop-shadow(0 0 0.05rem #f79802);
}
.top-notif::before,.top-notif::after {
    content: " ᰾᰾᰾ ";
    font-style:normal;
    font-size: large;
  }
.top-notif {
    text-align: center;
    font-size: 1.7em;
    margin-bottom: 4vh;
    font-style: italic;
}
.middle-content {
    padding: 1.5vh 3vw 6vh;
    display: flex;
    gap: 1vh 2vw;
    animation: fadeIn 5ms;
}
.picture-title {
    max-height: 20vh;
    max-width: 25vw;
    border-radius: 1.5rem;
    background-color: whitesmoke;
    padding: 2vh 2vw;
    height: 15vh;
    width: 15vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: 1500ms background-size;
    filter: grayscale(0.75);
}
.picture-title:hover {
    filter: brightness(0.9);
    filter: grayscale(0s);
    background-size: 16.5vw;    
}
.middle-topic {
    gap: 1.5vh 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid grey;
    padding: 5vh;
    border-radius: 1.5rem;
    background-color: #282828AA;
}
.middle-topic:hover {
    border: 1px solid #f79802;
    background-color: #282828CC;
}   
.topic-title {
    font-size: 1.4em;
}
.topic-subtitle {
    font-size: 0.9em;
}
.subtitle-list {
    column-count: 2;
    column-gap: 3vw;
    max-height: 45vh;
    column-fill: auto;
}
.bottom-tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1vh 2vw;
    /* font-family: bacha; */
    letter-spacing: 1px;
    margin-bottom: 3vh;
}
.tabs-link {
    border-radius: 2.5rem;
    padding: 2vh 3vw;
    border: 1px solid whitesmoke;
    font-size: 0.9em;
    background-color: #282828;
}
.tabs-link:hover {
    filter: drop-shadow(0 0 0.25rem #f79802);
    color: #f79802;
    border-color: #f79802;
    scale: 1.02;
}
.link-link {
    font-weight: 600;
}
.link-link:hover {
    filter: brightness(0.9);
}
.fb:hover {
    color: #4267B2;
}
.ig:hover {
    color:#E1306C;
}
.im:hover,.subtitle-motto:hover,.footer-text:hover, j:hover, .top-notif:hover, g:hover  {
    color:#f79802;
}
.gp:hover {
    color:#78C257;
}
.footer-text {
    text-align: center;
    font-size: 0.75em;
    color: #9b9b9b;
    padding-bottom: 5vh;
}
.top-img {
    text-align: center;
    margin-bottom: 2vh;
}
.top-img img {
    width: 30vw;
    border-radius: 10px;
    filter: drop-shadow(0px 0px 10px #1f1f1f);
}


@media only screen and (max-width: 600px) {
    body {
        background-size: 300vh;
        background-position: bottom;
    }
    .body-body {
        max-width: 90vw;
    }
    .top-logo {
        padding: 7vh 3vw 4vh;
    }
    .logo-logo {
        max-height: 20vh;
        max-width: 40vw;
    }
    .picture-title {
        max-width: 19vw;
        padding: 1vh 26vw;
        height: 20vh;
    }
    .picture-title:hover {
        background-size: cover;
    }
    .top-notif {
        font-size: 4vw;
        line-height: 8vw;
    }
    .middle-content {
        flex-direction: column;
        align-items: center;
        padding: 1vh 3vw 4vh;
        gap: 4vh;
    }
    .middle-topic {
        padding: 7vw;
        margin: auto 6vw 0vh;
    }
    .subtitle-list {
        max-height: unset;
        column-count: 1;
    }
    .bottom-tabs {
        flex-direction: column;
        margin: auto 10vw 3vh;
        gap: 2vh;
    }
    .tabs-link:hover {         
        filter: drop-shadow(0 0 0rem #f79802);
    }
    .topic-title {
        font-size: 4.5vw;
    }
    .topic-subtitle {
        font-size: 3.5vw;
    }
    .tabs-link {
        font-size: 3.5vw;
        text-align: center;
    }
    .footer-text {
        font-size: 2.5vw;
        padding-bottom: 5vh;
    }
    .im {
        line-break: anywhere;
    }
    .top-img img {
        width: 85vw;
    }
}