@font-face {
    font-family: 'Satoshi-Variable';
    src:
        url('fonts/Satoshi/Satoshi-Variable.woff2') format('woff2'),
        url('fonts/Satoshi/Satoshi-Variable.woff') format('woff'),
        url('fonts/Satoshi/Satoshi-Variable.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

/**
  * This is a variable font
  * You can control variable axes as shown below:
  * font-variation-settings: wght 900.0;
  *
  * available axes:
  'wght' (range from 300.0 to 900.0
  */
@font-face {
    font-family: 'Satoshi-VariableItalic';
    src:
        url('fonts/Satoshi/Satoshi-VariableItalic.woff2') format('woff2'),
        url('fonts/Satoshi/Satoshi-VariableItalic.woff') format('woff'),
        url('fonts/Satoshi/Satoshi-VariableItalic.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: italic;
}

:root {
    --main: #5944ff;
    --white: #fefeff;
    --black: #18181A;
    /**/
    --body-font-family: 'Satoshi-Variable', sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    max-width: 100vw;
    background: var(--white);
    color: var(--black);
    font-size: 1rem;
    font-family: var(--body-font-family);
    font-variation-settings: "wght" 450;
    font-feature-settings: "dlig" 0, "liga" 1, "ordn" 0, "pnum" 0, "salt" 0, "ss01" 0, "ss02" 1, "tnum" 0, "ss03" 1, "ss04" 1;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    line-height: 0;
}

a {
    &.medium {
        text-decoration: none;
        color: color-mix(in srgb, var(--black) 70%, var(--white) 30%);
        font-size: .75rem;

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

p {
    margin: 0;
    line-height: 1.3;
    font-variation-settings: "wght" 450;
    font-size: 1rem;

    &.small {
        font-size: .875rem;
    }
}

b {
    font-variation-settings: "wght" 650;
}

h1 {
    margin: 0;
    margin-top: 1.5rem;
    font-size: 2rem;
    font-variation-settings: "wght" 750;
    user-select: none;
    color: color-mix(in srgb, var(--black) 70%, var(--white) 30%);
}

h2 {
    margin: 0;
    margin-top: 1.25rem;
    font-size: 1.5rem;
    font-variation-settings: "wght" 650;
    user-select: none;
    color: color-mix(in srgb, var(--black) 90%, var(--white) 10%);

    &.nm {
        margin: 0;
    }

    &.center{
        text-align: center;
    }
}

h3 {
    margin: 0;
    margin-top: 1rem;
    font-size: 1.25rem;
    font-variation-settings: "wght" 500;
    user-select: none;
}

/*  */

main {
    max-width: 100vw;
    overflow: hidden;
}

/*  */

a.return {
    text-decoration: none;
    color: var(--main);

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

button {
    all: unset;
    font-family: var(--body-font-family);
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;

    &.disabled {
        opacity: .5;
        cursor: default;

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

.card {
    background: var(--white);
    border: solid 1px color-mix(in srgb, var(--black) 20%, var(--white) 80%);
    box-shadow: 0 4px 12px 0 color-mix(in srgb, var(--black) 10%, #0000 100%);
    border-radius: 1rem;
}

input {
    all: unset;
    font-family: var(--body-font-family);
    cursor: pointer;
    border: solid 1px color-mix(in srgb, var(--black) 20%, var(--white) 80%);
    width: 100%;
    border-radius: .5rem;
    padding: .75rem 1rem;
    box-sizing: border-box;
    font-size: 1rem;
    color: var(--black);

    &:focus {
        border: solid 1px color-mix(in srgb, var(--black) 90%, var(--white) 10%);
    }

    &.error {
        border: solid 1px red;
    }

    &.good {
        border: solid 1px var(--main);
    }
}

button {
    background-color: var(--main);
    color: var(--white);
    font-variation-settings: "wght" 750;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: .5rem;
    padding: .75rem 1rem;
    transition: .3s;

    &:hover {
        background-color: color-mix(in srgb, var(--black) 20%, var(--main) 100%);
    }

    &:active {
        transform: translateY(3px);
    }

    &[disabled] {
        opacity: .5;
    }
}

label {
    color: color-mix(in srgb, var(--black) 80%, var(--white) 20%);
    margin-bottom: .5rem;
    z-index: 1;
    user-select: none;
}

form {
    max-width: 25rem;
    width: 100%;
    padding: 0 2rem;
    transition: .3s;

    & .error {
        color: red;
    }
}

.errortext {
    color: color-mix(in srgb, var(--black) 80%, var(--white) 20%);
    margin: .25rem 0 0 0;
    font-size: .75rem;
}

.errorg {
    color: red;
    margin: .5rem 0 0 0;
    font-size: .75rem;
    width: 100%;
    text-align: center;
}

.successg {
    color: var(--main);
    margin: 0;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    height: 1rem;
}

.inline-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;

    &.g125 {
        gap: .125rem;
    }

    &.g25 {
        gap: .25rem;
    }

    &.g5 {
        gap: .5rem;
    }

    &.g10 {
        gap: 1rem;
    }

    &.g15 {
        gap: 1.5rem;
    }

    &.g20 {
        gap: 2rem;
    }

    &.sb {
        justify-content: space-between;
    }

    &.end {
        justify-content: end;
    }

    &.wrap {
        flex-wrap: wrap;
    }
}

.inline-v-flex {
    display: flex;
    flex-direction: column;
    align-items: start;
    min-width: 0;

    &.g25 {
        gap: .25rem;
    }

    &.g5 {
        gap: .5rem;
    }

    &.g10 {
        gap: 1rem;
    }

    &.g15 {
        gap: 1.5rem;
    }

    &.g20 {
        gap: 2rem;
    }

    &.sb {
        justify-content: space-between;
    }

    &.center {
        align-items: center;
    }
}

section[fullscreen] {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding-top: 10vh;
}

@keyframes wiggle {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-5px);
    }

    30% {
        transform: translateX(5px);
    }

    45% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.wiggle {
    animation: wiggle 0.4s ease;
}

.notif-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: end;
    align-items: center;
    padding: 2rem;
    pointer-events: none;
    gap: .5rem;
    max-height: 100vh;
    overflow-y: scroll;
}

.notif {
    position: relative;
    pointer-events: auto;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
    max-width: 20rem;
    padding: 1rem;
    color: var(--white);
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 4px 12px 0 color-mix(in srgb, var(--black) 10%, #0000 100%);;
    opacity: 0;
    z-index: 1000;
    overflow: hidden;

    &.error {
        background: var(--red);
    }

    &.success {
        background: var(--main);
    }

    &.info {
        background: var(--black);
    }

    & .title {
        font-size: 1.25rem;
        color: color-mix(in srgb, var(--white) 100%, var(--black) 20%);
        font-variation-settings: "wght" 800;
        width: 100%;

    }

    &.autoclose::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        will-change: width;
        width: 100%;
        height: .25rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--white) 40%, transparent 0%);
        ;
        animation: progress var(--notif-autoclose-timeout, 3s) linear forwards;
    }
}