* {
    margin: 0;
    padding: 0;
    font-family: "Lexend Deca";
    scroll-behavior: smooth;
}

@keyframes page-fade-in {
    0% {
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
}

@keyframes settle-scale {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/*.main-content, .navbar-div {
    animation: settle-scale 1s ease-out;
    -webkit-animation: settle-scale 1s ease-out;
}*/

div,footer:not(body) {
    animation: page-fade-in 1s linear;
    -webkit-animation: page-fade-in 1s linear;
}

body {
    background-color: rgb(31, 31, 31);
    max-width: 100vw;
    overflow-x: hidden;
}

.navbar-div {
    width: 100vw;
    background-color: rgb(24, 24, 24);
    border-bottom: 1px solid rgb(17, 17, 17);
    box-shadow: 0px 5px 5px rgb(17, 17, 17);
    height: 8vh;
    display: inline-flex;
    overflow-y: hidden;
}

.title-txt {
    color: white;
    margin-top: 1.5vh;
    padding-left: 1.25vh;
    font-size: 4vh;
    text-shadow: 0px 5px 10px black;
}

.title-sub-txt {
    font-size: 2.5vh;
    height: 3.5vh;
    margin-top: 1.5vh;
    text-wrap: nowrap;
    min-width: 50vw;
    overflow-y: hidden;
}

.title-wrapper {
    max-width: 100%;
    margin-left: 5.5vh;
    overflow-y: hidden;
    flex-wrap: nowrap;
    align-items: center;
    text-align: left;
}

.align-center {
    align-items: center;
}

.no-link-decor {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
}

.fit-content-width {
    width: fit-content;
}

.logo-icon {
    margin-top: 1.5vh;
    height: 5vh;
    box-shadow: 3px 4px 7px black;
}

.navbar-buttons {
    max-width: 50vw;
    margin-top: 3.5vh;
    margin-left: 8vh;
    height: 1.75vh;
    width: fit-content;
    padding-right: 1.75vh;
    background-color: rgb(10, 10, 10);
    border-radius: 5px;
    text-align: left;
    display: inline-flex;
    align-items: center;
}

.navbar-button {
    background-color: white;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-left: 1.75vh;
    padding-left: 1.65vh;
    padding-right: 1.65vh;
    height: 4.25vh;
    border-radius: 10px;
    align-items: center;
    transition: transform 100ms linear;
    -webkit-transition: transform 100ms linear;
}

.navbar-button:hover {
    transform: scale(0.95) rotate3d(0, 0, 1, -0.5deg)
}

.discord-btn {
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 15px rgb(255, 255, 255);
    background-color: blueviolet;
    border: 2px solid rgb(105, 27, 179);
    -webkit-filter: drop-shadow(0px 0px 5px blueviolet);
    filter: drop-shadow(0px 0px 5px blueviolet);

}

.navbar-btn-icon {
    height: 2vh;
    padding-right: 1vh;
}

.discord-icon {
    -webkit-filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
    filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
}

.discord-txt {
    font-size: 1.75vh;
}

.vote-txt {
    font-size: 1.75vh;
}

.vote-icon {
    height: 3vh;
    -webkit-filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
    filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
}

.vote-btn {
    background-color: rgb(187, 80, 80);
    border: 2px solid rgb(133, 35, 35);
    -webkit-filter: drop-shadow(0px 0px 5px rgb(187, 80, 80));
    filter: drop-shadow(0px 0px 5px rgb(187, 80, 80));
    text-shadow: 0px 0px 15px rgb(255, 255, 255);
    color: white;
}

.invite-btn {
    background-color: rgb(49, 103, 173);
    border: 2px solid rgb(30, 52, 80);
    -webkit-filter: drop-shadow(0px 0px 5px rgb(49, 103, 173));
    filter: drop-shadow(0px 0px 5px rgb(49, 103, 173));
    text-shadow: 0px 0px 15px rgb(255, 255, 255);
    color: white;
}

.invite-icon {
    height: 3vh;
    -webkit-filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
    filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
}

.invite-txt {
    font-size: 1.75vh;
}

.links-title {
    display: none;
}

.underline {
    text-decoration-line: underline;
    text-decoration-color: white;
    text-decoration-thickness: 1px;
    -webkit-text-decoration-line: underline;
    -webkit-decoration-color: white;
    -webkit-decoration-thickness: 1px;
}

.main-content {
    color: white;
    margin-top: 6vh;
    margin-bottom: 150px;
    max-width: 100vw;
}

.section {
    font-size: 3vh;
    background: linear-gradient(0deg, rgb(43, 43, 43) 0%, rgb(61, 60, 75) 100%);
    -webkit-filter: drop-shadow(0px 0px 7.5px rgb(255, 255, 255));
    filter: drop-shadow(0px 0px 7.5px rgb(255, 255, 255));
    height: fit-content;
    min-height: 60vh;
    padding: 5px;
    padding-left: 5vw;
    padding-bottom: 15px;
    margin-bottom: 5vh;
    max-width: 100vw;
    background-position: center;
    background-size: cover;
    transition: filter 150ms linear, transform 300ms linear;
    -webkit-transition: -webkit-filter 150ms linear, transform 300ms linear;
}

.about-section {
    background-image:
        radial-gradient(at 1% 1%,hsl(216, 60%, 46%) 0, transparent 80%),
        radial-gradient(at 85% 90%, hsl(120, 71%, 80%) 0, transparent 65%),
        radial-gradient(at 60% 20%, hsl(293, 86%, 80%) 0, transparent 90%),
        radial-gradient(at 20% 90%, hsl(44, 47%, 51%) 0, transparent 90%);
}

.terms-section {
    background-image: 
        radial-gradient(at 1% 1%, hsl(233.44deg 92.29% 23.42%) 0, transparent 80%),
        radial-gradient(at 85% 90%, hsl(48.5deg 54.71% 35.21%) 0, transparent 65%),
        radial-gradient(at 60% 20%, hsl(293, 86%, 80%) 0, transparent 90%),
        radial-gradient(at 20% 90%, hsl(131.75deg 47% 51%) 0, transparent 90%);
}

.privacy-section {
    background-image:
        radial-gradient(at 1% 1%, hsl(294.36deg 24.97% 42.33%) 0, transparent 80%),
        radial-gradient(at 85% 90%, hsl(48.5deg 54.71% 35.21%) 0, transparent 65%),
        radial-gradient(at 60% 20%, hsl(38.55deg 39.37% 49.26%) 0, transparent 90%),
        radial-gradient(at 20% 90%, hsl(171deg 95.99% 47.48%) 0, transparent 90%);
}

.section:hover {
    transform: scale(1.01);
    -webkit-filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
    filter: drop-shadow(0px 0px 15px rgb(255, 255, 255));
}

.about-description {
    font-size: 2.5vh;
    width: 85%;
    padding-left: 15px;
    padding-right: 15vw;
}

.about-title {
    padding-bottom: 10px;
}

.about-content {
    display: inline-flex;
}

.message {
    padding-top: 10px;
    display: inline-flex;
    padding-left: 45px;
    padding-right: 5vw;
}

.author-icon {
    border: 2px solid white;
    height: 12vh;
}

.author-content {
    padding-left: 10px;
}

.author-message {
    padding-left: 5px;
    font-size: 2vh;
}

.footer {
    position: fixed;
    width: 100vw;
    height: 10vh;
    bottom: 0px;
    background-color: rgb(24, 24, 24);
    border: 2px solid rgb(17, 17, 17);
    box-shadow: 0px 5px 5px rgb(17, 17, 17);
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: transform 100ms linear;
    transition: transform 100ms linear;
}

.footer:hover {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
}

.footer-icon {
    padding-left: 15px;
    height: 8vh;
}

.footer-content {
    padding-left: 25px;
    color: white;
}

.footer-title {
    font-size: 3vh;
}

.footer-description {
    font-size: 2vh;
    padding-left: 0.5vh;
    color: white;
}

@media (max-width: 1125px) {
    .navbar-div {
        vertical-align: middle;
    }

    .navbar-buttons {
        max-width: 75vw;
        width: 75vw;
        max-height: 50vh;
        height: fit-content;
        position: absolute;
        margin: 0;
        margin-top: 12vh;
        padding: 0;
        background-color: rgba(10, 10, 10, 0);
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        transform: translateX(11.25vw);
        justify-content: center;
    }

    .links-title {
        display: block;
        color: rgb(255, 255, 255);
        background: none;
        width: 100vw;
        max-width: 100vw;
        max-height: 3vh;
        font-size: 3vh;
        padding-bottom: 1vh;
        justify-content: center;
    }

    .navbar-button {
        width: 72.5vw;
        max-width: 72.5vw;
        height: 5vh;
        margin: 0;
        margin-bottom: 0.65vw;
        margin-right: 0.35vw;
        min-width: 30vw;
        display: inline-flex;
    }

    .invite-txt {
        font-size: 3vh;
    }

    .invite-icon {
        height: 4vh;
    }

    .discord-txt {
        font-size: 3vh;
    }

    .discord-icon {
        height: 2.5vh;
    }

    .vote-txt {
        font-size: 3vh;
    }

    .vote-icon {
        height: 4vh;
    }

    .vote-btn {
        background: linear-gradient(0deg, rgb(158, 67, 67) 0%, rgb(158, 67, 67) 50%, rgb(245, 125, 125) 100%);
        -webkit-filter: none;
        filter: none;
        width: fit-content;
    }

    .discord-btn {
        background: linear-gradient(0deg, blueviolet 0%, blueviolet 50%, rgb(105, 27, 179) 100%);
        -webkit-filter: none;
        filter: none;
        width: fit-content;
    }

    .invite-btn {
        background: linear-gradient(0deg, rgb(49, 103, 173) 0%, rgb(49, 103, 173) 50%, rgb(30, 52, 80) 100%);
        -webkit-filter: none;
        filter: none;
        width: fit-content;
    }

    .main-content {
        margin-top: 30vh;
    }
}