/* Variables and Definitions */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

@keyframes wiggle {
    0%  { transform: rotate(0deg) }
    50% { transform: rotate(0deg) }
    51% { transform: rotate(9deg) }
    52% { transform: rotate(-7deg) }
    53% { transform: rotate(5deg) }
    54% { transform: rotate(-3deg) }
    55% { transform: rotate(2deg) }
    56% { transform: rotate(-1deg) }
    57% { transform: rotate(0.5deg) }
    58% { transform: rotate(-0.25deg) }
    59% { transform: rotate(0deg) }
}

@keyframes fadeIn {
    from  { transform: translateY(100vh); opacity: 0%; }
    to  { transform: translateY(0px); opacity: 100%; }
}

:root {
    /* Global Values */
    --primary-bg-color: #212224;
    --secondary-bg-color: #2D2F31;
    --transparent-bg-color: #151518bb;
    --primary-color: #51D181;
    --secondary-color: #FFFFFF;
    --primary-font-family: 'Nunito Sans', sans-serif;
    --small-font-size: 16px;
    --medium-font-size: 20px;
    --large-font-size: 36px;
    --primary-font-weight: 600;
    --secondary-font-weight: 500;
    --transition-duration: 0.3s;
    --base-spacing: 5px;

    /* Button Values */
    --button-color: #5865F2;
    --button-border-radius: var(--base-spacing);
    --button-hover-brightness: 80%;
    --button-padding: calc(2 * var(--base-spacing)) calc(5 * var(--base-spacing));

    /* Navigation Values */
    --nav-height: calc(20 * var(--base-spacing));
    --nav-height-shrunk: calc(15 * var(--base-spacing));
    --nav-padding: 0 calc(5 * var(--base-spacing));
    --nav-height-transition-duration: 0.5s;
    --nav-invite-wiggle-wait: 9s;
    --nav-left-margin-left: calc(5 * var(--base-spacing));
    --nav-logo-width: calc(12 * var(--base-spacing));
    --nav-list-margin: 0 calc(5 * var(--base-spacing));
    --nav-list-shrunk-padding: calc(5 * var(--base-spacing));
    --hamburger-width: calc(9 * var(--base-spacing));
    --hamburger-height: calc(7 * var(--base-spacing));
    --hamburger-bar-height: 3px;

    /* Accent Boar Values */

    --accent-boar-width: calc(80 * var(--base-spacing));
    --accent-boar-position: -100px;
    --accent-boar-rotation: -20deg;

    /* Main Content Values */
    --main-margin: calc(var(--nav-height) + calc(15 * var(--base-spacing))) 0;
    --main-margin-shrunk: calc(10 * var(--base-spacing) + (100vw - 100 * var(--base-spacing))/2);
    --main-padding: 0 calc(5 * var(--base-spacing));
    --main-max-width: calc(180 * var(--base-spacing));
    --main-summary-margin-bottom: calc(5 * var(--base-spacing));
    --main-animation-value: fadeIn 1.5s 1 forwards;
    --main-animation-delay-interval: 0.2s;
    --main-invite-padding: calc(2 * var(--base-spacing)) calc(10 * var(--base-spacing));
    --main-feature-margin-top: calc(15 * var(--base-spacing));
    --main-feature-div-width: calc(80 * var(--base-spacing));
    --main-feature-img-shrunk-margin-top: calc(10 * var(--base-spacing));
    --legal-header-margin-bottom: calc(5 * var(--base-spacing));
    --legal-div-padding: calc(10 * var(--base-spacing));
    --legal-div-shrunk-padding: calc(5 * var(--base-spacing));
    --legal-div-border-radius: calc(2 * var(--base-spacing));
    --legal-ul-margin-left: calc(3 * var(--base-spacing));
    --legal-sub-header-margin: calc(2 * var(--base-spacing)) 0;
    --legal-div-bottom-margin: calc(10 * var(--base-spacing));
}

/* Defaults */

body {
    background-color: var(--primary-bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    display: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--primary-font-family);
    font-size: var(--small-font-size);
    font-weight: var(--secondary-font-weight);
    color: var(--secondary-color);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    font-weight: var(--primary-font-weight);;
}

h1 {
    font-size: var(--large-font-size);
}

h2 {
    font-size: var(--medium-font-size);;
}

a {
    display: flex;
    transition: color var(--transition-duration);
}

a:hover {
    cursor: pointer;
    color: var(--primary-color);
}

button {
    border: none;
    background-color: var(--button-color);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding);
    transition: filter var(--transition-duration);
}

button:hover {
    cursor: pointer;
    filter: brightness(var(--button-hover-brightness));
}

/* Navigation */

nav {
    z-index: 1;
    position: fixed;
    height: var(--nav-height);
    width: 100%;
    padding: var(--nav-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-duration), height var(--nav-height-transition-duration);
}

#nav-left {
    display: flex;
    align-items: center;
}

#nav-left #bot-invite {
    animation: wiggle var(--nav-invite-wiggle-wait) infinite;
}

#nav-left > * {
    margin-right: var(--nav-left-margin-left);
}

#nav-left #logo img {
    width: var(--nav-logo-width);
}

#nav-items {
    display: flex;
    list-style-type: none;
}

#nav-items li {
    margin: var(--nav-list-margin);
}

#hamburger-button {
    position: relative;
    padding: 0;
    width: var(--hamburger-width);
    height: var(--hamburger-height);
    background: none;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}

#hamburger-button::before,
#hamburger-button::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--hamburger-bar-height);
    background-color: var(--secondary-color);
    transition: all var(--transition-duration);
}

#hamburger-button::before {
    top: 0;
}

#hamburger-button::after {
    bottom: 0;
}

#hamburger-button span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: var(--hamburger-bar-height);
    background-color: var(--secondary-color);
    transition: all var(--transition-duration);
}

#hamburger-menu {
    margin: 0;
    display: none;
}

#hamburger-button.open span {
    background-color: #00000000;
    transform: rotate(45deg);
}

#hamburger-button.open::before {
    top: 50%;
    transform: rotate(-45deg) translateY(-50%);
}

#hamburger-button.open::after {
    bottom: 50%;
    transform: rotate(45deg) translateY(50%);
}

/* Accent Boars */

.gray-boars {
    z-index: -1;
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow: hidden;
}

.gray-boar {
    width: var(--accent-boar-width);
    position: absolute;
    right: var(--accent-boar-position);
    rotate: var(--accent-boar-rotation);
}

.gray-boar:nth-of-type(even) {
    left: var(--accent-boar-position);
    transform: scaleX(-1);
}

/* Main Content */

main {
    margin: var(--main-margin);
    padding: var(--main-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: var(--main-max-width);
    width: 100%;
}

#summary {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#summary h1 {
    margin-bottom: var(--main-summary-margin-bottom);
    opacity: 0%;
    animation: var(--main-animation-value);
}

#summary p {
    margin-bottom: var(--main-summary-margin-bottom);
    text-align: center;
    opacity: 0%;
    animation: var(--main-animation-value);
    animation-delay: var(--main-animation-delay-interval);
}

#summary a {
    display: flex;
    flex-flow: column;
    align-items: center;
    opacity: 0%;
    animation: var(--main-animation-value);
    animation-delay: calc(2 * var(--main-animation-delay-interval));
}

#summary #server-invite {
    padding: var(--main-invite-padding);
}

.feature {
    margin-top: var(--main-feature-margin-top);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0%;
    animation: var(--main-animation-value);
}

.feature img {
    max-width: var(--main-feature-div-width);
}

.feature:nth-of-type(odd) img {
    order: 1;
}

.feature div {
    max-width: var(--main-feature-div-width);
}

.legal-section {
    width: 100%;
}

.legal-section h1 {
    text-align: center;
    margin-bottom: var(--legal-header-margin-bottom);
}

.legal-section div {
    background-color: var(--secondary-bg-color);
    padding: var(--legal-div-padding);
    border-radius: var(--button-border-radius);
}

.legal-section ul {
    margin-left: var(--legal-ul-margin-left);
}

.legal-section h2 {
    margin: var(--legal-sub-header-margin);
}

.legal-section:first-of-type {
    margin-bottom: var(--legal-div-bottom-margin);
}

.legal-section:nth-child(1) h1 {
    opacity: 0%;
    animation: var(--main-animation-value);
}

.legal-section:nth-child(1) div {
    opacity: 0%;
    animation: var(--main-animation-value);
    animation-delay: var(--main-animation-delay-interval);
}

.legal-section:nth-child(2) h1 {
    opacity: 0%;
    animation: var(--main-animation-value);
    animation-delay: calc(2 * var(--main-animation-delay-interval));
}

.legal-section:nth-child(2) div {
    opacity: 0%;
    animation: var(--main-animation-value);
    animation-delay: calc(3 * var(--main-animation-delay-interval));
}

@media only screen and (max-width: 1000px) {
    #nav-items li {
        margin: 0 0 var(--nav-list-shrunk-padding) 0;
    }

    #nav-items {
        opacity: 0;
        display: none;
        position: absolute;
        left: 0;
        top: var(--nav-height-shrunk);
        width: 100%;
        padding-top: var(--nav-list-shrunk-padding);
        flex-direction: column;
        align-items: center;
        text-align: center;
        background-color: var(--transparent-bg-color);
        transition: opacity .3s;
    }

    main {
        margin-bottom: var(--main-margin-shrunk);
    }

    #hamburger-button {
        display: flex;
    }
    
    .feature {
        flex-direction: column;
        text-align: center;
    }

    .feature img {
        width: 100%;
        margin-top: var(--main-feature-img-shrunk-margin-top);
        order: 2;
    }

    .legal-section div {
        padding: var(--legal-div-shrunk-padding);
    }
}