body {
    background: var(--accent);
    background: linear-gradient(180deg, var(--accent) 0%, var(--text-strong) 50%);
}

.blur-cover {
    position: absolute;

    width: 100%;
    height: 100%;
    z-index: -1;

    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);

    pointer-events: none;
}

/* ====================NAVBAR==================== */

.log-in {
    width: 100%;
    max-width: var(--lockedvw);
    margin: auto;

    display: grid;
    place-items: center;

    padding: 0 calc(var(--sidepadding) + clamp(0rem, -6.1069vw + 2.9313rem, 1.5rem));
}

.log-in-container {
    max-width: 370px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
    gap: 28px;

    text-align: center;
    color: var(--surface-base);
}

.log-in-text p {
    color: var(--text-muted);
    padding-top: 10px;
}

.log-in-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: auto;

    gap: 12px;
}

.log-in-cta button {
    width: 100%;

    background-color: var(--surface-base);
    color: var(--text-strong);

    padding: 15px 0;
    border-radius: 8px;
    font-weight: 500;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    transition: background-color 0.3s ease;

    & svg { width: 16px; }
    &:hover { background-color: var(--text-muted); }
    &:active { scale: .99; }
}

.log-in-legal {
    color: var(--text-default); 
    text-align: left; 
    font-size: 15px;

    & a {
        transition: color .3s ease;

        &:hover { 
            text-decoration: underline;
            color: var(--text-muted);
        }
    }
}