:root {
    
    /* primary page variables */
    --regular-font-size: calc(max(1vw, 2vh) * 1);
    --card-header-font-size: calc(max(1vw, 2vh) * 1.5);
    --header-height: 30vh;
    --header-font-multiplier: 3.5;
    --subheader-font-multiplier: 1.5;

    /* primary page colors */
    --primary-font-color: #404040ff;
    --primary-page-color: #0084ffff;

    /* input box variables */
    --input-border-radius: calc(max(1vw, 2vh) * .5);

    --input-border-color: #9f9f9fff;
    --input-label-color: #9f9f9fff;
    --input-background-color: #ffffffff;
    --input-outline-color: #0084ff00;
    --input-text-color: #000000ff;

    --hover-input-border-color: #0084ffff;
    --hover-input-label-color: #b1b1b1ff;
    --hover-input-background-color: #ffffffff;
    --hover-input-outline-color: #0084ff00;
    --hover-input-text-color: #000000ff;

    --focus-input-border-color: #0084ffff;
    --focus-input-label-color: #b1b1b1ff;
    --focus-input-background-color: #ffffffff;
    --focus-input-outline-color: #0084ff55;
    --focus-input-text-color: #000000ff;

    --disable-input-border-color: #e4e4e4ff;
    --disable-input-label-color: #ccccccff;
    --disable-input-background-color: #f8f8f8ff;
    --disable-input-outline-color: #0084ff00;
    --disable-input-text-color: #767676ff;

    /* button variables */
    --button-border-radius: calc(max(1vw, 2vh) * .5);

    --button-border-color: #0084ffff;
    --button-background-color: #0084ffff;
    --button-label-color: #ffffffff;
    --button-outline-color: #50a9fc00;

    --hover-button-border-color: #50a9fcff;
    --hover-button-background-color: #50a9fcff;
    --hover-button-label-color: #ffffffff;
    --hover-button-outline-color: #50a9fc00;

    --focus-button-border-color: #0084ffff;
    --focus-button-background-color: #0084ffff;
    --focus-button-label-color: #ffffffff;
    --focus-button-outline-color: #0084ff55;

    --disable-button-border-color: #767676ff;
    --disable-button-background-color: #767676ff;
    --disable-button-label-color: #b1b1b1ff;
    --disable-button-outline-color: #50a9fc00;
}

/*

 #    # ###### #####  #   ##       ####  #    # ###### #####  # ######  ####
 ##  ## #      #    # #  #  #     #    # #    # #      #    # # #      #
 # ## # #####  #    # # #    #    #    # #    # #####  #    # # #####   ####
 #    # #      #    # # ######    #  # # #    # #      #####  # #           #
 #    # #      #    # # #    #    #   #  #    # #      #   #  # #      #    #
 #    # ###### #####  # #    #     ### #  ####  ###### #    # # ######  ####

*/
/* Extra small devices (phones, 576px and down) */
@media only screen and (max-width: 576px) {
    :root {
        --header-font-multiplier: 2.5;
        --subheader-font-multiplier: 1;
    }
    #auth-container {
        margin-top: 7rem !important;
    }
}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 577px) {
    #auth-container {
        margin-top: 4rem !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #auth-container {
        margin-top: 4rem !important;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    #auth-container {
        margin-top: 2.5rem !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

/* Extra extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
    #auth-container {
        margin-top: .5rem !important;
    }
}