body {
    display: flex;
    height:100vh;
    background-image: url(https://i.pinimg.com/736x/f7/89/52/f789529831cb4bc106998834e46a5e3d.jpg);
    background-size: 300px;
    filter: sepia(.3);
    justify-content: center;
}

::-webkit-scrollbar {
    width: 14px
    }
    
    ::-webkit-scrollbar:horizontal {
    height: 14px
    }
    
    ::-webkit-scrollbar-corner {
    background: #eee
    }
    
    ::-webkit-scrollbar-track:vertical {
    background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
    border-radius: 5px; 
    }
    
    ::-webkit-scrollbar-track:horizontal {
    background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    border-radius: 5px; 
    }
    
    ::-webkit-scrollbar-thumb {
    border: 1.5px solid #888;
    border-radius: 5px;
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
    }
    
    ::-webkit-scrollbar-thumb:vertical {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
    }
    
    ::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
    }
    
    ::-webkit-scrollbar-button:horizontal:end:increment,
    ::-webkit-scrollbar-button:horizontal:start:decrement,
    ::-webkit-scrollbar-button:vertical:end:increment,
    ::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
    background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
    }
    
    ::-webkit-scrollbar-button:vertical {
    height: 15px
    }
    
    ::-webkit-scrollbar-button:vertical:start:decrement {
    background: white;
    background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: 100% auto, cover;
    -webkit-background-size: 100% auto, cover;
    -o-background-size: 100% auto, cover;
    background-size: 100% auto, cover;
    border: 1.5px solid #888;
    border-radius: 5px;
    }
    
    ::-webkit-scrollbar-button:vertical:start:increment {
    display: none;
    }
    
    ::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
    }
    
    ::-webkit-scrollbar-button:vertical:end:increment {
    background: white;
    background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee;
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: 100% auto, cover;
    -webkit-background-size: 100% auto, cover;
    -o-background-size: 100% auto, cover;
    background-size: 100% auto, cover;
    border: 1.5px solid #888;
    border-radius: 5px;
    }

/*fonts*/

@font-face {
    font-family:'PORKYS';
    src: url(https://dl.dropbox.com/s/p47jjxbd1dg8st2/PORKYS_.TTF?);
}

@font-face {
    font-family: 'Chalk';
    src: url('https://files.catbox.moe/dv0hjd.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: clover;
    src: url(https://dl.dropbox.com/s/fpgr6spck905sqg/soopafre.ttf);
    }

/*layout*/

.biscuit {
    padding: 5px;
    height: fit-content;
    margin:20px;
    border-width:7px;
    position: relative; 
border-style:solid;
border-image: url("https://moekkis.neocities.org/biscuit.gif") 7 fill round;
}

.grid {
    
    padding:10px;
    background-size: 500px;
    position: relative; 
    display: grid;
    border-radius: 16px;
    width: fit-content;
    height:fit-content;
    grid-gap: 16px;
  
    /* three columns: narrow / main / narrow */
    grid-template-columns: 250px 500px 250px;
  
    grid-template-rows:
      300px     /* header */
      400px     /* sidebar + main */
      200px     /* sub‐items */
      100px     /* content row */
      300px      /* footer bar */
      90px      /* buttons row */
      75px      /*stampsrow*/
    ;
  
    grid-template-areas:
    "header  header   header"
    "sidebar main     main"
    "sidebar updates     mybutton"
    "buttons buttons  statuses"    
    "pics content1 statuses"
    "footer  footer   statuses"
    "stamps stamps    stamps";
  }

  .grid > * {
    padding: 5px;
    position: relative;
    overflow: hidden;
    padding:6px;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
    background-color: var(--white);
    border-radius: 7px;
  }
  /* Assign each element to its area */
.header {
    grid-area: header;
    overflow: visible;
    background-color: transparent;
    background-image: url(https://i.pinimg.com/736x/f8/66/55/f86655ae860084b7cc545125e56b4dda.jpg);
}

.sidebar {
    grid-area: sidebar;
}

.main { 
    grid-area: main;
}

.updates { 
    border-radius: 0;
    padding:0px;
    flex-direction: column;
    display: flex;
    grid-area: updates;
    background-color: transparent;
    border: none;
}
.mybutton { 
    grid-area: mybutton;      
    background-image: url(https://i.pinimg.com/736x/bb/14/a0/bb14a036b476e21b56c966cbcd203764.jpg);
    background-size: cover;
}

.content1 { 
    grid-area: content1;  
    background: transparent;
    border: none;
    padding:0px;
    display: flex;
    overflow: visible;
    flex-direction: row;
    gap:10px;
}

.statuses { 
    grid-area: statuses;  
}

.footer { 
    grid-area: footer;    
    border: none;
    padding:2px;
    display: flex;
    gap:5px;
    flex-direction: row;
    background-color: transparent;
}


.buttons img {
    width: 88px;
    height: 31px;
}
.buttons { 
    grid-area: buttons; 
    overflow-y: scroll;

}
  
  .todo {
    font-family: chalk;
    letter-spacing: 2px;
    overflow-y: hidden;
    position: absolute;
    top: 150px;
    right: -50px;
    width: 200px;
    height: 200px;
    transform: rotate(4deg);
    background: #2d4926;
    border-radius: 0;
    box-sizing: border-box;
    padding: 5px;
    color: var(--white);
    border: 4px groove #8c723d;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all .2s ease;
  }

  .todo:hover {
    rotate: 4deg;
  }

  .todo::-webkit-scrollbar {
    width: 0;
  }
  
  .inside {
    height: 100%;
    border-radius: 7px;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
}

.stamps {
    background-color: transparent;
    border: none;
    grid-area: stamps;
    flex-direction: row;
    display: flex;
}

.pics {
    grid-area: pics;
    padding:0px;
    border-radius: 0;
    background-color: transparent;
    border: none;
    gap:0px;
}

green {
    color:var(--green);
    letter-spacing: 2px;
    font-family: porkys;
}

  :root {
   /* var(name) */
    --pink: #ffb0d9;
    --yellow: #f9ead2;
    --green: #93d15f;
    --blue: #c9dcf9;

    --pink2: #f9c9e2;
    --green2: #d9f4a7;
    --blue2: #2359ed;
 
    --black: #4f4a40;
    --neutral: #8d826e;
    --white: #fffefc;

    color: var(--black);
    font-family: "Ms UI Gothic";
    image-rendering: pixelated;
}

/* other stuff */

.sidebar .inside {
    width: 100%;
    flex-direction: column;
    padding:0;
    overflow: hidden;
}

.links {
    border-bottom: 1px dashed var(--neutral);
    padding:3px;
}

.shrinestitle, .menutitle {
    border-bottom: 1px solid var(--neutral);
    font-family: porkys;
    color: var(--green);
    letter-spacing: 2px;
    -webkit-text-stroke: 1px var(--white);
    text-align: center;
    padding: 1px;
    font-size: 25px;
}

a {
    text-decoration: none;
    color: inherit;

}

a:hover {
    text-decoration: none;
    color: var(--green);
}

.shrinestitle {
    background-image: url(https://i.pinimg.com/736x/6e/bd/b6/6ebdb60279c9154bb73a7539f79f34f2.jpg);
    background-size: 200px;
}

.menutitle {
    background-image: url(https://i.pinimg.com/736x/73/88/d6/7388d6702263fa4f65da38d86c8e6956.jpg);
    background-size: 250px;
}

.strikethrough {
    text-decoration: line-through;
}

.chalk {
    position: absolute;
    bottom:-15px;
    right: 5px;
    width: 50px
}

input[type="checkbox"]:checked {
    accent-color: var(--neutral); /* Modern browsers */
}

.kitty {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
}

.abtmetext {
    position: relative;
    z-index: 10;
    width: 550px;
    box-sizing: border-box;
    height:auto;
}

.abtmesmall {
    align-items: center;
    display: flex;
    margin: 10px;
    justify-content: center;
}

.imgwrap {
    position: relative;
    width: 330px;
    margin:-10px;
    height:400px; 
}

.abtmeimg {
    width: 330px;
    z-index: 0;
    transition: all .2s ease;
    position: relative;
    height:auto;
    filter: sepia(.3);

}

.mybutton .inside {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mybutton green {
    text-align: center;
    color: var(--black);
    margin-bottom: -5px;
    -webkit-text-stroke: 1px var(--white);
    font-size: 20px;
}

.mybutton .columns {
    box-sizing: border-box;
    gap:5px;
    padding: 5px;
    display: flex;
    flex-direction: row;
}

.mybutton .column img {
    margin-top: 5px;
    width: 88px;
    transition: all .2s ease;
    border-radius: 2px;
    border: .2px solid var(--neutral);
    transform:  translateY(-5px);
    height:31px;
}

.mybutton .column img:hover {
    transform: scale(1.3)  translateY(-5px);
}
.mybutton .column {
    display: flex;
    gap: 0px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.mybutton .column textarea {
    border: 1px solid var(--neutral);
    color: var(--black);
    background: var(--white);
    border-radius: 3px;
}

textarea:focus {
    outline: none;
}

.imgwrap:hover .abtmeimg {
    opacity: 50%;
}

.imgwrap:hover .toolkit1 {
    opacity: 1;
}

.toolkit1 {
    position: absolute;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0px;
    padding: 5px;
    height:400px;
    box-sizing: border-box;
    top:50%;
    border-radius: 7px;
    transition: all .5s ease;
    flex-direction: column;
    text-align: center;
    transform: translateY(-50%);
    width:300px;
    z-index: 10;
    background: linear-gradient(to bottom, transparent, var(--white) 90%);
}

.updatesheader {
    width: 500px;
    border: 1px solid var(--neutral);
    height: 30px;
    border-radius: 16px 16px 0px 0px;
    box-sizing: border-box;
    border-bottom: 0;
    text-shadow: 1px 1px 1px var(--white);
    background: linear-gradient(to bottom, var(--green), var(--green2));
    padding: 5px 10px;
}

.updatestext {
    height:170px;
    padding:5px;
    border-radius: 0px 0px 7px 7px;
    background-color: var(--white);
    color: var(--black);
    width: 500px;
    overflow-y: scroll;
    text-align: left;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
}

.updatestext date {
    color: var(--blue2);
    text-decoration: underline solid var(--blue2);
}

.haruhi {
    position: absolute;
    bottom: 0px;
    left: -140px;
    width: 250px;
    border: none;
    background: none;
}

.statuses .status {
    background-color: var(--yellow);
    height: 150px;
    border-radius: 7px;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
    padding: 5px;
    margin-bottom:5px;
    color: var(--black);
}

.status img {
    width: 17px;
    margin-bottom:-3px;
}

.statuses .totw {
    height: 250px;
    position: relative;
    border-radius: 7px;
    flex-direction: column;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
    padding: 5px;
    display: flex;
    margin-bottom:5px;
    background-image: url(https://i.pinimg.com/736x/e3/65/fb/e365fb4374dfb3a1ac618180e1dfd0b6.jpg);
    background-size: cover;
}

#totwtitle {
    position: absolute;
    top:-20px;
    z-index:10;
    line-height: 30px;
    left:25px;
    font-size: 40px;
    background: -webkit-linear-gradient(var(--green), var(--green2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    -webkit-text-stroke:1.5px var(--black);
    font-family: 'clover';
  }

    
    .totwimg:hover {
        text-shadow: 0 0 4px var(--black);
        color: var(--white);
        pointer-events: auto;
        background-image: linear-gradient(to bottom, #ffffff30, #ffffff30),
        url(https://i.pinimg.com/736x/e1/ed/82/e1ed822da3b461b3567405177fd7e846.jpg);
    }
    
    .totwimg {
        height:220px;
        font-size: 20px;
        background-image: url(https://i.pinimg.com/736x/e1/ed/82/e1ed822da3b461b3567405177fd7e846.jpg);
        -webkit-mask-image: url('https://files.catbox.moe/8ysc7i.png');
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        transition: all 0.3s ease;
        mask-image: url('https://files.catbox.moe/8ysc7i.png');
        mask-repeat: no-repeat;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: transparent;
        mask-position: center;
        mask-size: contain;
        width: 220px;
        background-size: cover;
        background-position: center;
    }

    #clover {
        width:50px;
        position: absolute;
        bottom:10px;
        right:30px;
    }

.statuses .song {
    position: relative;
    background-color: var(--yellow);
    height: 96px;
    border-radius: 7px;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
}

.song green {
    font-size: 25px;
    position: absolute;
    top: -15px;
    left:0px;
    background: -webkit-linear-gradient(var(--green), var(--green2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 10;
    -webkit-text-stroke:1.5px var(--black);
}

.song p {
    width:140px;
    margin-top:auto;
    margin-bottom: auto;
}

#neighbors {
    position: absolute;
    bottom:300px;
    letter-spacing: 3px;
    z-index:10;
    line-height: 30px;
    border:none;
    left:-270px;
    font-size: 30px;
    background: -webkit-linear-gradient(var(--green), var(--green2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    -webkit-text-stroke:1.5px var(--black);
    font-family: 'clover';
}

#neighbors img {
    filter: sepia(.6);
    height:30px;
    margin-bottom:-5px;
}

/*music player*/
.player {
    position: absolute;
    right:0;
}
 
.cd { /* cd image u can change the size too */
position: absolute;
right: 10px;
filter: sepia(.3);
bottom:10px;
width: 85px;
height: 85px;
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
 
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
 
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
 
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
 
.cd:hover { /* this makes the cd stop spinning when hovering! */
-webkit-animation: pop 0.3s ease;
}
 
@media only screen and (max-width: 600px) {
 
.cd {
    right: 25px;
    bottom: 0;
    width: 67px;
    height: 67px;
}
 
}
 /*music player END*/

 .content1 .webrings {
    border-radius: 7px;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
    padding: 10px;
    display:flex;
    flex-direction: column;
    width: 300px;
    height:100%;
    align-items: center;
    text-align: center;
    overflow-y: scroll;
    background-color: var(--white);
    overflow-x:scroll;
 }

 .content1 .backlog {
    margin-left: auto;
    background-color: var(--white);
    border-radius: 7px;
    border: 1px solid var(--neutral);
    box-sizing: border-box;
    padding: 10px;
    width: 200px;
    height:100%;
 }

 .text green {
    display: flex;
    margin-bottom: -10px;
    justify-content: center;
    font-size: 20px;
    line-height:10px;
    flex-direction: column;
    text-align: center;
 }

.backlog .text {
    height: 250px;
    margin-bottom: 0px;
    width: 180px;
    padding:5px;
    overflow-y: scroll;
    box-sizing: border-box;
}

 .backlogtitle {
    background: -webkit-linear-gradient(var(--green), var(--green2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    -webkit-text-stroke:1.5px var(--black);
    font-family: 'clover';
    position: absolute;
    font-size: 40px; 
    bottom: -10px;
    left:-5px;
 }

 .time {
    color: var(--green);
    padding:5px;
    width: fit-content;
    height: auto;
    background-color: var(--yellow);
    border-radius: 7px;
    border: 4px double var(--neutral);
    position: absolute;
    top: -10px;
    left:-10px;
 }

 .time .clover {
    position: absolute;
    right:-10px;
    top:-15px;
    height:70px;
    transform: rotate(20deg);
 }

 .ad {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 5px;
 }

 .ad img {
    border: 1px solid var(--black);
    border-radius: 5px;
    height:100%;
 }