body {
  background-image: url(sky.jpg); 
  background-size: cover; 
  color: #f50796;
  font-family: "pixel", serif;
  text-align: center; 
  font-size: 2.0rem;
  cursor: pointer; 
}

.container {width:940px;
height:1100px;
margin:auto;
padding:10px;
display:grid;
grid-gap: 10px;
background-image: url(clover.jpg);
align-items: center;
grid-template: 
"header header"
"one two"
"footer footer"
}
    
aside {
      width: 180px;
    height: 780px;
    gap: 10px;
    grid-area: one;
    margin:5px;
    margin-top: -70px;
    
  }
  

   main{   
    border: 1px #1123ed;
    width: 720px;
    height: 780px;
    grid-area: two;
    gap: 10px;
    align-items: center;
    margin: 5px;
    display: grid;
    grid-template: 
    "main extra"
  }
  
 header {

    width: 910px;
    background-size: cover;
    height: 100px;
    margin: 5px;
    grid-area: header;
    text-align:center;
    padding: 20px;
    border: 3px #b7bdbd;
    border-style: solid;
box-sizing: border-box;
  }
  
  h1 { 
  color: #f50796;
  font-size: 60px;
  position: relative;
  margin-top: -5px;
}
  
   .subone1 {
    width: 180px;
    height: 440px;
    padding : 5px;
    border: 3px #b7bdbd;
    border-style: solid;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  
  .sub3 {
    width:180px;
    height: 290px;
    margin-top: 10px;
  }
   
  .main { 
    grid-area: main;
    width:510px;
    height: 775px;
    gap: 5px;
  }
  
  .music {
    width: 510px;
    height: 100px; 
    border: 3px #b7bdbd;
    border-style: solid;
  }
  
   .info {
    width: 510px;
    height: 730px;
    border: 3px #b7bdbd;
    border-style: solid;
    margin-bottom: 10px;
  }
  
  .infoheader {
    width:100%;
    height: 10%;
  }
   .infobox {
     width: 100%;
     height: 90%;
   }
  
  
  h2 {
    font-size: 1.0rem;
  }
  
  .extra {
    width: 190px;
    height: 765px;
    grid-area: extra;
    margin-left: -5px;
  }
  
  .profile {
    width:190px;
    height: 300px;
    margin-bottom: 10px;
  }
  
  .info2 {
    width: 190px;
    height: 430px;
  }
  
  
  .lobby,.artwork,.aboutme,.ref,.guestbook,.blog{
background: linear-gradient(0deg,rgba(255, 112, 133, 1) 0%, rgba(248, 255, 204, 1) 100%);
    width: 170px;
    height: 30px;
    font-size: 20px;
    font-family: "pixel", serif;
    padding: 2px;
    border: 2px #FF7085;
    border-style: solid;
      box-sizing: border-box;
      border-radius: 20px;
  }
  

footer {
  font-size: 30px;
  grid-area: footer; 
  width: 910px;
  height: 65px;
  text-align: center;
  padding: 5px;
  margin-left: -200px;
}
  
 .subone1, .subone2, .music,.infoheader, .infobox, .sub3,.info2, .profile, footer, header  {
background-color: #e6ffe6;
border: solid 2px #ace3ac;
}
   
   @font-face {
  font-family: 'pixel';
  src: url('PixdorTwo.woff') format('woff');
  font-weight: normal; 
}