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

.container {width:1140px;
height:1100px;
margin:auto;
padding:10px;
display:grid;
grid-gap: 10px;
background-image:url(tealpolkadots.jpg);
align-items: center;
grid-template: 
"header header"
"one two"
"footer footer"

}
     
aside {
      width: 180px;
    height: 880px;
    gap: 10px;
    grid-area: one;
    margin:5px;
    margin-top: -65px;
  }
  

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

    width: 1100px;
    background-size: cover;
    height: 100px;
    grid-area: header;
    text-align:center;
    padding: 20px;
    border: 3px #b7bdbd;
    border-style: solid;
box-sizing: border-box;
  }
  
  h1 { 
  font-family: Courier new; 
  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: 390px;
    margin-top: 10px;
  }
  
   .buttons {
    display: flex;
  flex-direction: column;
  align-items: center;
 color: blue;
      font-size: 1.0rem;
      margin: 5px;
      padding: 5px;
      gap : 5px;
  }
  
  .main { 
    grid-area: main;
    width:710px;
    height: 775px;
    gap: 5px;
    margin-right: 10px;
    margin-bottom: 90px;
  }
  
  .music {
    width: 710px;
    height: 530px; 
    border: 3px #b7bdbd;
    border-style: solid;
  }
  
   .info {
    width: 710px;
    height: 300px;
    border: 3px #b7bdbd;
    border-style: solid;
    margin-bottom: 10px;
  }
  
   .intro { 
    max-height: 290px; 
    overflow-y: auto; 
     width: 200px; 
     border-style: solid; 
     border: 3px #b7bdbd;
   }
  
  h2 {
    font-size: 1.0rem;
  }
  
  .extra {
    width: 190px;
    height: 865px;
    grid-area: extra;
    margin-left: -5px;
  }
  
  .profile {
    width:190px;
    height: 300px;
    margin-bottom: 10px;
  }
  
  .info2 {
    width: 190px;
    height: 530px;
  }
  
  .lobby,.artwork,.aboutme, .guestbook, .ref, .blog{
   background: linear-gradient(0deg,rgba(95, 245, 222, 1) 0%, rgba(250, 248, 242, 1) 100%);
    width: 160px;
    height: 30px;
    font-size: 20px;
    padding: 2px;
   box-sizing: border-box; border-radius: 20px;
   border: solid 2px #87ffed;
font-family: "curls", serif; 
  }
  

footer {
  font-size: 30px;
  grid-area: footer; 
  width: 180px;
  height: 65px;
  text-align: center;
  padding: 5px;
  margin-left: -200px;
}
  
 .subone1, .subone2, .music,.info, .sub3,.info2, .profile, footer, header  {
background-color: #fff2fb;
border: solid 2px #ffdbf1;
}
  
  @font-face {
  font-family: 'curls';
  src: url('Jheri Curls.ttf') format('truetype');
  font-weight: normal; 
}