@font-face{
    src: url(Korean_Calligraphy.ttf);
         font-family: Korean;
}
/**{
    margin: 0 auto;
    padding: 0 auto;
}**/
body {background-image: url('newBTSLY.jpg'); background-size: cover; font-family: korean;
      color: whitesmoke; text-align: center;}
ul {font-size: xx-large;}
header {width: 100%; height: 100px; line-height: 100px;}
header .logo {width: 300px; height: 200px; float: left;}
header .logo h2 {letter-spacing: 3px;}
header nav {width: 800px; height: 100px; float: right;}
header nav li {list-style: none; float: left;}
header nav li a {text-decoration: none; color: whitesmoke; text-transform: uppercase;
                 padding: 10px 20px; margin-left: 5px; transition: 0.5s ease; position: relative;}
header nav li a:hover {color: mediumslateblue;}
header nav li a:before {content: ''; position: absolute; bottom: 0; left: 0;
                        width: 5px; height: 5px; background-color: mediumslateblue;
                        opacity: 0;transition: 0.5s ease;}
header nav li a:after {content: ''; position: absolute; bottom: 0; right: 0;
                        width: 5px; height: 5px; background-color: mediumslateblue;
                        opacity: 0; transition: 0.5s ease;}
header nav li a:hover:before {content: ''; position: absolute; bottom: 0; left: 0;
                            width: 50%; height: 5px; background-color: mediumslateblue;
                            opacity: 1;}
header nav li a:hover:after {content: ''; position: absolute; bottom: 0; right: 0;
                            width: 50%; height: 5px; background-color: mediumslateblue;
                            opacity: 1;}
.content {color: whitesmoke; list-style-type: none; margin: 0; padding: 0;
          border: 2px solid mediumslateblue; display: flex; flex-direction: column;
          margin: 3.5em; padding: 3.5em;}
h1 {color:whitesmoke; }
h2 {color: whitesmoke; }
h3 {color: whitesmoke; }
p {font-size: x-large; color: whitesmoke; font-family: 'Courier New', Courier, monospace;}
.wrapper {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows:minmax(100px, auto);
          grid-gap: 1em;}
.wrapper > div{background:mediumslateblue}
/*.wrapper > div:nth-child(odd){background: violet;}*/
.box1{grid-row:1/3; padding: .5em;}
.box2{grid-column:2/4; grid-row: 1/2;}
.box3{grid-column:}
.box4{grid-column:}
.footer {font-size: x-large; margin: 0%;}
@media(max-width: 600px){
    .wrapper {display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows:minmax(100px, auto);
        grid-gap: 1em;}
    .box4{grid-column: 2/3;}
}