@charset "UTF-8";

@media screen and (max-width:450px){
    /* coded for 370px */

    .header-title{
        position: relative;
    }

    .header-title a{
        margin-left: 50px;
        margin-top: 50px;
        font-size: 15px;
    }

    .header-menu{
        display: none;
    }

    .open{
        display: flex;
        position: absolute;
        top: 50px;
        justify-content: flex-end;
        margin-right: 50px;
        cursor: pointer;
    }

    .open img{
        width:5%;
    }

    .menu-bar{
        z-index: 10;
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0,0.7);
    }

    .menu-bar img{
        width: 4%;
        position: absolute;
        top: 47px;
        right: 50px;
        cursor: pointer;
    }

    .menu-open{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100px;
        right: 50px;
    }

    .menu-open a{
        color: white;
        text-decoration: none;
        font-size: 15px;
        margin-bottom: 30px;
    }

    #about{
        margin: 70px 50px 0 50px;
    }

    .about-container{
        flex-direction: column;
    }

    .about-img{
        width: 100%;
        margin-bottom: 30px;
    }

    th{
        font-size: 8px;
    }

    td{
        font-size: 8px;
        line-height: 18px;
    }

    footer{
        margin-top: 50px;
    }

    .top-btn img{
        width: 10%;
        cursor: pointer;
    }

    .footer-menu{
        margin: 50px 50px 0 50px;
        justify-content: space-between;
    }

    .footer-menu a{
        margin-right: 0;
        font-size: 12px;
    }

    .copyright{
        justify-content: center;
        font-size: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 0;
    }

}