body{
    background-color: white;
    height: 1000px;
}
}

}
h1{
    display: block;
    font-size: 2em;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
   
    
}

header{
    text-align: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    display: block;
    position: relative;
    
}

img{
    border: 0;
    vertical-align: top;
    height: 150px;    
}
form{
    max-width: 100%;
}
ul{
    background-color: black;
    text-align: center;
    padding: 0px 40px 0px 40px;
}

li{
    color: white;
    display: inline-block;
    margin-right: 20px;
    margin-left: 20px;
    font-size: 25px;
}

.search_bar{
    width: 500px;
}
.video_area{
    text-align: center;
    background-color: black;
    position: relative;
    
}
iframe{
    max-width: 100%;
    height: 450px;
}
.socmed{
    height: 50px;
}
.fa.fa-youtube-play:before {
    content: "\f167";
    color: red;
}
.fa-instagram:before {
    content: "\f16d";
    color: wheat;
}
.social{
    text-align: center;
    background-color:black;
    color: white;
    margin-top: 200px;
    
}
a .blog{
    height: 35px;
    width: 40px;
}

/* #Media Queries
================================================== */

    @charset "utf-8";

    /* All Device
    모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. */
    

    /* Mobile Device 768px 
    미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.*/
    
    /* Tablet Device 
    사용자 해상도가 480x 이상이고 767px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.*/

    @media only screen and (min-width: 360px) and (max-width: 767px) {
        .search_bar{
            width: 300px;
        }
    }
    }

    /* Tablet & Desktop Device 
    사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.*/
    @media only screen and (min-width:768px) {

    }
        

    /* Tablet Device 
    사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.*/
    @media all and (min-width:768px) and (max-width:1024px) {
        
    }

    /* Desktop Device 
    사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.*/
    @media all and (min-width:1025px) {
        
    }