:root {

    /*color-scheme: dark;*/
    color-scheme: light;

    --ct-background: light-dark(whitesmoke, #000000);
    --ct-foreground: light-dark(#e9e9ed, #3f434a);

    --ct-control: light-dark(#d4deed, #24282b);
    /*--ct-control: #d4deed;*/

    --ct-primary: light-dark(#3879cc, #C8D6E8);
    --ct-text: light-dark(#201f1f, whitesmoke);

    color: var(--ct-text);
    background-color: var(--ct-background);

    /*font-family: "Lato", sans-serif;*/
    font-family: "Poppins", serif;
}


html, body {
    margin: 0;
    padding: 0;
}

.ctInput {
    border: none;
    border-radius: 4px;
    padding: 10px;
    margin: 5px;

    font-size: 18px;

    background-color: var(--ct-control);

    align-self: stretch;

    outline: none;

    transition-duration: 280ms;

    box-shadow: rgba(165, 168, 172, 0.2) 0px 2px 8px 0px;
}

.ctInput:focus {
    transform: scale(1.01);
}

/*.ctInput:first-of-type{*/
/*    margin-top: 20px;*/
/*}*/
/*.ctInput:last-of-type{*/
/*    margin-bottom: 15px;*/
/*}*/

.ctBtn {
    all: unset;
    /*display: inline-block;*/

    cursor: pointer;

    background-color: var(--ct-primary);
    color: light-dark(whitesmoke, black);

    border: none;

    margin: 5px;
    padding: 10px 16px;

    font-weight: bold;
    font-size: 18px;

    height: 35px;

    border-radius: 4px;

    transition-duration: 280ms;

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

    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

    /*box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;*/
}

.ctBtn:hover {
    /*transform: scale(1.02);*/
    transform: translateY(-1px);

    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.ctBtn:disabled {
    opacity: 0.75;
}

.ctBtn:disabled:hover {
    transform: scale(1) translateY(0);
}

.ctBtnGrow {
    align-self: stretch;
}

.ptBtn {
    all: unset;

    cursor: pointer;

    margin: 5px;
    padding: 10px 20px;

    background-color: var(--pt-primary);
    color: var(--pt-text-light);
    font-size: 1.2rem;
    font-weight: 500;

    text-decoration: none;

    border-radius: 3px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    transition-duration: 280ms;
}

.ptBtn:hover {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.ptBtnSecondary {

}

.ptInput {
    margin: 5px;
    padding: 10px 20px;
    border-radius: 3px;
    border-width: 0;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;

    transition-duration: 280ms;
}

.ptInput:active {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    outline: none;
}

@media (prefers-color-scheme: dark) {

}

.contentPage {
    /*flex-grow: 1;*/

    min-width: 90vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}