html{
    font-family: 'Crimson Text', serif;
    font-size: 20px;
    line-height: 2.5em
}

h1 {
    font-size: 50px;
    margin-left: 30px;
    position: fixed;
}

.title {
    font-size: 50px;
    margin-left: 30px;
    position: relative;
}

.about {
    font-size: 0.7em;
    text-align: right;
    position: fixed;
    right: 0;
    margin-top: -20px;
    margin-right: 10px;

}

.h2 {
    font-size: 1.5em;
    text-align: right;
    position: fixed;
    top: 0.3em;
    right: 0;
    word-break: break-all;
    word-wrap: break-word;
    margin-right: 30px;
    }

a { text-decoration: none; color: black; }
        a:visited { text-decoration: none; }
        a:hover { text-decoration: none; }
        a:focus { text-decoration: none; }
        a:hover { text-decoration: none; }
        a:active {text-decoration: underline; }

.slider {
    font-size: 0.9em;
    text-align: center;
    /* position: fixed;
    right: 0; */
    margin-top: -10px;
    margin-right: 10px;
}

/* .container */
.container {
    display: inline-flex;
    flex-direction:row;
    flex-wrap: wrap;
    margin-top: 50px;
    align-content: flex-start;
}
.item {
    flex-grow: 10;
    flex-shrink: 5;
    flex-basis: 1%;
    /* align-items: flex-start; */
    align-self: flex-start;
}
img {
    margin-top: 10px;
    max-width: 500px; 
    height: auto;
    object-fit: contain;
}

@media (max-width: 1000px){
        img {
            max-width:100%
            
        }
        .container {
        display: inline-flex;
        flex-direction: column;
        }
    }

/* work list         */
    .work-title {
        font-size: 0.65em;
        font-weight: 700;
        text-align: center;
        margin-top: 0.1em;
        text-decoration-line: none;
    }
    .work-subtitle {
        font-weight: 400;
        font-size: 0.65em;
        text-align: right;
        position: fixed;
        right: 0;
        display: inline-block;
        margin-right: 10px;
        margin-top: -15px;
    }
    /* .work-subtitle-second {
        font-size: 0.8em;
        text-align: right;
        position: fixed;
        right: 0;
        display: inline-block;
        margin-right: 10px;
        margin-top: -5px;
    } */


    .work-section {
        margin-top: 2em;
    }

        /* work title locations */
    
        .for-the-irrelevant-beings {
            max-width: 90%;
        }
        .defined-city {
            max-width: 40%;
        }
        .where {
            max-width: 60%;
        }
        .growing-architecture {
            max-width: 25%;
        }
        .beyond-the-blank {
            text-align: right;
            max-width: 65%;
        }
        .spatial-memory {
            max-width: 50%;
        }
        .from-the-land-to-the-city {
            text-align: right;
            max-width: 60%;
        }
        .grown-space {
            max-width: 60%;
        }
        .taking-root {
            text-align: right;
            max-width: 52%;
        }
        .perspective-drawing {
            max-width: 30%;
        }
        .the-part-and-the-whole {
            text-align: right;
            max-width: 62%;
        }
        .workroom {
            max-width: 90%;
        }
        .the-mounds-tumulus {
            max-width: 30%;
        }

        .archipelago {
            max-width: 80%;
        }
    

/* footer */
    .footer-title {
        font-weight: 700;

    }
    .footer {
        margin-top: 5em;
        margin-left: 30px;
        font-size: 0.68em;
    }
    .page-footer-first {
        width: 500px;
        margin-top: 1.5em;
        display: inline-block;
        vertical-align: top;

    } 
    .page-footer-second {
        width: 500px;
        margin-top: 1.5em;
        display: inline-block;
        vertical-align: top;
    }
    .footer-section-third {
        margin-top: 1em;
        position: fixed;
        bottom: 0; 
        right: 0;
    }
    .page-footer-third {
        font-size: 0.7em
    }

    @media (min-width: 1000px, min-height: 800px){
        .footer {
            margin-bottom: 1em;
            position: fixed;
            bottom: 0; 
        }  

    }

    @media (min-width: 1000px){
        .h3, .h4 {
            visibility: hidden;
        }
    }

    @media (max-width: 1000px){

        /* .work-title {
            font-size: 0.85em;
            font-weight: 700;
        } */
        .work-subtitle {
            font-size: 0.7em;

        }
        .about {
            text-align: left;
            margin-right: -200px;
            font-size: 0.6em;
        }
        .h1 {
            margin-top: 20px;
            font-size: 1em;
            margin-left: 30px;
            position:relative;
        }
        .h4 {
            font-size: 0.8em;
            /* font-size: 5vw; */
            text-align: justify;
            margin-top: 20px;
            margin-left: 30px;
            margin-right: 20px;
            line-height: 1.2em;
        }
        .h3 {
            font-size: 8vw;
        }
        .slider {
            visibility: hidden!important;            
        }
        
        .h2 {
            visibility: hidden !important; 
        }           
        }



    @media (max-width: 400px){
        .work-title {
            font-size: 0.8em;
            font-weight: 700;
        } 
        .work-subtitle {
        position:absolute;
        }
        .for-the-irrelevant-beings {
            text-align: right;
            max-width: 90%;
        }
        .where {
            text-align: right;
            max-width: 80%;
        }
        .growing-architecture {
            margin-left: 30px;
        } 
        .from-the-land-to-the-city {
            text-align: right;
            max-width: 80%;
        }
        .perspective-drawing {
            text-align: left;
            margin-left: 50px;
        }
        .the-part-and-the-whole {
            text-align: right;
            max-width: 85%;
        }  

        .the-mounds-tumulus {
            max-width: 40%;
        }
    }

    @media (min-height: 800px){
        .footer {
            margin-bottom: 1em;
            position: fixed;
            bottom: 0; 
           }  
    }

        
    @media (max-height: 800px){
        .footer {
            margin-bottom: 1em;
            position: none;
        }
    }  


        /* @media (max-width: 1000px){
            .page-footer-first {
                width: 400px;
            } 
            .page-footer-second {
                width: 400px;
            }
        }
 */