body {
  background-image: url("https://files.catbox.moe/rt68u0.gif");
  background-repeat: repeat;
  }

img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

p {
    font-family: Verdana;
    font-size: 20px;
    color: black;
}

.container {  display: grid;
    grid-template-columns: 150px 150px 300px 300px 300px 190px 190px;
    grid-template-rows: 200px 200px 200px 65px 95px 95px;
    grid-auto-rows: 200px;
    gap: 10px 10px;
    grid-template-areas:
        "aboutme aboutme centralgif centralgif centralgif buttons2 buttons2"
        "aboutme aboutme centralgif centralgif centralgif buttons2 buttons2"
        "aboutme aboutme centralgif centralgif centralgif buttons2 buttons2"
        "buttons1 buttons1 interactionbar interactionbar interactionbar buttons2 buttons2"
        "buttons1 buttons1 statusarea statusarea nowplaying buttons2 buttons2"
        "buttons1 buttons1 statusarea statusarea nowplaying buttons2 buttons2";
        justify-self: center;
}

.centralgif { grid-area: centralgif;
}

.centralgif img {
    width: 100%;
}

.aboutme {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "picture picture picture text1 text1"
    "picture picture picture text1 text1"
    "text2 text2 text2 text2 text2"
    "text2 text2 text2 text2 text2"
    "text2 text2 text2 text2 text2"
    "text2 text2 text2 text2 text2";
  grid-area: aboutme;
}

.picture { grid-area: picture;
    padding: 5px;
}

.picture img {
    width: 100%;
    border-radius: 10px;
}

.text2 { grid-area: text2; 
     background-image: url('https://files.catbox.moe/ongv5l.jpg');
     padding: 15px;
     border-radius: 10px;
     border-style: solid;
     border-color: white;
     border-width: 5px;
}

  .text2 h2 {
    margin-top: 0px;
    color: white;
  }
  
  .text2 p {
    color: white;
  }

.text1 { grid-area: text1; 
     background-color: burlywood;
     padding: 10px;
     margin-bottom: auto;
     border-style: double;
     border-color: brown;
     border-radius: 5px;
}

  .text1 p {
    font-family: Georgia;
    font-size: 15px;
  }

.buttons1 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3px 3px;
  grid-auto-flow: row;
  grid-template-areas:
    "commformb"
    "emailb"
    "galleryb2";
  grid-area: buttons1;
}

.buttons1 a {
  color: white;
}

.commformb { grid-area: commformb; 
     background-image: url('https://files.catbox.moe/3g5l4l.png');
     border-style: solid;
     border-color: white;
     border-width: 5px;
}

  .commformb h1 {
    margin-left: 40px;
    color: white;
  }
  
  .commformb:hover {
    filter: brightness(120%);
  }

.emailb { grid-area: emailb; 
     background-image: url('https://files.catbox.moe/svwwbx.png');
     border-style: solid;
     border-color: white;
     border-width: 5px;
}

  .emailb h1 {
    margin-left: 40px;
    color: white;
  }
  
  .emailb:hover {
    filter: brightness(120%);
  }

.galleryb2 { grid-area: galleryb2; 
     background-image: url('https://files.catbox.moe/p5un71.png');
     border-style: solid;
     border-color: white;
     border-width: 5px;
}

  .galleryb2 h1 {
    margin-left: 40px;
    color: white;
  }
  
  .galleryb2:hover {
    filter: brightness(120%);
  }

.interactionbar {  display: grid;
  grid-template-columns: 140px 140px 140px 140px 67px 67px 67px 67px 67px;
  grid-template-rows: 65px;
  gap: 3px 3px;
  grid-template-areas:
    "profileb writingb galleryb linkb bkskipb playb pauseb fwskipb playlistb";
  grid-area: interactionbar;
}

.interactionbar img {
    max-height: 70%;
}

.profileb { grid-area: profileb;
     background-image: url('https://files.catbox.moe/j8c8l0.png');
     max-height: 65px;
     width: 140px;
}

    .profileb:hover {
        filter: brightness(120%);
    }

    .profileb img {
        margin-left: 47px;
        margin-top: 8px;
    }

.writingb { grid-area: writingb; 
      background-image: url('https://files.catbox.moe/j8c8l0.png');
      max-height: 65px;
}

    .writingb:hover {
        filter: brightness(120%);
    }

    .writingb img {
        margin-left: 47px;
        margin-top: 8px;
    }

.galleryb { grid-area: galleryb; 
      background-image: url('https://files.catbox.moe/j8c8l0.png');
      max-height: 65px;
}

    .galleryb:hover {
        filter: brightness(120%);
    }

    .galleryb img {
        margin-left: 47px;
        margin-top: 8px;
    }

.linkb { grid-area: linkb; 
      background-image: url('https://files.catbox.moe/j8c8l0.png');
      max-height: 65px;
}

    .linkb:hover {
        filter: brightness(120%);
    }

    .linkb img {
        margin-left: 47px;
        margin-top: 8px;
    }

.bkskipb { grid-area: bkskipb; 
      background-image: url('https://files.catbox.moe/vl14q0.png');
      max-height: 65px;
}

    .bkskipb:hover {
        filter: brightness(120%);
    }

    .bkskipb img {
        margin-left: 10px;
        margin-top: 8px;
    }

.playb { grid-area: playb; 
      background-image: url('https://files.catbox.moe/vl14q0.png');
      max-height: 65px;
}

    .playb:hover {
        filter: brightness(120%);
    }

    .playb img {
        margin-left: 10px;
        margin-top: 8px;
    }

.pauseb { grid-area: pauseb; 
      background-image: url('https://files.catbox.moe/vl14q0.png');
      max-height: 65px;
}

    .pauseb:hover {
        filter: brightness(120%);
    }

    .pauseb img {
        margin-left: 10px;
        margin-top: 8px;
    }

.fwskipb { grid-area: fwskipb; 
      background-image: url('https://files.catbox.moe/vl14q0.png');
      max-height: 65px;
}

    .fwskipb:hover {
        filter: brightness(120%);
    }

    .fwskipb img {
        margin-left: 10px;
        margin-top: 8px;
    }

.playlistb { grid-area: playlistb; 
      background-image: url('https://files.catbox.moe/vl14q0.png');
      max-height: 65px;
}

    .playlistb:hover {
        filter: brightness(120%);
    }

    .playlistb img {
        margin-left: 10px;
        margin-top: 8px;
    }

.statusarea { grid-area: statusarea; 
     background-image: url('https://files.catbox.moe/8ts24v.gif');
     padding: 20px;
     border-style: solid;
     border-color: white;
     border-width: 5px;
     border-radius: 15px;
}

  .statusarea h2 {
    color: white;
    font-size: 27px;
    margin-top: -5px;
    margin-bottom: -8px;
  }
  
  .statusarea p {
    color: white;
  }  

.nowplaying { grid-area: nowplaying; 
     background-color: purple;
     overflow-y: scroll;
}

.buttons2 {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "characterbutton writingbutton"
    "blogbutton askbutton"
    "fandomshrinebutton fandomshrinebutton"
    "fandomshrinebutton fandomshrinebutton"
    "fandomshrinebutton fandomshrinebutton";
  grid-area: buttons2;
}

    .buttons2 img{
        width: 80%;
        margin-left: 12px;
        margin-bottom: -10px;
    }
    
    .buttons2 a {
      color: white;
    }

.characterbutton { grid-area: characterbutton; 
     background-image: url('https://files.catbox.moe/y5uhi4.png');
     max-height: 200px;
}

    .characterbutton h2 {
        margin-top: 0px;
        margin-left: 40px;
        margin-bottom: -25px;
        color: black;
    }

    .characterbutton:hover{
        filter: brightness(120%);
    }

.writingbutton { grid-area: writingbutton; 
     background-image: url('https://files.catbox.moe/y5uhi4.png');
     max-height: 200px;
}

    .writingbutton h2 {
        margin-top: 0px;
        margin-left: 55px;
        margin-bottom: -25px;
        color: black;
    }

    .writingbutton:hover {
        filter: brightness(120%);
    }

.blogbutton { grid-area: blogbutton; 
     background-image: url('https://files.catbox.moe/y5uhi4.png');
     max-height: 200px;
}

    .blogbutton h2 {
        margin-top: 0px;
        margin-left: 70px;
        margin-bottom: -25px;
        color: black;
    }

    .blogbutton:hover {
        filter: brightness(120%);
    }

.askbutton { grid-area: askbutton; 
     background-image: url('https://files.catbox.moe/y5uhi4.png');
     max-height: 200px;
}

    .askbutton h2 {
        margin-top: 0px;
        margin-left: 25px;
        margin-bottom: -10px;
        color: black;
    }

    .askbutton:hover {
        filter: brightness(120%);
    }

.fandomshrinebutton { grid-area: fandomshrinebutton; 
     background-image: url('https://files.catbox.moe/br3czz.png');
     max-height: 455px;
}

    .fandomshrinebutton h2 {
        margin-top: 0px;
        margin-left: 45px;
        margin-bottom: -45px;
        font-size: 40px;
        color: white;
    }
    
    .fandomshrinebutton img {
      width: 100%;
      margin-left: 0px;
    }

    .fandomshrinebutton:hover {
        filter: brightness(120%);
    }