body {
    font-weight: 400;
    font-family: "https://files.catbox.moe/4qzuza.ttf";
    font-style: normal;
    word-wrap: break-word;
    font-size: 15px;
    letter-spacing: 1px;
    color: white;
    background-color: blueviolet;
  background-image: url('https://textures.neocities.org/thumbnails/stone-and-brick/thumb_BUILD268.jpg');
}

.parent {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 2 / 2 / 5 / 6; }
.div2 { grid-area: 2 / 6 / 5 / 10; }
.div3 { grid-area: 5 / 6 / 8 / 10; }
.div4 { grid-area: 5 / 2 / 8 / 6; }



#sidee {
  position: absolute;
  top: 200px;
  left: 500px;
  z-index: 9999;
  width: 500px;
  height: 250px;
  border: 2px solid rgb(11, 246, 11);
  margin: auto;
  width: 70%;
  padding: 10px;
}

#melonland-surf-club {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999;
  width: 100px;
  height: 100px;
}

#bark-bark {
  position: absolute;
  top: 400px;
  right: 350px;
  z-index: 9999;
  width:400px;
  height: 400px;
}

#next-to-bark {
    position: absolute;
  top: 430px;
  right: 450px;
  z-index: 9999;
  width:100px;
  height: 100px;
}
#texty {
  position: absolute;
  top: 10px;
  right: 80px;
  z-index: 9999;
  width: 100px;
  height: 100px;
}

#oink {
  position: fixed;
  top: 160px;
  right: 10px;
  z-index: 9999;
  width: 100px;
  height: 100px;
}



.center {
  margin: auto;
  width: 70%;
  padding: 10px;
}




 .fart {
   margin: auto;
   width: 120;
   border: FFFF00;
   padding: 10px;
 }
.nyan-cat {
  position: absolute;
  top: 50px;
  left: -150px;
  width: 100px;
  animation: moveAcross 10s linear infinite;
}

.thank {
  position: absolute;
  top: 50px;
  left: -220px;
  width: 100px;
  animation: moveAcross 10s linear infinite;
  z-index: 9999;
}




@keyframes moveAcross {
  0% { left: -150px; }
  100% { left: 100vw; } 
}

.meow {
  background-color: #3498db; 
  color: rgb(255, 0, 0);
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease; 
}

.box2 {
    border: 1px solid black;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(226, 226, 226, 1) 100%);
    box-shadow: 0px 2px 0px 1px white inset, 0px -1px 0px 1px grey inset;
    width: 300px;
    padding: 5px;
    overflow-y: scroll;
    height: 150px;
    font-size: 13px;
      position: absolute;
  top: 200px;
  left: 400px;
}



.title {
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 20px 20px 0px 0px;
    margin-top: 5px;
    border: solid 1px black;
    border-bottom: none;
    text-align: center;
    background: linear-gradient(180deg, rgba(203, 59, 59, 1) 0%, rgba(148, 14, 14, 1) 16%, rgb(195 0 2));
    width: 310px;
    font-weight: bold;
    font-size: 13px;
       position: absolute;
      top: 170px;
  left: 400px;
}