body {
        font-family: "Varela Round", sans-serif;
    }


    :root {
        --darkModeToggle: url(/assets/icons/moon.svg);
        --backgroundColor: linear-gradient(45deg, #000000, #16181C, #3a2f4d);
        --elementColor: #26292F;
        --elementColor2: #434956;
        --elementColor3: #301934;
        --elementColor4: rgba(45, 45, 45, 0.7);
        --elementColorTransparent: rgba(38, 41, 47, 0.5);
        --textColor: rgb(255, 255, 255);
        --textColor2: white;
        --accentColor: #1BD96A;
        --invert: invert(1);
        --titleGradient: linear-gradient(90deg, #76b852, #8DC26F);
        --accentGradient: linear-gradient(90deg, #1BD96A, #76b852);
        --accentGradient2: linear-gradient(90deg, #141E30, #243B55);
    }

    .darkMode {
        --darkModeToggle: url(/assets/icons/sun.svg);
        --backgroundColor: linear-gradient(45deg, #a1c4fd, #00e1e9, #00ffb1);
        --elementColor: rgb(209, 236, 249);
        --elementColor2: rgb(168, 227, 255);
        --elementColor3: rgb(0, 255, 178);
        --elementColor4: rgba(173, 222, 245, 0.7);
        --elementColorTransparent: rgba(209, 236, 249, 0.5);
        --accentColor: #2d7da0;
        --textColor: black;
        --textColor2: black;
        --invert: invert(0);
        --titleGradient: linear-gradient(90deg, #360033, #0b8793);
        --accentGradient: linear-gradient(90deg, #52b8e4, #a1c4fd);
        --accentGradient2: linear-gradient(90deg, #83a4d4, #b6fbff);
    }

    .background {
        height: 100vh;
        width: 100%;
        background: var(--backgroundColor);
        background-size: 300% 300%;
        animation: color 12s ease-in-out infinite;
        background-attachment: fixed;
    }

    @keyframes color {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    .navbar {
        position: sticky;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--elementColor);
        border-radius: 100px;
        transition: border-radius 200ms, background-color 200ms;
        margin: 10px;
        z-index: 10000000000;
        height: 60px;
        backdrop-filter: blur(5px);
    }

    .navbar ul {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style-type: none;
        margin: auto;
    }

    .navbar li {
        float: left;
        border-right: 0px solid #bbb;
        margin: 0.5vw;
    }

    .navbar li a {
        display: block;
        color: var(--textColor);
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: transform 200ms, border-top 100ms, border-bottom 200ms;
        border-radius: 10px;
    }

    .navbar li a:hover:not(.active) {
        transform: scale(0.9);

    }

    .active::after {
        content: "";
        display: block;
        height: 4px;
        background-color: var(--accentColor);
        width: 100%;
        border-radius: 1000px;
    }

    .navbar li a:not(.active) {
        margin-bottom: 4px;
    }

    .homeIcon {
        width: 40px;
        background-repeat: no-repeat;
        background-size: contain;
        float: right;
        padding-left: 10px;
        filter: var(--invert);
        transition: transform 0.3s;
    }

    .homeIcon:hover {
        cursor: pointer;
        transform: scale(0.9);
    }


    .darkModeToggle {
        aspect-ratio: 1/1;
        width: 40px;
        background-image: var(--darkModeToggle);
        background-repeat: no-repeat;
        background-size: contain;
        float: right;
        margin-right: 10px;
        transition: transform 1s, background-image 1s;
    }

    .darkModeToggle:hover {
        cursor: pointer;
    }

    .darkModeToggle.clicked {
        transform: rotate(360deg);
    }


    .cookieBanner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--elementColor);
        color: var(--textColor);
        padding: 10px;
        text-align: center;
        border-radius: 10px;
        transition: background-color 200ms;
        z-index: 1000;
        margin: 10px 20px 0px 20px;
    }

    .cookieAccept {
        background-color: var(--accentColor);
        color: var(--textColor);
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .cookieDeny {
        background-color: #ff4d4d;
        color: var(--textColor);
        border: none;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .footer {
        padding: 5px;
        display: flex;
        justify-content: center;
        align-content: end;
        background-color: var(--elementColor);
        color: var(--textColor);
        border-radius: 10px;
        margin: 10px;
        bottom: 0px;
        flex-wrap: wrap;
    }

    .footerContent {
        display: flex;
        flex-direction: column;
        justify-content: left;
        color: var(--textColor);
        margin: 10px;
        padding: 10px;
        border-radius: 10px;
        background-color: var(--elementColor2);
        min-width: 200px;
        width: 20%;
    }

    .footerTitle {
        display: flex;
        font-size: 1em;
        font-weight: bold;
        text-decoration: underline;
    }

    .footerContactContent {
        font-size: 0.9em;
        margin: 5px;
    }

    .footerContactContent a {
        color: var(--textColor);
    }

    .footerContactContent a:hover {
        color: var(--accentColor);
        text-decoration: underline;
    }

    .footerCookieTitle {
        margin: 0px;
    }

    .footerCookieButton a {
        text-decoration: underline;
    }


    .footerCookieButton a:hover {
        cursor: pointer;
        color: var(--accentColor);
        text-decoration: underline;
    }

    .hamburgerIcon {
        display: none;
        width: 40px;
        background-repeat: no-repeat;
        background-size: contain;
        float: right;
        padding-left: 10px;
        filter: var(--invert);
    }

    .hamburgerIcon:hover {
        cursor: pointer;
    }

    .hamburgerMenu {
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 17px;
        right: 17px;
        background-color: var(--elementColorTransparent);
        backdrop-filter: blur(5px);
        border-radius: 10px;
        transition: background-color 200ms;
        margin-top: 10px;
        z-index: 10000000000;
        border-style: solid;
        border-color: var(--elementColor2);
        transform: translateY(-100%);
    }

    .hamburgerMenu.show {
        opacity: 1;
        animation: slideDown 0.5s forwards;
    }

    @keyframes slideDown {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .hamburgerMenu.hide {
        animation: slideUp 0.5s forwards;
        animation-fill-mode: forwards
    }

    @keyframes slideUp {
        to {
            transform: translateY(-100%);
        }
    }

    .hamburgerMenu ul {
        list-style-type: none;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hamburgerMenu li {
        margin: auto;
        text-align: center;
        padding-right: 10vw
    }

    .hamburgerMenu li a {
        display: block;
        color: var(--textColor);
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: background-color 200ms, border-top 100ms;
        border-radius: 10px;
    }

    .HamburgerCross {
        position: fixed;
        top: 3px;
        left: 0;
        width: 50px;
        background-repeat: no-repeat;
        background-size: contain;
        padding-left: 10px;
        filter: var(--invert);
    }

    .highlight {
        color: var(--accentColor);
        font-weight: bold;
    }

    .backToTop {
        color: var(--textColor);
        text-decoration: none;
        position: fixed;
        bottom: 25px;
        right: 25px;
        background-color: var(--accentColor);
        width: 50px;
        height: 50px;
        line-height: 43px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        opacity: 0;
        visibility: hidden;
        font-size: 2rem;
    }

    @media only screen and (max-width: 600px) {
        .navbar li {
            display: none;
        }

        .darkModeToggle {
            float: left;
        }

        .homeIcon {
            display: none;
        }

        .hamburgerIcon {
            display: block;
        }

    }