body { 
	 background-image:url('back.jpg');
	 background-color:#000040;
   }
a {
  font-family:'@Malgun Gothic'; 
  font-size: 18px;
	}
a:visited {
		text-decoration:none; 
		line-height:100%; 
		color:#f7b23b;
		} 
a:hover {
		text-decoration:underline; 
		line-height:100%; 
		color:#ae303e;
		} 
a:active { 
		text-decoration:none; 
		line-height:100%; 
		color:#ff0000;
		} 
a:link {
		text-decoration:none; 
		line-height:100%; 
		color:#6d7eff;
		}	
p {      
  font-family:'@Malgun Gothic'; 
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  font-variant: normal;
  color: #cacaca;
  background-repeat: repeat;
  background-attachment: fixed;
  } 
h2 {      
  font-family:'@Malgun Gothic'; 
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  font-variant: normal;
  color: #cacaca;
  }
h6 {      
  font-family:'@Malgun Gothic'; 
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  font-variant: normal;
  color: #cacaca;
  }
:root{
  --main-radius: 0px;
  --main-padding: 0px;
  }

.container {
  display: grid;
  height:100vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.0fr 1.5fr 1.0fr 1.5fr 1.0fr 1.5fr 0.5fr;  
  grid-template-areas:
    "nav nav nav"
	"main main main"
	"content1 content2 content3"
	"main2 main2 main2"
	"content4 content5 content6"
	"main3 main3 main3"
	"content7 content8 content9"
	"footer footer footer";
  grid-gap: 0.2rem;
  font-family: '@Malgun Gothic', sans-serif;
  font-weight:400;
  font-size: 13px;
  color: #ffffff;
  }
  
  nav{   
   grid-area: nav;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  main{
   grid-area: main;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.8rem;
   padding-right: 0.8rem;
   line-height: 200%;
   }
   
   #content1{
   background-color: none;
   grid-area: content1;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  #content2{
   background-color: none;
   grid-area: content2;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  #content3{
   background-color: none;
   grid-area: content3;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
   main2{
   grid-area: main2;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.8rem;
   padding-right: 0.8rem;
   line-height: 200%;
   }
   
   #content4{
   background-color: none;
   grid-area: content4;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  #content5{
   background-color: none;
   grid-area: content5;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  #content6{
   background-color: none;
   grid-area: content6;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
   main3{
   grid-area: main3;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   padding-right: 0.2rem;
   }
   
   #content7{
   background-color: none;
   grid-area: content7;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  #content8{
   background-color: none;
   grid-area: content8;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  #content9{
   background-color: none;
   grid-area: content9;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
  footer{
   background-color: #000040;
   grid-area: footer;
   border-radius: var(--main-radius);
   padding-top: var(--main-padding);
   padding-left: 0.2rem;
   }
   
   @media only screen and (max-width: 550px) {
     .container{
	   grid-template-columns: 1fr;
	   grid-template-rows: 0.4fr 1.0fr 2.2fr 2.2fr 2.2fr 1.0fr 2.2fr 2.2fr 2.2fr 1.0fr 2.2fr 2.2fr 2.2fr 1fr;
	   grid-template-areas:
	     
		 "nav"
		 "main"
		 "content1"
		 "content2"
		 "content3"
		 "main2"
		 "content4"
		 "content5"
		 "content6"
		 "main3"
		 "content7"
		 "content8"
		 "content9"
		 "footer";
	  }
    }