@media screen and (max-aspect-ratio: 1/1) {
    /* everything here applies to screens with the aspect ratio of a mobile phone */
    
    /* header.php */
    
    .header-container {
        height: 12vh;
        flex-wrap: wrap;
    }
    
    .mobile-seperator {
        width: 98%;
        height: 6vh;
    }
    
    .welcome-text {
        font-size: 3vw;
    }
    
    .dashboard-container {
        height: 6vh;
        display: flex;
        align-items: center;
    }
    
    /* index.php */
    .front-page-div {
        display: block;
    }
    
    .front-page-top-div {
        width: 100vw;
    }
    
    .front-page-welcome-title {
        margin-top: 10vh;
        text-align: center;
    }
    
    .sign-in-seperate-div {
        width: 94vw;
    }
    
    .sign-in-form-input {
        width: 90%;
    }
    
    .front-page-bottom-div {
        display: none;
    }
    
    /* forgotpassword and passwordreset */
    
    .responsive-fieldset {
        width: 90vw;
    }
    
    /* create-account.php */
    
    .account-creation-div-top {
        width: 90vw;
        flex-direction: column;
        height: auto;
        padding: 8px 0px;
    }
    
    .account-creation-input {
        margin: 4px;
        width: 82%;
        font-size: 5vw;
        /* Important note: I don't fully undersatand how vw (view width) works. It should be a percentage of
        the width of the screen being used as the height and width of the character, but I can put in 20
        characters into an input with plenty of room to spare so although I am defining these characters as
        5% of view width, they are clearly less than that. Further investigation is warranted.*/
    }
    
    .signup-select {
        font-size: 5vw;
        margin: 4px;
    }
    
    /* Dashboard.php */
    
    .bottom-dashboard-div {
        flex-direction: column;
        height: 100%;
    }
    
    .form-select-div {
        width: 100%;
        border-bottom: 2px solid grey;
        margin-bottom: 1vh;
        padding-bottom: 1vh;
        max-height: 80vh;
    }
    
    .student-select-div {
        width: 100%;
        margin-bottom: 1vh;
        border-bottom: 2px solid grey;
        min-height: 20vh;
        border-right: none;
        max-height: 80vh;
    }
    
    .form-info-div {
        width: 100%;
        max-height: 80vh;
    }
    
    .bottom-section-left-div {
        overflow-x: hidden;
    }
    
    /* form-purchase.php */
    
    .form-buy-info-container {
        width: 96vw;
    }
    
    /* TATSS and STAT-R */
    
    .stat-main-form {
        width: 100vw;
    }
    
    .stat-header-section {
        flex-direction: column;
    }
    
    .stat-main-form-input-top {
        margin-right: 1vw;
        margin: 1vw;
        width: 82vw;
    }
    
    /* Landing.php */
    
    .step-image {
        height: 65.6vw;
    }
    
    .iep-helper-image {
        width: 86vw;
        max-width: 86vw;
    }
    
}

@media (min-resolution: 392dpi) { 
/* everything here applies for high-res screens */ 
}