growing in the weeds

My first template! i was a bit.. how do i say itt... maybe a bit icky cause most are quite simple. it is pretty glitchy and isnt responsive :( view live preview

code :)

<!doctype html>
 
 
 

 
 <style>
 HTML CSS JSResult Skip Results Iframe
/*basic styles*/

::-webkit-scrollbar {
width:15px; height:15px;}   /* made by @ps1 */
::-webkit-scrollbar-track { 
background-image: url(https://i.imgur.com/n1kAWKU.png);}
::-webkit-scrollbar-thumb {
background-image: url(https://i.imgur.com/KePIOiE.png);
border-top: 1px solid #D4D0C8; border-bottom: 1px solid #808080;}
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(https://i.imgur.com/ZF6PC55.png);
width: 15px; height: 15px;}
::-webkit-scrollbar-button:vertical:increment {
background-image: url(https://i.imgur.com/sMOMkQ7.png);
width: 15px; height: 15px;}

hr {
 
  border-top: dashed #A08395 1px;
  width:150px;
  
  
}
  body {
    cursor: url("https://cur.cursors-4u.net/games/gam-2/gam134.cur"), auto;
    width: 1080px;
    font-family: "ms ui gothic";
    color: black;
    font-size: 13px;  
background-image: url("https://64.media.tumblr.com/3100fe34f8515c242ae611f0d124123d/tumblr_inline_mrhs22MOT41qz4rgp.gif"); 
    background-color:pink;
    margin: 0;
 background-size: 65px;

}

* {
                box-sizing: border-box;
            }
  
  
#layout {
  
    width: 780px;
    margin-left:293px;
   border:solid 12px;
    border-image: url(https://foollovers.com/mat/baf/food/fo32-008-a.gif) 9 fill round;
    padding: 5px;
    margin-top: 30px;
  }

main {
             background-color: pink;   
     background-image:url("https://64.media.tumblr.com/721626b4f1b43d8de0e3f3baf6986ef6/tumblr_inline_mrhrq5iVoC1qz4rgp.png");
                padding: 20px;
}

.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 0fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
  
}

.box1  { 
background-image:url("https://64.media.tumblr.com/0bc343b97976958aa483e16707d89914/tumblr_inline_mrhrtvuL7G1qz4rgp.gif");
  overflow: auto;
  width:120px;
  height:210px;
  grid-area: 5 / 5 / 5 / 5;
border:solid 1px black;
  background-color:white;
  
}

#insidebox1 {
  
  overflow: auto;
   margin-top:10px;
  margin-left:5px;

}

.header1 {
  text-align:center;
  
  height:auto;
  width:auto;
  
  grid-area: 4 / 5 / 3 / 5 ;
border: 1px solid black;
  border-bottom: 1px solid pink;
  border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-right-radius: 1px 1px;
border-bottom-left-radius: 1px 1px;

background-image: linear-gradient(to bottom, #ffcddf, #ffc0d7, #ffb3cf, #ffa6c6, #ff99be, #ff97bc, #ff94bb, #ff92b9, #ff9abe, #ffa3c4, #ffabc9, #ffb3ce);
  
}

.mystampbox {
    grid-area: 6 / 5 / 7 / 6;
  transform:translate(-1px, -82px );
background:white;
border:12px solid;
   border-image: url(https://foollovers.com/mat/baf/food/fo32-008-a.gif) 9 fill round;
  width:120px;
  height:70px;

}

#mystamp {
transform:translate( -1px, -4px);
    
}

.box2 {
  grid-area: 5 / 1 / 6 / 6;
  text-align:center;
  overflow: auto;
  height:300px;
  width:570px;
border: 1px solid black;
  background-color:white;
  background-image:url("https://64.media.tumblr.com/d5dc9eccd221d9820f8b3b4ed23d0334/tumblr_inline_mrhrozzkwY1qz4rgp.gif");
}

.background2 {
  transform:translate( 85px, 25px);
  border: solid 12px black;
border-image:url("https://64.media.tumblr.com/8a1328a9f02f6f4ea4c86b51c4600813/57218842dc8b4230-6e/s75x75_c1/b5d6f94e57c8f0fe9cc0d61b45849a9bd7b41db4.pnj") 7 fill round;
  width:400px;
  height:250px;
}
.insidebox2 {
  overflow: auto;
  transform:translate(24px, 4px);
  background-image:url("https://64.media.tumblr.com/e92f0204dfc2e7ba23263508f071464b/tumblr_inline_ml9dtbe0Ie1qz4rgp.gif");
  
  width:330px;
  height:220px;
  border: 2px dashed pink;
  border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;

}

.graph1 {
transform:translate(0px, 15px);
  
  }

.stamps {
  grid-area:6/span 6/7/6;
  height:auto;
  width:auto;
  
  }

.container2 {
  grid-area:1/1/1/1;
  width:700px;
  height:600px;
  background-color: pink;
  background-image:url("https://64.media.tumblr.com/0e5528183449359c6c62ff9278fefaba/tumblr_inline_mqijnzIgJg1qz4rgp.gif");
  border: solid black 1px;
  
  
}

.parent2 {
   display:grid;
    
}

.box3  { 
   grid-area: 1 / 1 / 1 / 1 ;
  margin-left:18px;
   margin-top:10px;
  width:250px;
  height:210px;
border: 1px solid black;
  border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
  background-color:pink;
  background-image:url("https://64.media.tumblr.com/ada549e8354c486531627c797baa6515/tumblr_inline_mrhs5i8PgA1qz4rgp.gif");
}
  #insidebox3 {
    
overflow: auto;
  color:#D1ACC2;
 text-align:center;
 margin:auto;
 margin-top: 20px;
 background-color:white;
 border:2px dashed #fdb6d9;
 height:160px;
 width:192px;
    
  }

.background3 {
  
  background-color:white;
  background-image:url("https://64.media.tumblr.com/843d9d376aeac892e8de931a6bfb7c1c/tumblr_inline_mrhryucksH1qz4rgp.gif");
  border: solid 1px black;
  width:340px;
  height:250px;
  margin-top:10px;
  margin-left:10px;
}

.ad1 {
  background-image:url("https://64.media.tumblr.com/01f6cb93029f4ef01e0983d9673c1f53/fe63962fd1d2eae4-e2/s400x600/499fab3a569a70fcb1eea1b551caba27653edf8a.jpg");
  grid-area:2/1/3/5;
  transform:translate( 10px, -82px );
width: 298px;
  height:53px;
  border:black 1px solid;
  
}
.box4border {
  grid-column: 3 / 4;
  border: solid 12px black;
border-image:url("https://64.media.tumblr.com/8a1328a9f02f6f4ea4c86b51c4600813/57218842dc8b4230-6e/s75x75_c1/b5d6f94e57c8f0fe9cc0d61b45849a9bd7b41db4.pnj") 6 fill round;
  width: 267px;
  height:344px;
  margin-top: 5px;
  margin-right:15px;
 
  
}

.box4 {
 
  margin-top: 5px;
  margin-right:15px;
  grid-column: 3 / 4;
  overflow: auto;
width: 242px;
  height:310px;
background: 
url('https://64.media.tumblr.com/60b38813972c56fe33bfeddb3284e142/tumblr_inline_mrhrou0Ll01qz4rgp.gif') 0px 0px ;

border:solid white 3px;
   
}

.divider {
  grid-area: 2 / 1 / 2 / 4;
  background-color:pink;
  background-image:url("https://64.media.tumblr.com/3100fe34f8515c242ae611f0d124123d/tumblr_inline_mrhs22MOT41qz4rgp.gif");
  border: solid white 1px;
  height:40px;
  width:669px;
  margin-top:10px;
  margin-left:14px;
  margin-bottom:10px;
  
  
}

.box5 {
    
     text-align:right; 
  color:pink;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
    grid-area: 3/1/3/1;
    margin-bottom:12px;
    margin-left:15px;
    overflow: auto;
  width:300px;
  height:178px;
border: 2px solid pink;
  background-color:white;
  background-image:url("https://64.media.tumblr.com/790dd1d36ecb55a56dc3bb2bf283192f/tumblr_inline_ml9be4dDcn1qz4rgp.gif"); 
    filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white)
        drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white)
        drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d);
  
}

.something {
  grid-area:3/3/3/3;
  text-align:center;

overflow:auto;
  border:12px solid;
  border-image:url("https://64.media.tumblr.com/8a1328a9f02f6f4ea4c86b51c4600813/57218842dc8b4230-6e/s75x75_c1/b5d6f94e57c8f0fe9cc0d61b45849a9bd7b41db4.pnj") 6 fill round;
  height:160px;
  width:250px;
}

li {
  </style>
  
  <html>
  <head>
<html lang="en">
<head>
  <audio id="music" autoplay loop>
    <source src="https://cdn.discordapp.com/attachments/1112848330221961351/1208480227211350046/Kingdom_Hearts_3582_Days_OST_-_At_Dusk_I_Will_Think_of_You.mp3?ex=65e36fea&is=65d0faea&hm=17ccffc700ef9690618ce603a2844be033de4ca71ab7d49f449d875bb2d4880f&" type="audio/mp3">
</audio>
  
  <script src="mai sait!/codes.js"></script>
  
  <title>title :3 || theme by TARO!!</title>
  
 <script>

var documentTitle = document.title + " - ";

(function titleMarquee() {
    document.title = documentTitle = documentTitle.substring(1) + documentTitle.substring(0,1);
    setTimeout(titleMarquee, 200);
})();
   
 
  
  </script>
  
  
  
  <meta charset="utf-8"/>
  <meta name="viewport"  content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="mai sait!/style.css">
  <link rel="shortcut icon"type="image/png" href="https://files.catbox.moe/wfxfuj.png">
  </head>
  
<body>
  
  <div id="allcontent">
    <div id="layout">

<div class="box2">
    <div class="background2">                                 
<div class="insidebox2"> <br><br><br><img src="https://64.media.tumblr.com/36347a0ded5067f67a3b394025e24eb1/96872098c3c5a16a-2f/s400x600/8b862234bda90ca5af1109a4b8200551b0dd1c4e.gifv"width=300px;><br><br>welcomz!!! this is my first theme, kyu!!!<img src="https://64.media.tumblr.com/04bc92cbe7d647c81c7b35aba7e33be0/c75278e3b942422e-54/s75x75_c1/e69a488a5062d72a5956637f86aace05d2e5b8b2.gifv"><div class="graph1">
    <img src="https://files.catbox.moe/fz6se5.gif"height=100px;> 
             txt<br>
  <br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex nec tellus ultrices auctor nec id urna. In eget bibendum tellus, eu elementum eros. Vestibulum fermentum, lorem ac accumsan pretium, magna lorem efficitur nisi, eget auctor mauris quam scelerisque ex. Nullam nisi dolor, lacinia quis purus vel, mollis posuere diam. Quisque id rhoncus eros, ut lobortis nisi. Quisque porta diam non nulla finibus efficitur. Quisque nec elementum magna, id congue nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In rutrum ut dui et bibendum. Pellentesque tortor libero, consectetur eu finibus eu, scelerisque non tellus. In eu justo ullamcorper est posuere consequat quis eu ex. Curabitur sagittis, metus sed pulvinar fringilla, sem sem maximus massa, et pulvinar lectus tellus eu enim.

Mauris pretium augue est, vestibulum blandit urna ultrices nec. In elementum tortor ut ante volutpat sodales. Sed a augue maximus augue luctus euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at commodo sapien. Sed aliquet lorem nec vestibulum malesuada. Duis non nisl quis sem fringilla dignissim. Aenean pulvinar faucibus tortor vitae lacinia. Sed rutrum nibh quis orci mollis auctor. Phasellus luctus sapien eu vehicula blandit. Morbi ac congue diam. Donec non diam turpis.

Mauris eget nibh dolor. Phasellus consectetur aliquam libero sit amet venenatis. Nullam pharetra pretium velit eget egestas. Morbi venenatis nulla nec arcu pulvinar pharetra. Pellentesque placerat metus eu consequat tempor. Pellentesque odio nunc, accumsan sed porttitor eu, dignissim viverra ligula. Fusce dictum consectetur tortor, in commodo tellus sagittis vel. Pellentesque et feugiat ex. Etiam euismod, turpis non tempor ornare, justo quam tincidunt orci, id volutpat tortor est id purus. Vestibulum pellentesque tortor elementum, molestie purus finibus, finibus ante. Donec et tortor elit. Donec eleifend imperdiet mauris nec feugiat.

Fusce tincidunt sem sed tempus tristique. Ut vitae pulvinar dolor. Nullam ultricies augue risus. Cras eget justo tincidunt, condimentum tellus ut, commodo velit. Suspendisse lobortis mollis nibh, vel tristique felis eleifend sit amet. Curabitur ullamcorper porta venenatis. Nullam a fermentum nisl, vel tempus quam. Integer fringilla efficitur velit, dignissim imperdiet mauris placerat eget. Quisque velit leo, posuere ac nibh commodo, bibendum accumsan ligula. Nam rutrum et ex sed dictum. Nunc porttitor elit id sapien scelerisque sollicitudin. Pellentesque quis justo vehicula, lacinia felis ac, lobortis eros. Donec leo mi, elementum id odio eget, lobortis ornare diam. Vestibulum vitae ornare purus. Praesent ac iaculis est, eu ornare metus. Sed tincidunt vel dui non placerat.

Praesent laoreet at orci in dignissim. Cras auctor fermentum vulputate. Sed mattis porttitor ante id pharetra. Proin pharetra magna enim, eu porttitor lacus blandit ut. Aliquam ut imperdiet tortor, sit amet eleifend leo. Nam consequat odio sit amet finibus suscipit. Aenean venenatis rhoncus pretium. Suspendisse at placerat lacus. Suspendisse aliquam viverra mauris et porttitor. Phasellus et neque sodales, euismod mi porta, malesuada augue. Nulla in libero arcu. Sed semper mattis neque a pharetra. Praesent ex libero, molestie et ornare eget, suscipit vel nunc. Vestibulum eu erat vel dolor facilisis elementum vel vel felis.<br>
  <br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex nec tellus ultrices auctor nec id urna. In eget bibendum tellus, eu elementum eros. Vestibulum fermentum, lorem ac accumsan pretium, magna lorem efficitur nisi, eget auctor mauris quam scelerisque ex. Nullam nisi dolor, lacinia quis purus vel, mollis posuere diam. Quisque id rhoncus eros, ut lobortis nisi. Quisque porta diam non nulla finibus efficitur. Quisque nec elementum magna, id congue nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In rutrum ut dui
  et bibendum. Pellentesque tortor libero, consectetur eu finibus eu, scelerisque non tellus. In eu justo ullamcorper est posuere consequat quis eu ex. Curabitur sagittis, metus sed pulvinar fringilla, sem sem maximus massa, et pulvinar lectus tellus eu enim.