@media screen and (max-width:650px) {
    .course_Flow h2{
        font-size: 30px;
        padding: 15px;
    }

    .course_Flow h3{
        font-size: 20px;
    }
}

@media screen and (max-width:600px) {
    .course_Title{
        font-size: 20px;
    }

    .course_Catalog{
        display: block;
    }

    .catalog{
        margin-top: 15px;
    }
}

@media screen and (max-width:530px) {
    .course_Introduction li img{
        height: 150px;
        width: 200px;
    }
}

@media screen and (max-width:500px) {
    .course h2{
        word-break: keep-all;
        font-size: 20px;
    }

    .Explanation h3{
        padding: 20px 10px;
        font-size: 20px;
    }

    .Scrach_Unity_VScode img{
        padding: 10px;
        height: 200px;
        width: 300px;
    }

    .Scrach_Unity_VScode p{
        font-size: 15px;
        margin-left: 10%;
    }

    .Class th{
        width: 100px;
        padding: 5px;
    }
    
    .Class td{
        font-size: 13px;
        padding: 5px;
    }
}

@media screen and (max-width:430px) {
    .course_Title{
        padding-left: 10px;
        font-size: 15px;
    }

    .course_Introduction li{
        margin: 15px 0;
    }

    .course_Introduction li h4{
        font-size: 10px;
    }
    
    .course_Introduction li img{
        height: 100px;
        width: 150px;
    }
}

@media screen and (max-width:400px) {
    .catalog{
        width: 200px;
    }

    .course_Name li{
        font-size: 10px;
    }

    .course h2{
        padding: 20px 5px;
        font-size: 15px;
    }

    .Explanation h3{
        padding: 20px 5px;
        font-size: 15px;
    }

    .Scrach_Unity_VScode{
        padding: 10px;
    }

    .Scrach_Unity_VScode img{
        padding: 5px;
        height: 150px;
        width: 250px;
    }

    .Class th{
        width: 80px;
        font-size: 13px;
    }
    
    .Class td{
        font-size: 10px;
    }
}

@media screen and (max-width:350px) {
    .Scrach_Unity_VScode p{
        font-size: 10px;
        margin-left: 5%;
    }
}