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;
}

.profile {
    font-size: 1.1em;
    text-align: right;
    position: fixed;
    right: 0;
    margin-top: -30px;
    margin-right: 10px;
}


.h2 {
    font-size: 1.1em;
    text-align: right;
    position: fixed;
    top: 1em;
    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.75em;
        font-weight: 700;
        text-align: center;
        margin-top: 0.1em;
        padding: 50px, 0;
        text-decoration-line: none;
    }
    .work-subtitle {
        font-weight: 400;
        font-size: 0.8em;
        text-align: right;
        position: fixed;
        right: 0;
        display: inline-block;
        margin-right: 10px;
        margin-top: -13px;
    }
    .work-section {
        padding: 20px;
    }
    /* .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 */

        .solo6 {
            max-width: 85%;
            text-align: center;
        }
        
        .solo5 {
            max-width: 60%;
            text-align: center;
            margin-left: -60px;
        }
        
    .solo4 {
        max-width: 60%;
        text-align: right;
    }
    .solo3 {
        max-width: 60%;
        text-align: center;
        margin-left: 10px;
    }
    .solo2 {
        max-width: 85%;
        text-align: center;
    }
    .solo1 {
        max-width: 75%;
        text-align: center;
    }
    .solo0 {
        max-width: 55%;
        text-align: right;
    }
    

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

    }

    .page-footer-first {
        width: 500px;
        margin-top: 1.5em;
        font-size: 0.68em;
        margin-left: 10px;
        margin-bottom:10px;
        position: fixed;
        bottom: 0; 
    } 
    
    .footer-section-third {
        margin-top: 1em;
        position: fixed;
        bottom: 0; 
        right: 0;
    }
    .page-footer-third {
        font-size: 0.5em
    }

    @media (max-height: 120mm){
        .page-footer-first {
            margin-top: 2em;
            margin-left: 30px;
            font-size: 0.68em;
            position: inherit;
        }
    } 

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

    @media (max-width: 1000px){

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


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



    @media (max-width: 600px){
        .title {
            font-size: 50px;
            margin-left: 10px;
        }        
        .work-section {
            padding: 0, 20px;
        }
        .work-subtitle {
        position:absolute;
        }
        /* .work-title {
            font-size: 0.5em;
        }
        .work-subtitle {
            font-size: 0.4em;
        } */

        .solo6 {
            max-width: 85%;
            text-align: center;
        }
        
        .solo5 {
            max-width: 60%;
            text-align: center;
            margin-left: -60px;
        }

        .solo4 {
            max-width: 60%;
            text-align: right;
        }
        .solo3 {
            max-width: 60%;
            text-align: center;
            margin-left: 10px;
        }
        .solo2 {
            max-width: 85%;
            text-align: left;
            margin-left: 10px;
        }
        .solo1 {
            max-width: 75%;
            text-align: center;
        }
        .solo0 {
            max-width: 45%;
            text-align: center;
        }
        
    }


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