@media(max-width: 450px){
    .s1{
        margin:0;
    }
    .container{
        display: inline;
        margin: 0;
    }

    .project3-container{
        display: inline;
        margin: 0;
    }

    .project-image{
        float: none;
        margin: 20px;
    }

    .title{
        float: none;
    }
    .header-links{
        float: none;
        display: inline;
        margin: 0;   
    }
    
    .header-links a:hover:after{
    position: relative;
    left: 2%;
    width: 15%;
    background: var(--text-color);
    }

    .presentation{
        /* max-width: 100%; */
        padding-top: 0;
        margin:0;
    }
    .project-links{
        display: inline;
        text-align: start;
        text-decoration: none;
        float: left;
        padding-top: 10%;
        width: 40%;
    }

    .link:after{
        content: '';
        position: relative;
        width: 0; height: 0.5px;
        display: none;
        margin-top: 1px;
        left: 0;
        width: 23%;
        background: black;
        transition: width .2s ease;
        /* transition: width .2s ease; */
        -webkit-transition: width .2s ease;
    }
        
    .link:hover:after{
        position: absolute;
        left: 28%;
        width: 72%;
        background: var(--text-color);
    }
}