@import url("/static/variables.css");

html,
body {
    height: var(--heightfull);
}

body {
    margin: var(--zero);
    min-height: var(--heightfullvh);
    display: var(--displayflex);
    align-items: var(--aligncenter);
    justify-content: var(--justifycenter);
    font-family: var(--fontfamily);
    color: var(--colorblack);
    background-image: url("/static/Assets/Prism Background.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #f4f3ff;
    position: var(--positionrelative);
    overflow: var(--hidden);
}

.accesscontainer {
    user-select: var(--none);
    display: var(--displayflex);
    flex-direction: var(--column);
    align-items: var(--aligncenter);
    justify-content: var(--justifycenter);
    margin: var(--auto);
    gap: clamp(28px, 5vw, 52px);
    width: min(92vw, 520px);
    padding: var(--fortypixels) var(--twentyfourpixels) 96px;
    text-align: var(--aligncenter);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.accesslogo {
    display: var(--displayflex);
    align-items: var(--aligncenter);
    justify-content: var(--justifycenter);
}

.accesslogo-image {
    display: block;
    width: min(100%, 360px);
    height: auto;
}

.google-login {
    font-family: var(--fontfamily);
    color: var(--colorwhite);
    width: var(--auto);
    min-width: 240px;
    max-width: 320px;
    padding: var(--fifteenpixels);
    border-radius: 25px;
    border: 1px solid #e2e8f03f;
    display: var(--displayflex);
    justify-content: var(--justifycenter);
    align-items: var(--aligncenter);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 1);
    background-color: #1b172c;
    text-decoration: var(--none);
    font-weight: var(--fontweightsemibold);
}

.google-login:hover {
    background-color: #261f3b;
}

.auth-message {
    margin: 0;
    padding: var(--twelvepixels) var(--sixteenpixels);
    border-radius: var(--sixteenpixels);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 23, 42, 0.15);
    color: var(--colorblack);
    font-size: var(--fontparagraph);
    text-align: var(--aligncenter);
}

.access-legal-links {
    position: var(--positionfixed);
    left: var(--widthhalf);
    bottom: var(--eighteenpixels);
    transform: translateX(-50%);
    display: var(--displayflex);
    align-items: var(--aligncenter);
    justify-content: var(--justifycenter);
    gap: var(--sixteenpixels);
    flex-wrap: var(--wrap);
    padding: 0 16px;
    z-index: var(--two);
}

.access-legal-links a {
    color: rgba(15, 23, 42, 0.86);
    font-size: var(--fontparagraph);
    font-weight: var(--fontweightmedium);
    text-decoration: var(--none);
}

.access-legal-links a:hover {
    color: rgba(15, 23, 42, 1);
}

@media (max-width: 640px) {
    .accesscontainer {
        gap: 32px;
        padding: var(--thirtytwopixels) var(--twentyfourpixels) 88px;
    }

    .access-legal-links {
        bottom: var(--fourteenpixels);
        gap: var(--twelvepixels);
    }
}