/* ds variables */
:root {
    --Spacing-100: 8px;
    --Spacing-150: 12px;
    --Spacing-200: 16px;
    --Spacing-400: 32px;
    --Spacing-600: 48px;

    --Radius-pill: 9999px;

    --Text-Default: #1C1221;
    --Text-On-Inverted: #ffffff;
    --Text-Subtle: rgba(28, 18, 33, 0.80);
    --Text-Interactive-Default: #603D6D;
    --Text-Interactive-Default-Hover: #382441;
    --Text-Interactive-On-Inverted-Hover: #ffffff;
    --Surface-Interactive-Strong: #382441;
    --Surface-Interactive-Strong-Hover: lch(22.6 24.5 315);
    --Border-Interactive-Subtle: rgba(96, 61, 109, 0.30);
    --Border-Interactive-Subtle-Hover: rgba(96, 61, 109, 1);

    --Font-Inter: 'Inter';
    --Font-Size-Normal: 16px;

    --col-border: rgba(0, 0, 0, 0.1);
    --col-focus: rgba(116, 36, 218, .05);
    --page-gutters-responsive: 20px;
    --grid-gutters-responsive: 16px;
    --focus-gutters-responsive: 16px;
}

@media (min-width: 67.5em) {
    :root {
        --page-gutters-responsive: 40px;
        --grid-gutters-responsive: 40px;
        --focus-gutters-responsive: 16px;
    }
}


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.background {
    /* re-position the blurry background behind the text/content */
    z-index: -1;
}

.w-full {
    width: 100%;
}

.w-650 {
    width: 650px;
}

.flex {
    display: flex;
    gap: var(--Spacing-100);
}

.justify-center {
    justify-content: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.button-group {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--Spacing-100);
    flex-wrap: wrap;
}

/* typings */

.heading-large {
    color: var(--Text-Subtle);
    font-family: "Nocturno Display Std";
    font-size: 45px;
    font-style: normal;
    font-weight: 450;
    line-height: 112%;
    margin: 0;
}

.intro-text {
    color: var(--Text-Default);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.body-text {
    color: var(--Text-Default);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 133%;
}

.content-grid {
    width: 100%;
    height: 100%;
    padding: var(--Spacing-150);
}

.login-options-list {
    margin-bottom: 25px;
}

.login-item {
    list-style: none;
    cursor: pointer;
    border-radius: 0.5em;
    padding: 0 .5em;
    
    &:hover {
        background-color: var(--col-focus);
    }
}

.login-item-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--col-border);
    gap: var(--Spacing-100);
    padding: var(--Spacing-200) 0;

}

/* buttons */
button {
    cursor: pointer;
}

.button {
    display: flex;
    padding: var(--Spacing-150) var(--Spacing-200);
    justify-content: center;
    align-items: center;
    gap: -2px;
    border-radius: var(--Radius-pill);
    background: var(--Surface-Interactive-Strong);
    font-size: var(--Font-Size-Normal);
    font-family: Inter, sans-serif;
}

.button-icon {
    display: flex;
    width: 20px;
    height: 20px;
    align-items: flex-start;
    transition: transform 0.3s ease-in-out;
}

.button-with-icon {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--Spacing-100);
    flex-wrap: wrap;
}

.button-with-icon:hover .button-icon {
    transform: translateX(2px);
}

.button-strong {
    background-color: var(--Surface-Interactive-Strong);
    color: var(--Text-On-Inverted);
}

.button-strong:hover {
    color: var(--Text-Interactive-On-Inverted-Hover);
    background: var(--Surface-Interactive-Strong-Hover);
}

.button-outline {
    background-color: transparent;
    color: var(--Text-Interactive-Default);
    border: 1px solid var(--Border-Interactive-Subtle);
}

.button-outline:hover {
    box-shadow: 0 0 0 1px var(--Border-Interactive-Subtle-Hover) inset;
    color: var(--Text-Interactive-Default-Hover);
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/**
  * Fonts
  */
@font-face {
    font-family: Nocturno;
    font-style: normal;
    font-weight: 400;
    src: url(../assets/fonts/NocturnoStd-Regular.d6baa9256bc17b660d20.otf)
    format("opentype");
}
@font-face {
    font-family: Nocturno;
    font-style: italic;
    font-weight: 400;
    src: url(../assets/fonts/NocturnoStd-RegularItalic.3e6146c235e7e3fb8f1e.otf)
    format("opentype");
}
@font-face {
    font-family: Nocturno;
    font-style: normal;
    font-weight: 500;
    src: url(../assets/fonts/NocturnoStd-Medium.cff5ac0b7ebd9b29e113.otf)
    format("opentype");
}
@font-face {
    font-family: Nocturno;
    font-style: italic;
    font-weight: 500;
    src: url(../assets/fonts/NocturnoStd-MediumItalic.fc28f5f8cf8af4e236d2.otf)
    format("opentype");
}
@font-face {
    font-family: Nocturno;
    font-style: normal;
    font-weight: 600;
    src: url(../assets/fonts/NocturnoStd-Bold.19b3d52815b9337ec0d9.otf)
    format("opentype");
}
@font-face {
    font-family: Nocturno;
    font-style: italic;
    font-weight: 600;
    src: url(../assets/fonts/NocturnoStd-BoldItalic.9bdbc6b6681f5915f357.otf)
    format("opentype");
}
@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    src: url(../assets/fonts/inter-v8-latin-regular.ff3afbb2a036f0d204a2.eot);
    src: local(""),
    url(../assets/fonts/inter-v8-latin-regular.ff3afbb2a036f0d204a2.eot?#iefix)
    format("embedded-opentype"),
    url(../assets/fonts/inter-v8-latin-regular.c96fe5ff771f9e7b53ab.woff2)
    format("woff2"),
    url(../assets/fonts/inter-v8-latin-regular.513f22e166bab984fa60.woff)
    format("woff"),
    url(../assets/fonts/inter-v8-latin-regular.c859cc4f014e93b39c57.ttf)
    format("truetype"),
    url(../assets/fonts/inter-v8-latin-regular.b8db5cf5416facf0c5ec.svg#Inter)
    format("svg");
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    src: local(""),
    url(../assets/fonts/inter-v8-latin-500.6dcbc9bed1ec438907ee.ttf)
    format("truetype");
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    src: url(../assets/fonts/inter-v8-latin-600.413486007c6c5310157d.eot);
    src: local(""),
    url(../assets/fonts/inter-v8-latin-600.413486007c6c5310157d.eot?#iefix)
    format("embedded-opentype"),
    url(../assets/fonts/inter-v8-latin-600.ee12ccf9091a8c14bf3a.woff2)
    format("woff2"),
    url(../assets/fonts/inter-v8-latin-600.cf69c3beb14c128add3f.woff)
    format("woff"),
    url(../assets/fonts/inter-v8-latin-600.afd672b8f186982ccb0f.ttf)
    format("truetype"),
    url(../assets/fonts/inter-v8-latin-600.9a42e1a5ef4e43e16747.svg#Inter)
    format("svg");
}