body {
    background-color:rgb(24, 24, 24);
    overflow:hidden;
}

hi {
    display:grid;
    grid-template-columns: auto 200px;
    grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
    height:100%;
    width: 100%;
    gap:5px;
}

header {
    grid-area: header;
    background-color:rgb(255, 255, 255);
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2f/Free_dark_crumpled_paper_texture_for_layers_%282984774568%29.jpg');
    background-size: cover;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    animation:animate 30s linear infinite;
    height:150px;
    color:rgb(255, 255, 255);
    text-align:center;
}

@keyframes animate{
    from{
        background-position: 0 -100%;
    }
    to{
        background-position: 0 0;
    }
}

side {
    grid-area: sidebar;
    background-color: rgb(173, 173, 173);
    color:white;
    height: calc(100vh - 150px - 30px - 50px);
    overflow-y:scroll;
}

#meow {
    width: 100%;
    height: auto;
    background-color: rgb(92, 92, 92);
    text-align: center;
}

a {
    color:rgb(240, 240, 240);
    text-decoration: none;
}

a:hover{
    color:rgb(253, 215, 88)
}

main {
    background-color:white;
    height: calc(100vh - 150px - 30px - 50px);
    grid-area: main;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "item1 item2 item3 item3"
    "item1 item6 item6 item5"
    "item7 item6 item6 item8"
    "item9 item9 item4 item8";
    gap: 5px;
    padding:5px;

}

        .star {
            grid-area: item1;
            background-color:rgb(160, 160, 160);
            border:double rgb(19, 19, 19) 4px;
            color: rgb(41, 41, 41);
            overflow:auto;
        }

        .joy {
            grid-area: item2;
            background-color:rgb(219, 219, 219);
            padding:20px;
            border:soli rgb(19, 19, 19) 4px;
        }

        .hooray {
            grid-area: item3;
            background-color:rgb(56, 56, 56);
            border:double rgb(116, 116, 116) 4px;
            color:rgb(207, 207, 207);
            overflow:auto;
            padding:10px;
        }

        .miau {
            grid-area: item4;
            background-color:rgb(175, 175, 175);
            border:double rgb(209, 209, 209) 4px;
        }

        .rockOn {
            display:relative;
            grid-area: item5;
            background-color:rgb(63, 63, 63);
        }


        .nice {
            position:relative;
            grid-area: item6;
            background-color:rgb(201, 201, 201);
            border:double rgb(255, 202, 88) 5px;
        }

        .marvelous {
            grid-area: item7;
            background-color:rgb(122, 122, 122);
            border: solid rgb(41, 41, 41) 2px;
            padding:5px;
        }

        .sparkle {
            grid-area: item8;
            background-color:rgb(221, 221, 221);
            border:double rgb(19, 19, 19) 4px;

            overflow-y:scroll;
            padding: 5px;
        }

        .hey {
            grid-area: item9;
        }


footer {
    grid-area: footer;
    background-color:rgb(34, 34, 34);
    height: 50px;
    color:white;
    line-height:5vh;
    text-align: center;
    justify-content:center;
    align-items: center;
    font-size: 5px;
}

p {
    margin:5px;
    font-family: "text1";
    font-size: 25px;
}

h1 {
    margin:35px;
    font-family: "text1";
    font-size: 70px;

}

button.boing{
    display:none;
}


      .cupcake {
        position: absolute; 
      width:30vw; height:60%; 
      background-color:rgb(236, 236, 236);
      right:20px;
      top:111px;
    overflow:scroll;
}

      #statuscafe {
    padding: .5em;
    background-color: rgb(51, 51, 51);
    height:80px;
}

      #statuscafe::before {

  content: ' ';

  position: absolute;

  width: 0;

  height: 0;

  left: 200px;

  top:80px;

  border: 25px solid;

  border-color: rgb(51, 51, 51) transparent transparent rgba(27, 27, 27, 0.9);

}

#statuscafe-username {
  color:rgb(155, 155, 155);
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
    color:rgba(255, 255, 255, 0.753);
} 

@media screen and (max-width: 1500px){
    .cupcake {
        width:23vw;
    }
}

@media screen and (max-width: 1400px){
    .cupcake {
        width:20vw;
    }
}

@media screen and (max-width: 1300px){
    .cupcake {
        width:18vw;
    }
}

@media screen and (max-width: 1200px){
    .cupcake {
        width:12vw;
    }
}

@media screen and (max-width: 1000px){
    .cupcake {
        width:7vw;
    }
}

@media screen and (max-width: 900px){

    hi {
      grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
    }

    .cupcake {
        width:11vw;
    }

    side {
        position:fixed;
        width: 250px;
        top: calc(150px + 13px);
        right: 8px;
        display:none;
    }

    button.boing{
    grid-area: item7;
    display:block;
    }   

    .marvelous{
        display:none;
    }

    .show {
        display:block;
    }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #5e5e5e; 
}
 
::-webkit-scrollbar-thumb {
  background: #ebebeb; 
}

::-webkit-scrollbar-thumb:hover {
  background: #858585; 
}