html {
    --global-padding: 1em;
    --site-pink: rgb(226, 150,174);
    --site-pink-transparent: rgba(226, 150,174, 0.7);
    --site-blue: rgba(91, 206, 250, 0.8);
    --site-blue-transparent: rgba(91, 206, 250, 0.3);
    --site-black: rgb(38,38,38);
    --header-height: 10vh;
}

@font-face {
    font-family: "Syncopate";
    font-weight: normal;
    src: url("/assets/fonts/Syncopate-Regular.ttf") format("truetype");

}

@font-face {
    font-family: "Syncopate";
    font-weight: bold;
    src: url("/assets/fonts/Syncopate-Bold.ttf") format("truetype");

}


* {
    box-sizing: border-box;
}
body {
    background-color: var(--site-black);
    color: white;
    margin: 0px;
    cursor: url('/assets/cursor.png'), auto;
    font-family: 'Tahoma', sans-serif;
}

a {
    cursor: pointer;

}

header a {
    text-decoration: none;
    color: white;
}


header {
    position: sticky;
    top: 0px;
    z-index: 20;

}

header nav {
    display: flex;
    justify-content: space-between;
    height: var(--header-height);
    min-height: fit-content;
    border-bottom: 1px solid white;
    background-image: url("https://www.iso-bel.computer/static/resources/images/misc/paper_2.png");
    background-color: var(--site-pink);
    background-blend-mode: lighten;
    align-items: center;
}

header h1 {
    margin-top: 0px;
    margin-bottom: 0px;
}

blockquote {
    border-radius: 7px;
    font-style: italic;
    background-color: rgba(226, 150,174, 0.3);
    padding: 0.5em;
    padding-left: 1.5em;
}


#siteTitle {

    filter: drop-shadow(0px 0px 3px #00000060);
    font-family: 'Syncopate';
    display: flex;
    align-items: center;
    min-height: fit-content;
    font-weight: bolder;
    transition: filter 0.1s ease-in;
    height: 100%;
    margin: 0px
}

#siteTitle:hover {
    filter: drop-shadow(2px 2px 5px #00000070);
}

header a, #mobilelinks a {

    font-weight: bold;
    align-content: center;
    font-size: 12pt;
    height: 100%;
    background-color: rgba(38,38,38, 0.2);
    border-left: 1px solid #ffffff;
    padding: 11px;
    padding-left: 15px;
    font-family: 'Syncopate';
    padding-right: 15px;
    transition: background-color 0.1s ease-in, color 0.1s ease-in;
}



.transflagwhite:hover {

    background-color: rgba(266, 266, 266, 0.8) !important;
    color: rgba(38,38,38, 0.8) !important;
}
.transflagblue:hover {

    background-color: rgba(91, 206, 250, 0.8) !important
}

.transflagpink:hover {

    background-color: rgba(245, 169, 184, 0.8) !important
}
main {
    display: flex;
}

#sidebar {
    border-left: 1px solid white;
    background-color: rgb(72, 115, 132, 0.8);
}
#sidebar img {
    border-bottom: 1px solid white;
    width: 35vw;
}

#sidebar #belowImage {
    padding: 10px;
    font-family: 'Syncopate';
    font-size: 2em;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

#content {

    font-family: 'Syncopate';

    position: relative;
    overflow: hidden;
    background-image: linear-gradient(0deg,rgba(91, 206, 250, 0.2) 0%, rgba(245, 169, 184, 0.2) 51%, rgba(255, 255, 255, 0.2) 100%);
    width: 100%
}

#content:after {

    content: "";
    background-image: url("https://www.iso-bel.computer/static/resources/images/misc/paper_1.png");
    background-attachment: fixed;
    height: 300%;
    width: 300%;
    top: 0;
    left: 0;
    opacity: 0.3;
    position: absolute;
    pointer-events: none;

}

#heropage {

    display: block;
    padding: 40px;
    padding-top: 70px;
    padding-bottom: 70px;
    text-align: center
}
#countdownLabel {
    filter: drop-shadow(2px 2px 3px #00000030);
}
#countdown {
    filter: drop-shadow(0px 0px 5px #00000070);
    font-family: 'Tahoma', sans-serif;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 60pt;
    font-weight: bold;
}

#news {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: fit-content;
    padding: 20px;
    width: 50%;
    border-top: 1px solid white;
    overflow: scroll;
    max-height: 65vh;
    background-color: #00000050;
}

#news h3 {
    font-size: 16pt;
    margin: 0px
}



.newsItem {

    font-family: 'Tahoma', sans-serif;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 20px;
    font-size: 12pt;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 1.5em;
    transition: background-color 0.1s;
    overflow: scroll;
    background-color: #00000050;
}

.newsItem:hover {

    background-color: #111111;
}

#thirdbox {
    background-color: #00000050;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 15px;
    width: 50%;
    border-top: 1px solid white;
    border-left: 1px solid white;
    overflow: scroll;
}

#donationWidget {
    width: 150px;
    margin-top: 10px
}

footer {

    background-image: url("https://www.iso-bel.computer/static/resources/images/misc/paper_2.png");
    border-top: 1px solid white;
    font-size: 7pt;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: centre
}

#donationButton {
    font-size: 10pt;
    cursor: pointer;
    border-radius: 15px;
    border: 1px solid rgb(213,247,154);
    background-color: rgb(47,73,54);
    width: fit-content;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    color: rgb(213,247,154) ;
    text-decoration: none;
}


#donationButton:hover {

    background-color:rgb(213,247,154);
    color: rgb(47,73,54);
}

#footer a {
    color: white;
    text-decoration: none;
}

footer #socials {
    display: flex;
    filter: saturate(80%);
    justify-content: space-evenly;
    align-items: center;
}

#socials img {
    width: 30px;
    height: auto
}

.socialEl {
    align-content: center;
    margin-right: 10px;
}

#hamburger {
    all: unset;
    display: none;
}

#mobilelinks {
    background-color: var(--site-black);
    display: none
}
.uiBox {
     display: flex
}

@media (max-width: 768px) {

    header {
        align-items: center
    }

    .desktoplink {
        display: none;

    }
    .uiBox {
        display: block
    }

    #hamburger {
        filter: drop-shadow(0px 0px 3px #00000060);
        display: flex;
        align-items: center;
        margin-left: 10vw;
        padding: 15px;
    }

    #hamburger:hover {

        filter: drop-shadow(2px 2px 5px #00000070);
    }

    #hamburger svg {
        cursor: pointer;
        fill: white;
    }

    #mobilelinks {
        border-bottom: 1px solid #ffffff;
        background-color: var(--)
        display: none;
        position: sticky;
        top: var(--header-height);
        z-index: 10;

    }

    .transflagwhite {

        background-color: rgba(266, 266, 266, 0.2) !important;
    }
    .transflagblue {

        background-color: rgba(91, 206, 250, 0.2) !important
    }

    .transflagpink {

        background-color: rgba(245, 169, 184, 0.2) !important
    }
    #mobilelinks a {
        display: block;
        border: none;
        background-color: var(--site-black);
        text-decoration: none;
        color: white;
    }

    .visible {
        display: block !important
    }

    #news {
        width: 100%;
    }
    #thirdbox {
        width: 100%;
    }


}