body
{
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100dvw;
    height         : 100dvh;
}
body::before
{
    z-index         : -1;
    position        : fixed;
    left            : -200px;
    top             : -350px;
    content         : '';
    border-radius   : 100%;
    width           : 30%;
    aspect-ratio    : 1;
    background-color: var(--color-primary-400);
    filter          : blur(200px);
}

.container
{
    max-width: fit-content;
    height   : fit-content;
    display  : flex;
    gap      : 240px;
}

.content
{
    max-width: 440px;
}
.content-title
{
    color         : var(--color-primary-500);
    font-size     : var(--font-size-48);
    font-weight   : var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-densest);
}
.content-subtitle
{
    font-size     : var(--font-size-24);
    font-weight   : var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-dense);
    line-height   : var(--line-height-smooth);
    color         : var(--color-text-secondary);
}

.access
{
    display       : flex;
    flex-direction: column;
    gap           : 48px;
    align-items   : stretch;
    width         : 396px;
    max-width     : 100%;
}
.logomark
{
    max-width: 220px;
    width: 100%;
    align-self: center;
}
.access-title
{
    text-align : center;
    font-size  : var(--font-size-24);
    font-weight: var(--font-weight-bold);
    color      : var(--color-text-secondary);
}

.access-form
{
    display         : flex;
    flex-direction  : column;
    gap             : 16px;
}
.access-group
{
    border        : none;
    display       : flex;
    flex-direction: column;
    gap           : 16px;
    padding       : 0;
}

.input-group
{
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    align-items   : stretch;
    flex          : none;
}

@scope (.input-group[data-invalid="true"])
{
    .input-field_group:has(.input-field)
    {
        border-color: var(--color-feed-danger);
    }
    .input-field_group-icon:last-child
    {
        color: var(--color-feed-danger);
    }
    .input-field
    {
        border-color: var(--color-feed-danger);
    }
}
@scope (.input-group[data-invalid="false"])
{
    .input-field_group-icon:last-child
    {
        display: none;
    }
}

.input-field_group
{
    display    : flex;
    align-items: center;
    gap        : 12px;
    flex       : 1;
}
.input-field_group:has(.input-field)
{
    border-radius   : 5px;
    border          : 1px solid var(--color-text-secondary);
    background-color: var(--color-white);
    padding         : 16px;
}
.input-field_group:has(.input-field) .input-field
{
    border-radius   : 0;
    background-color: transparent;
    border          : none;
    padding         : 0;
}

.input-field_group-icon
{
    font-size: var(--font-size-24);
    color    : var(--color-text-secondary);
}

.input-field
{
    flex         : 1;
    border-radius: 5px;
    outline      : none;
    border       : 1px solid var(--color-text-secondary);
    padding      : 16px;
    color        : var(--color-text-primary);
    font-size    : var(--font-size-16);
    font-weight  : var(--font-weight-regular);
}

select.input-field{
    /* display: none; */
    width: 100%;
}
.info-box{
    padding         : 4px;
    display         : block;
    width           : fit-content;
    margin          : 0 auto;
    border-radius   : 4px;
    background-color: var(--color-light);
}
.input-field_msg
{
    font-size      : var(--font-size-13);
    line-height    : var(--line-height-fit);
    text-decoration: none solid rgb(240, 40, 73);
    color          : var(--color-feed-danger);

    & .input-field_msg-link{
        color          : inherit;
        text-decoration: none;
        font-weight    : var(--font-weight-bold);

        &:hover{
            text-decoration: underline;
        }
    }
}

.button
{
    background-color: var(--color-primary-400);
    border          : none;
    font-weight     : var(--font-weight-bold);
    color           : var(--color-white);
    transition      : all 0.15s ease;
    cursor          : pointer;

    &:hover
    {
        background-color: var(--color-primary-500);
    }
}

.access-link
{
    text-align     : center;
    text-decoration: none;
    align-self     : center;

    &:hover
    {
        text-decoration: underline;
    }
}

.footer
{
    background-color: var(--color-light);
    position        : fixed;
    bottom          : 0;
    left            : 0;
    right           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 200px;
    padding         : 20px;
}
.footer-item
{
    margin: 0;
}
.footer-list
{
    list-style: none;
    display   : flex;
    gap       : 60px;
    margin    : 0;
    padding   : 0;

    & a
    {
        color          : var(--color-text-primary);
        display        : flex;
        align-items    : center;
        gap            : 8px;
        text-decoration: none;
    }
}

@media screen and (max-width: 1024px)
{
    body
    {
        flex-direction: column;
    }
    .container
    {
        flex-direction : column;
        padding-inline : 25px;
        width          : 100%;
        padding-block  : 40px;
        flex           : 1;
        justify-content: center;
    }
    .content
    {
        display: none;
    }

    .footer
    {
        position      : relative;
        flex-direction: column;
        gap           : 40px;
        width: 100%;
    }
    .footer-list
    {
        flex-wrap            : wrap;
        display              : grid;
        grid-template-columns: 1fr 1fr;
        column-gap           : 30px;
        row-gap              : 14px;
        justify-content      : center;

        & a{
            flex: 1 0 auto;
        }
    }
}