@media only screen and (max-width: 75rem) {

    html {
        font-size: 60%;
    }
    #flex-about > div > img {
        width: 400px;
    }
    .title-visual > iframe {
        width: 400px;
        height: 250px;
    }
    .text1 {
        padding: 10px 20px 10px 20px;
    }
}

@media only screen and (max-width: 60rem) {

    html {
        font-size: 55%;
    }
}

@media only screen and (max-width: 55rem) {

    html {
        font-size: 50%;
    }
    #flex-about > div > img {
        width: 300px;
    }
}

@media only screen and (max-width: 50rem) {

    html {
        font-size: 50%;
    }
}

@media only screen and (max-width: 45rem) {

    html {
        font-size: 50%;
    }

    .contact-tile > a {
        padding: 0 .5rem;
        margin: 0 .5rem;
    }
    #flex-about > div > img {
        width: 300px;
    }
}

@media only screen and (max-width: 40rem) {

    html {
        font-size: 50%;
    }
    #nav-list {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        /* margin-right: 2rem; */
        
    }
    #header1 {
        font-size: 4rem;
    }
    #header2 {
        font-size: 2.5rem;
    }
    header {
        align-items: center;
    }
    header > div {
        padding: 1rem;
    }
    
    .left-image {
        flex-wrap: wrap-reverse;
    }
    .right-image {
        flex-wrap: wrap;
    }
}