.header-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    background-color: var(--bg-primary);
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .25), transparent);
    color: whitesmoke;

    &>* {
        margin: auto 0;
    }
}

.header {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding: 1rem;
    color: whitesmoke;

    &>* {
        margin: auto 0;
    }
}

.header-logo-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

@media (min-width: 768px) {
    .header-logo-wrap {
        justify-content: flex-start;
        width: auto;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(270deg);
    }

    50% {
        transform: rotate(540deg);
    }

    75% {
        transform: rotate(810deg);
    }

    100% {
        transform: rotate(1080deg);
    }
}

.header-logo {
    animation: spin 10s ease-in-out infinite;
}


.header-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-title {
    display: block;
    font-size: 24px;
    font-weight: bold;
    margin: auto 0;
    /* padding-left: 1rem; */
    user-select: none;
    transform: scale(1);


}


@media(min-width: 768px) {

    .header-title {
        margin-left: 1rem;
    }

    .header-title:active {
        transform: none;
    }
}


@media(width > 768px) {
    .points-logo {
        display: none !important;
    }
}


@media(width <=768px) {
    .header-title-wrap {
        cursor: pointer;

        &:active {
            transform: scale(.9);
        }
    }
}


@keyframes pop-in {
    from {
        transform: scale(0) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}


@keyframes pop-out {
    from {
        transform: scale(1) rotate(360deg);
    }

    to {
        transform: scale(0) rotate(0deg);
    }
}

.pop-in {
    animation: pop-in .5s ease-in-out normal forwards;
}

.pop-out {
    animation: pop-out .5s ease-in-out forwards;
}

@media(min-width: 768px) {
    .pop-in {
        animation: none;
    }

    .pop-out {
        animation: none;
    }
}


.header-nav {
    z-index: 1;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: calc(80px + 1rem);
    right: 1rem;
    background-color: var(--bg-primary);
    background-image: radial-gradient(ellipse at top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));

    border-radius: 15px;
    width: 200px;
    box-shadow: var(--shadow);
    transform: scale(0);
    overflow: hidden;
}

.open {
    transform: scale(1) !important;
}

.header-nav-link {
    padding: .5rem 1rem;
    display: block;
    text-transform: capitalize;
    font-weight: 100;
    transition: background-color 150ms linear;
    color: whitesmoke;
    text-align: left;

    &:hover {
        background-color: rgba(255, 255, 255, 0.05);
        font-weight: 300;
    }
}

.header-nav-link.active {
    font-weight: 600 !important;
    color: var(--fg-active) !important;
    /* background-color: rgba(255, 255, 255, 0.05); */
}


@media(min-width: 768px) {
    .header-nav {
        position: static;
        transform: scale(1);
        background-color: transparent;
        background-image: none;
        flex-direction: row;
        width: auto;
        box-shadow: none;
    }

    .header-nav-link {
        &:hover {
            background-color: inherit;
        }
    }

    .header-nav-link-active {
        background-color: transparent;
    }
}