body {
   background-color: #ffffff;
  background-image: linear-gradient(90deg, #d7080878 20px, transparent 20px), linear-gradient(#d7080878 20px, transparent 20px);
  background-position: 10px 10px;
  background-attachment:fixed;
  background-size: 40px 40px;
  font-family: "DynaPuff", system-ui;
  
}

#wrapper {
  position:relative;
  padding-top:70px;
  padding-bottom:100px;
  margin:auto;
  width:1250px;
  display:grid;
  gap:5px;
  grid-template-rows: 155px 45px 75px 55px 125px 90px 105px 160px 30px;
  grid-template-columns: 150px 100px 100px 165px 35px 230px 45px 130px 180px 1fr;
  
  gap:5px;
  grid-template-areas: 
    "intro intro intro sprite sprite . . . . ."
    "intro intro intro sprite sprite media media . . ."
    ". ld ld sprite sprite media media . . ."
    ". ld ld opinion opinion opinion idk1 idk1 . ."
    ". ld ld opinion opinion opinion idk1 idk1 edits edits"
    ". . videos videos playlist playlist playlist playlist edits edits"
    ". . videos videos coverage coverage coverage coverage edits edits"
    ". . . . coverage coverage coverage coverage hcs hcs"
    ". . . . banner banner banner banner hcs hcs"
    
    ;
  & > div {}
}


#title {
  position:absolute;
  font-size:3.5rem;
  top:-2px;
  left:30px;
  color:white;
  text-shadow:0px 5px red, 0px 0px 7px black;
}
  
#intro {
  grid-area: intro;
  border:red 7px solid;
  background-color:white;
  border-radius:50px;
  padding:15px;
  padding-top:25px;
  box-shadow: inset 0px 0px 0px 5px rgb(254, 225, 225),inset 0px 0px 20px #FF4124, black 0px 0px 9px;
  background-image: 
    radial-gradient(rgb(254, 225, 225) 30%, transparent 30%),
    radial-gradient(rgb(254, 225, 225) 30%, transparent 30%);
  background-position: 0px 0px, 8px 8px;
  background-size: 16px 16px;
  background-color: rgb(255, 255, 255);
}


#sprite {
  grid-area: sprite;
  background-color:blue;
  --r: 15px;
  mask: 
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;
  perspective:300px;
  display:flex;
  background: repeating-radial-gradient(
  circle at 50%,
  blue,
  blue 10px,
  #4040FF 10px,
  #4040FF 20px
);"
}

#cainesprite {
animation: rotateY 4s linear infinite;
  
  margin:auto;
  
}

@keyframes rotateY{
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}


#ld {
  grid-area: ld;
  background-color:#fff;
  border-bottom-left-radius:100px;
  border:10px yellow dashed;
   box-shadow: inset 0px 0px 0px 5px white,inset 0px 0px 20px #F9FF3D, black 0px 0px 9px;
  padding:5px;
  position:relative;
  scrollbar-color: yellow white;
  & ul {
    padding-left:20px;
  }
}

#navbar {
  position:absolute;
  white-space:nowrap;
  writing-mode: vertical-rl;
  left:-55px;
  top:-10px;
  padding:5px;
  padding-right:3px;
  background-color:#fff;
  border: 5px yellow solid;
  box-shadow: black 0px 0px 9px;
  font-size:0.8rem;
  font-family:'Comic Sans MS';
  font-weight:bold;
  & > a {
    text-decoration:0.1rem dotted underline;
    margin-top:4px;
    margin-bottom:2px;
  }
}

#list  {overflow-y:scroll; height:calc(100% - 10px); padding:5px; border-bottom-left-radius:85px;}

#opinion {
  grid-area: opinion;
  background:linear-gradient(red, #FF7070);
  box-shadow: black 0px 0px 9px;
  padding:10px;
  & > div {
    background:linear-gradient(#fff, #FFD6D6);
    border:5px solid #fff;
    box-sizing:border-box;
    border-radius:20px; padding:10px;
    height:100%;
    font-family:verdana;
    overflow-y:auto;
    scrollbar-color: #FF7070 white;
    font-size:0.9rem
  }
}

#media {
  grid-area: media;
  background-color:yellow;
  overflow-x:scroll;
  overflow-y:hidden;
  scrollbar-width: thin;
  scrollbar-color: blue red;
  box-shadow: 7px -7px blue, 14px -14px red, black 0px 0px 9px;
  & img {
    width:91px;
    height:55px;
  }
}

.stampwrap {
  white-space:nowrap;
}

#idk1 {
  grid-area: idk1;
  background-color:#000CD9;
  border: blue outset 7px;
  box-shadow: black 0px 0px 9px;
  padding:10px;
  & > div {
    background-color:#E6E6E6;
    box-sizing:border-box;
    height:100%;
    padding:5px;
    border: white inset 7px;
    & > img {
      width:100%;
      height:100%;
      object-fit:cover;
    }
  };
}

#videos {
  grid-area: videos;
  background-color:blue;
  padding:10px;
  box-shadow: black 0px 0px 9px;
  & > div {
    padding:5px;
    background:repeating-linear-gradient(
  45deg,
  #fff,
  #fff 7px,
  #D6D8FF 7px,
  #D6D8FF 14px);
  height:100%;
  box-sizing:border-box;
  overflow-y:auto;
  scrollbar-color: blue #D6D8FF;
    padding:10px;
    & > iframe {box-sizing:border-box;margin-bottom:5px;}
  };
}


#playlist {
  grid-area: playlist;
  background-color:yellow;
  padding:5px;
  box-shadow: black 0px 0px 9px;
  border-radius:16px;
}

#coverage {
  grid-area: coverage;
  background-color:red;
  --r: 15px;
  mask: 
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;
  padding:30px;
  background-color: red;
opacity: 1;
background-image:  linear-gradient(135deg, #d80000 25%, transparent 25%), linear-gradient(225deg, #d80000 25%, transparent 25%), linear-gradient(45deg, #d80000 25%, transparent 25%), linear-gradient(315deg, #d80000 25%, red 25%);
background-position:  22px 0, 22px 0, 0 0, 0 0;
background-size: 22px 22px;
background-repeat: repeat;
  box-shadow: black 0px 0px 9px
    & > div {
      background-color:#fff;
      width:100%;
      box-sizing:border-box;
      height:100%;
  }
  & a {color:black}
}

#hcs {
  grid-area: hcs;
  background-image:url('https://katerpillar.neocities.org/assets/aroaceflag.svg');
  background-size:cover;
  font-family:'Comic Sans MS';
  overflow-y:auto;
  padding:15px;
  box-shadow: black 0px 0px 9px
}

#iluvadventures {
  position:absolute;
  bottom:-80px;
  
}

#edits {
  grid-area: edits;
  background-color:red;
  overflow-y:scroll;
  box-shadow: black 0px 0px 9px;
}


#banner {
  grid-area: banner;
  background-color:blue;
  position:relative;
  box-shadow: black 0px 0px 9px
}