body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #151514;
}

.page_container {
    width: 100%;
    display: block;
}



    /* --.--.--. right photo with left caption --.--.--. */

    .photo_right_1_container {
        margin: 200px 100px 0px 100px;
        display: flex;
    }

    .photo_right_1_caption_container {
        padding: 0px 45px 0px 0px;
        width: 10%;
        display: block;
    }

    .photo_right_1_caption_container_mobile {
        display: none;
    }

    .photo_right_1_caption {
        font-family: 'Roboto Mono', monospace; /* Use Hanken Grotesk font */
        font-weight: 300; /* Font weight */
        font-size: 12px; /* Font size */
        color: #dad8d4; /* Text color */
    }

    .photo_right_1_photo_container {
        width: 90%;
    }

    .photo_right_1_photo {
        width: 100%;
    }


    /* --.--.--. left photo with right caption --.--.--. */

    .photo_left_1_container {
        margin: 200px 200px 0px 100px;
        display: flex;
        flex-direction: row;
    }

    .photo_left_1_caption_container {
        padding: 0px 0px 0px 45px;
        width: 10%;
    }

    .photo_left_1_caption {
        font-family: 'Roboto Mono', monospace; /* Use Hanken Grotesk font */
        font-weight: 300; /* Font weight */
        font-size: 12px; /* Font size */
        color: #dad8d4; /* Text color */
    }

    .photo_left_1_photo_container {
        width: 90%;
    }

    .photo_left_1_photo {
        width: 100%;
    }


    /* --.--.--. big center photo --.--.--. */

    .photo_center_container {
        margin: 200px 100px 0px 100px;
        display: block;
    }

    .photo_center_caption_container {
        margin: 30px 0px 0px 0px;
        width: 100%;
    }

    .photo_center_caption {
        font-family: 'Roboto Mono', monospace; /* Use Hanken Grotesk font */
        font-weight: 300; /* Font weight */
        font-size: 12px; /* Font size */
        color: #dad8d4; /* Text color */
    }

    .photo_center_photo_container {
        width: 100%;
    }

    .photo_center_photo {
        width: 100%;
    }


    /* --.--.--. two column layout --.--.--. */

    .photo_two_column_1_container {
        margin: 200px 50px 0px 100px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .photo_two_column_1_left_caption_container {
        margin: 0px 0px 0px 45px;
        width: 14%;
    }

    .photo_two_column_1_left_caption {
        font-family: 'Roboto Mono', monospace; 
        font-weight: 300; 
        font-size: 12px; 
        color: #dad8d4; 
    }

    .photo_two_column_1_left_photo_container {
    }

    .photo_two_column_1_left_photo {
        max-height: 600px;
    }

    .photo_two_column_1_right_caption_container {
        width: 10%;
        margin: 0px 0px 0px 45px;
    }

    .photo_two_column_1_right_caption {
        font-family: 'Roboto Mono', monospace; 
        font-weight: 300;
        font-size: 12px; 
        color: #dad8d4; 
    }

    .photo_two_column_1_right_photo_container {
    }

    .photo_two_column_1_right_photo {
        max-height: 600px;
    }

    .footer_text {

        color: #dad8d4; 
        margin: 100px 400px 200px 200px;
        font-family: 'Roboto Serif';
        font-weight: 200; /* Font weight */
        font-size: 13px; /* Font size */
        line-height: 25px; /* Line spacing */

    }

    .footer_title {

        color: #dad8d4; 
        font-family: 'Roboto Mono';
        font-weight: 700; /* Font weight */
        font-size: 13px; /* Font size */
        line-height: 25px; /* Line spacing */

    }





@media (min-width: 600px) and (max-width: 1300px) {

    /* --.--.--. right photo with left caption --.--.--. */

    .photo_right_1_container {
        margin: 100px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .photo_right_1_caption_container {
        padding: 0px 0px 0px 0px;
        width: 100%;
        display: none;
    }

    .photo_right_1_caption_container_mobile {
        display: flex;
        justify-content: center;
        padding: 0px 0px 0px 0px;
        width: 100%;
    }

    .photo_right_1_photo_container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .photo_right_1_photo {
        max-width: 800px;
    }

    /* --.--.--. left photo with right caption --.--.--. */

    .photo_left_1_container {
        margin: 100px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .photo_left_1_caption_container {
        padding: 0px 0px 0px 0px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .photo_left_1_photo_container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .photo_left_1_photo {
        max-width: 800px;
    }

    /* --.--.--. big center photo --.--.--. */

    .photo_center_container {
        margin: 100px 20px 0px 20px;
    }

    .photo_center_caption_container {
        margin: 0px 0px 0px 0px;
        width: 100%;
    }

    .photo_center_caption {
        font-family: 'Roboto Mono', monospace; /* Use Hanken Grotesk font */
        font-weight: 300; /* Font weight */
        font-size: 12px; /* Font size */
        color: #fff; /* Text color */
    }

    .photo_center_photo_container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .photo_center_photo {
        max-width: 800px;
    }
    
    /* --.--.--. two column layout --.--.--. */

    .photo_two_column_1_container {
        margin: 100px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .photo_two_column_1_left_caption_container {
        width: 100%;
        margin: 0px 0px 100px 0px;
    }

    .photo_two_column_1_left_photo_container {
        display: flex;
        justify-content: center;
    }

    .photo_two_column_1_left_photo {
        max-height: 1000px;
        max-width: 600px;
        width: 100%;
    }

    .photo_two_column_1_right_caption_container {
        width: 100%;
        margin: 0px 0px 0px 0px;
    }

    .photo_two_column_1_right_photo_container {
        display: flex;
        justify-content: center;
    }

    .photo_two_column_1_right_photo {
        width: 100%;
        max-width: 600px;
        max-height: 1000px;
    }

    .photo_left_1_caption {
        text-align: center;
    }

    .photo_right_1_caption {
        text-align: center;
    }

    .photo_center_caption {
        text-align: center;
    }

    .photo_two_column_1_left_caption {
        text-align: center;
    }

    .photo_two_column_1_right_caption {
        text-align: center;
    }

    .footer_text {
        margin: 200px 200px 200px 150px;
    }

}



@media (max-width: 600px) {

    /* --.--.--. right photo with left caption --.--.--. */

    .photo_right_1_container {
        margin: 100px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .photo_right_1_caption_container {
        padding: 0px 0px 0px 0px;
        width: 100%;
        display: none;
    }

    .photo_right_1_caption_container_mobile {
        display: flex;
        padding: 0px 0px 0px 0px;
        width: 100%;
    }

    .photo_right_1_photo_container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .photo_right_1_photo {
        max-width: 800px;
    }

    /* --.--.--. left photo with right caption --.--.--. */

    .photo_left_1_container {
        margin: 100px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .photo_left_1_caption_container {
        padding: 0px 0px 0px 0px;
        width: 100px;
    }
    
    .photo_left_1_photo_container {
        width: 100%;
        max-width: 820px;
        display: flex;
        justify-content: center;
    }

    .photo_left_1_photo {
        max-width: 800px;
    }

    /* --.--.--. big center photo --.--.--. */

    .photo_center_container {
        margin: 100px 20px 0px 20px;
    }

    .photo_center_caption_container {
        margin: 0px 0px 0px 0px;
        width: 100%;
    }

    .photo_center_caption {
        font-family: 'Roboto Mono', monospace; /* Use Hanken Grotesk font */
        font-weight: 300; /* Font weight */
        font-size: 12px; /* Font size */
        color: #fff; /* Text color */
    }

    .photo_center_photo_container {
        width: 100%;
    }

    .photo_center_photo {
        width: 100%;
    }
    
    /* --.--.--. two column layout --.--.--. */

    .photo_two_column_1_container {
        margin: 100px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .photo_two_column_1_left_caption_container {
        width: 100%;
        margin: 0px 0px 100px 0px;
    }

    .photo_two_column_1_left_photo_container {
        display: flex;
        justify-content: center;
    }

    .photo_two_column_1_left_photo {
        max-height: 1000px;
        max-width: 600px;
        width: 100%;
    }

    .photo_two_column_1_right_caption_container {
        width: 100%;
        margin: 0px 0px 0px 0px;
    }

    .photo_two_column_1_right_photo_container {
        display: flex;
        justify-content: center;
    }

    .photo_two_column_1_right_photo {
        width: 100%;
        max-width: 600px;
        max-height: 1000px;
    }

    .footer_text {
        margin: 100px 60px 200px 45px;
        font-size: 15px; /* Font size */
        line-height: 28px; /* Line spacing */
    }

    .footer_title {

        font-size: 15px; /* Font size */
        line-height: 28px; /* Line spacing */

    }
    

}