body{
    background-image: url(/media/background.jpg);
    background-attachment: fixed;
    background-size: cover;
}
h1{
    font-size: 500%;
}
.header {
    grid-area: hd;
  }
.footer {
    grid-area: ft;
  }
.leftbar {
    grid-area: lb;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.3);
  }
.centerbar {
    grid-area: cb;
  }
.rightbar {
    grid-area: rb;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: space-around;
    align-content: space-around;
    background-color: rgba(255, 255, 255, 0.2);
  }
.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      ". lb lb lb . rb rb rb ."
      ". lb lb lb . rb rb rb ."
      ". lb lb lb . rb rb rb ."
      ". lb lb lb . rb rb rb ."
      ". . . . . . . . ."
      "ft ft ft ft ft ft ft ft ft";
  }
.social:hover,
.social:focus{
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.2);
}
.social{
    width: 100%;
}
.wrappersocial {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(auto, auto);
    grid-template-areas:
      ". . . . ."
      ". sl . sr ."
      ". sl . sr ."
      ". . . . .";
    
  }
  .socialleft {
    grid-area: sl;
  }
  .socialcenter {
    grid-area: sc;
  }
  .socialright {
    grid-area: sr;
  }
.leftbar img{
    margin-top: 80px;
}