.sig-gradient {
    background: -webkit-linear-gradient(45deg, #338CF5, #4FD1C5);
    background: linear-gradient(45deg, #338CF5, #4FD1C5);
    /* Standard property */
    -webkit-background-clip: text;
    background-clip: text;
    /* Standard property */
    -webkit-text-fill-color: transparent;
}

.blue-dot {
    height: 50px;
    width: 50px;
    background-color: #338CF5;
    border-radius: 50%;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.green-dot {
    height: 50px;
    width: 50px;
    background-color: #52b534;
    border-radius: 50%;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.red-dot {
    height: 50px;
    width: 50px;
    background-color: #d82e20;
    border-radius: 50%;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.cta-button {
    background-color: #338CF5;
    border-color: #338CF5;
}

.cta-button:hover {
    background-color: #6faff8;
    border-color: #6faff8;
}

a.anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

.vl {
    border-left: 2px solid gray;
    height: 6rem;
    margin-left: 50%;
    margin-bottom: 3rem;
}

.box-light span {
    width: 20px;
    height: 20px;
    display: block;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    margin: auto;
    animation: animate 2s infinite;
}

.box-light span:nth-child(2) {
    animation-delay: -0.2s;
}

.box-light span:nth-child(3) {
    animation-delay: -0.4s;
}

.box-dark span {
    width: 20px;
    height: 20px;
    display: block;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    margin: auto;
    animation: animate 2s infinite;
}

.box-dark span:nth-child(2) {
    animation-delay: -0.2s;
}

.box-dark span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        transform: rotate(45deg) translate(10px, 10px);
    }

    100% {
        opacity: 0;
    }
}


/* test stuff */

nav.container {
    background-color: var(--background-color);
    z-index: 1;
    overflow: hidden;
    align-items: center;
}

nav :is(.menu-btn, .menu-icon) {
    display: none;
    cursor: pointer;
    user-select: none;
}

@media (width < 48em) {
    nav.container {
        flex-wrap: wrap;

        & .menu-icon {
            display: block;
        }

        &>ul.menu {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            max-height: 0;
            transition: max-height 0.3s ease-out;

            & li {
                width: 100%;
            }

            & a {
                display: block;
            }

            /*& a:hover {
                background-color: white;
            }*/
        }

        & .menu-btn:checked~.menu {
            max-height: 100vh;
        }
    }
}

@media (min-width: 993px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .non-mobile-only {
        display: none !important;
    }
}