body {
    background-color: linen;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

* {
    font-family: Arial, sans-serif;
}

.normal {
    font-weight: normal;
}
.semi-bold {
    font-weight: 575;
}
.bold {
    font-weight: bold;
}
.plain-text {
    text-decoration: none;
}
.center-text {
    text-align: center;
}
.underline-txt {
    text-decoration: underline;
}
.firebrick-text {
    color: firebrick;
}

h1 {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: normal;
}
h2 {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    color: #553311;
}
h3 {
    margin-top: 3rem;
}
h4 {
    font-weight: 575;
    text-decoration: underline;
    font-size: 1.15rem;
    margin-bottom: -.5rem;
}
h5 {
    font-size: 1.15rem;
    font-weight: bold;
    text-decoration: underline;
    margin-top: 1rem;
    margin-bottom: -0.75rem;
}

.container {
    position: relative;
    width: 95%;
    text-align: left;
    font-size: 1.15rem;
    margin: 0 auto;
} 

/* ==========================================================================
5. SMALLER SCREENS LANDSCAPE MODE (Mobile Phones)
========================================================================== */
@media screen and (max-width: 950px) and (orientation: landscape) {
    #shared-modal, .modal-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    /* Caps the phone image to 48% height, ensuring text fits on ultra-wide phone screens */
    #shared-modal .full-size-image, .modal-overlay img {
        max-height: 48vh !important; 
        max-width: 80% !important;
        width: auto !important;       
        height: auto !important;
        margin: 0 auto 4px auto !important;
    }

    #shared-modal .image-text, #shared-modal .image-description, 
    #shared-modal .image-counter, .modal-caption {
        font-size: 13px !important;   
        line-height: 1.2 !important;
        max-height: 28vh !important;  /* Allots a larger percentage box to clear phone text */
        overflow-y: auto !important;  
        margin: 0 auto !important;
        padding: 0 15px !important;
        color: #ffffff !important;    
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
6. LARGER SCREENS LANDSCAPE MODE (Tablets)
========================================================================== */
@media screen and (min-width: 951px) and (max-width: 1300px) and (orientation: landscape) {
    #shared-modal, .modal-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* Keeps tablet images large (62% height) since the viewport has plenty of physical headroom */
    #shared-modal .full-size-image, .modal-overlay img {
        max-height: 62vh !important; 
        max-width: 85% !important;   
        width: auto !important;       
        height: auto !important;
        margin: 0 auto 10px auto !important;
    }

    #shared-modal .image-text, #shared-modal .image-description, 
    #shared-modal .image-counter, .modal-caption {
        font-size: 14px !important;   
        line-height: 1.4 !important;
        max-height: 22vh !important;  
        overflow-y: auto !important;  
        margin: 0 auto !important;
        padding: 0 20px !important;
        color: #ffffff !important;    
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}