:root {
    --expressive_spatial_fast: 0.35s cubic-bezier(0.42, 1.67, 0.21, 0.90);
    --expressive_spatial_default: 0.5s cubic-bezier(0.38, 1.21, 0.22, 1.00);
    --expressive_spatial_slow: 0.65s cubic-bezier(0.39, 1.29, 0.35, 0.98);
    --expressive_fx_fast : 0.15s cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --expressive_fx_default : 0.2s cubic-bezier(0.34, 0.80, 0.34, 1.00);
    --expressive_fx_slow: 0.3s cubic-bezier(0.34, 0.88, 0.34, 1.00);
}

body {
    background-color: var(--surface);
    transition: all var(--expressive_fx_fast);
}













.pageFrame {
    position: fixed;

    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}






















.button {
    position: relative;

    padding: 15px 30px;

    background-color: var(--primary-container);
    border-radius: 17px;

    border: none;
    outline: none;

    font-family: "Outfit";
    font-weight: 500;
    font-size: 17px;
    color: var(--on-primary-container);

    transition: all var(--expressive_spatial_fast);
}

.button:hover {
    cursor: pointer;

    background-color: var(--on-primary-container);
    color: var(--primary-container);
}

.button.secondary {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
}

.button.secondary:hover {
    background-color: var(--on-secondary-container);
    color: var(--secondary-container);
}

.button.error {
    background-color: var(--error-container);
    color: var(--on-error-container);
}

.button.error:hover {
    background-color: var(--on-error-container);
    color: var(--error-container);
}
























.inputBox {
    position: relative;
    
    width: 100%;
    height: 65px;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    transition: all var(--expressive_fx_fast);
}

.textInput {
    position: relative;

    width: 250px;
    height: 65px;

    background-color: var(--container-lowest);
    border-radius: 10px;

    padding: 15px 20px 5px 20px;
    box-sizing: border-box;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--on-surface);

    border: none;
    outline: none;
}

.textInput_label {
    position: absolute;

    top: 23px;
    left: 20px;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--input-label);

    pointer-events: none;

    transition: all var(--expressive_fx_fast);
}

.textInput_label.active {
    top: 8px;

    font-size: 11px;
    color: var(--primary);
}

.textInput_label.filled {
    top: 8px;

    font-size: 11px;
    color: var(--on-surface-variant);
}

.textInput_label.error {
    color: var(--error);
}


.textInput_error {
    position: absolute;

    top: 60px;
    left: 5px;

    font-family: "Outfit";
    font-weight: 400;
    font-size: 15px;
    color: var(--error);

    opacity: 0;

    transition: all var(--expressive_fx_fast);
}

.textInput_error.visible {
    top: 68px;
    opacity: 1;
}

.textInput.disabled {
    pointer-events: none;
    color: var(--input-label);
}




















@media (max-width: 768px) {

    .pageFrame {
        position: fixed;

        top: 0px;
        left: 0px;

        width: 100%;
        height: 100%;

        overflow-x: hidden;
        overflow-y: scroll;

        display: flex;
        align-items: start;
        justify-content: center;
    }

}