body {
background-color: #000000;
font-family: "Pixelify Sans", sans-serif;
}

::-webkit-scrollbar {
  width: 15px;
  border-radius:10px;
}

::-webkit-scrollbar-track {
  background: #ffff; 
}
 
::-webkit-scrollbar-thumb {
  background: #ffcce3;
}

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

::selection {
  color: #fff;
  background-color: #fd0273;
}

#mainwrapper {
display:grid;
width:1180px;
margin:auto;
padding:50px;
grid-template-columns:210px 115px 120px 120px 35px 125px 160px 1fr;
grid-template-rows:105px 185px 65px 100px 130px 125px 65px 235px 165px 190px 450px;
gap:15px;
grid-template-areas:
  'header header header header header header avatar avatar'
  'info info playlist playlist playlist playlist avatar avatar'
  'info info me me me me avatar avatar'
  'info info me me me me me2 random'
  'xdeco xdeco me me me me me2 random'
  'xdeco xdeco icons icons icons icons icons random'
  'xdeco xdeco media media media fav fav random'
  'checker checker media media media fav fav random'
  'current current current current quiz quiz quiz random'
  'current current current current game game game random'
  'mood mood mood char char char char random';

  & > div {
    background-color: #fff;
  }
}

#header {
  grid-area:header;
  
  background:linear-gradient(to top, #fd0273, rgba(255, 255, 255, 0) 25%), repeating-conic-gradient(#CFFFD6 0 25%, #0000 0 50%) 50% / 20px 20px
      
;
  --r:10px;
  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;
  overflow:hidden !important;
  padding-left:1.5rem;
& h1 {font-size:4.5rem; margin-top:-1.3rem;
   text-shadow:2px 0 #Fd0273}
& h4 {font-size:2rem;
  margin-top:-4.2rem;
  color:#fd0273
  }
}

#avatar {
  grid-area:avatar;
  background: repeating-radial-gradient(
  circle at 100%,
  #000,
  #000 10px,
  #fd0273 10px,
  #fd0273 20px
);
}

#info {
  grid-area:info;
  display:flex;
  flex-direction:column;
  
}

#siteinfo {
flex-grow:1;
background-color:#ffcce3 !important;
background:linear-gradient(to top, #fff, rgba(255, 255, 255, 0) 25%);
padding:20px;
  & > * {
    background-color:#fff;
    width:100%;
    padding:3px
  }
}

#stampbar-wrapper {
width:100%;
overflow:hidden;
}


.stampbar {
animation: scroll 5s linear infinite;
white-space: nowrap;
}

@keyframes scroll {
  from {transform:translateX(0)}
  to {transform:translateX(-410px)}
}

#navbar {
display:flex;
  background-color:#CFFFD6;
padding:4px;
  & a {
    flex-grow:1;
    background-color:#CFFFD6;
    color:#000000;
    &:hover {
background-color:#000;
color:#fff
}
  }
}

#playlist {
  grid-area:playlist;
  padding:0 10px 0 10px;
  border-radius:20px;
  border:double 5px #fd0273;
  & iframe {
margin:10px 0 0 0;
scale:0.98;
      transition:0.2s ease;
    &:hover {
  scale:1;
    }
}
}


#xdeco {
  grid-area:xdeco;
  background:repeating-conic-gradient(#fd0273 0 25%, #FFCCE3 0 50%) 50% / 35px 35px;padding:35px;
  
  & > div {
    width:100%;height:100%;background-color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    
    & > img {
      height:200px;width:200px;
      clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
      transition:5s ease;
      &:hover {
        transform:rotate(360deg)
      }
    }
  }

}


#me {
  grid-area:me;
  background-color:#fff !important;
  border-radius:0 70px 0 70px;
  padding:15px;
  display:flex;
  flex-direction:column;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  border:5px #fd0273 solid;
  box-shadow: inset #ffcce3 0 0 5px 5px;
  & > div {
    margin-top:10px;
    width:100%;
    flex-grow:1;
    background-color:#fd0273;
    box-shadow: inset #fff 0 0 5px 3px;
    border:5px #fd0273 solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius:0 15px 0 60px;
    overflow:auto;
    color:#ffffff;
    padding:15px
  }
}


.wave span {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}

.wave span:nth-child(1) {
    animation-delay: 0s;
}
.wave span:nth-child(2) {
    animation-delay: 0.1s;
}
.wave span:nth-child(3) {
    animation-delay: 0.2s;
}
.wave span:nth-child(4) {
    animation-delay: 0.3s;
}

.wave span:nth-child(5) {
    animation-delay: 0.4s;
}
.wave span:nth-child(6) {
    animation-delay: 0.5s;
}
.wave span:nth-child(7) {
    animation-delay: 0.6s;
}
.wave span:nth-child(8) {
    animation-delay: 0.7s;
}
.wave span:nth-child(9) {
    animation-delay: 0.8s;
}
.wave span:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
      color:#000000;
    }
    50% {
        transform: translateY(-10px);
      color:#fd0273;
    }
}

#me2 {
  grid-area:me2;
  margin-left:-15px;
  background-color:#fd0273 !important;
  overflow:hidden !important;
  & > div {
  height:100%;
  animation:scrollup linear infinite 10s;
    animation-play-state: running;
    &:hover {animation-play-state: paused;
    }
}
  & img {
    width:155px
  }
}

@keyframes scrollup {
  from {transform:translateY(-200%)}
  to {transform:translateY(150%)}
}

#random {
  grid-area:random;
  background-image:url('https://katerpillar.neocities.org/assets/haaa.png');
  background-size:100%;
  background-attachment:fixed;
  padding:10px;
  color:#fff
}

#tamanotchi {
  animation: 5s steps(3) flicker infinite alternate;
  scale:0.9;
  transition:0.5s ease;
  &:hover {scale:1;}
}

@keyframes flicker {
  from {transform:rotate(-15deg);}
  to {transform:rotate(15deg);}
}

#icons {
  grid-area:icons;
  background: url("https://katerpillar.neocities.org/assets/makesweet.gif");
  background-size: 15%;
  & > img {
    width:500px;
  }
}

#media, #fav {
position:relative;
padding:20px;
  & > h1 {position:absolute;
  top:-35px;
  right:0px;
  font-size:2.5rem;
  color:#fd0273;
  text-decoration:5px underline dotted #fd0273;
  text-shadow:0 3px #000;
  };
   & > div {
 width:100%;
 height:100%;
 background-color:#fff;
 border-radius:10px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 padding:10px;
 overflow:auto;
}
}

#media {
  grid-area:media;
  background-color:#cfffd6 !important;
  & > div {
 border:5px dashed #FFCCE3; 
}
}

#fav {
  grid-area:fav;
  background-color:#FFCCE3 !important;
  & > div {
 border:5px dashed #cfffd6; 
}
}

#checker {
  grid-area:checker;
  mask:radial-gradient(40px at 50% 100%,#0000 98%,red) 50%/calc(1.85*40px) 101%;
  background-color:#ffcce3 !important;
  
  & div {
mask:radial-gradient(40px at 50% 100%,#0000 98%,red) 50%/calc(1.85*40px) 101%;
  background:repeating-conic-gradient(#ffffff 0 25%, #cfffd6 0 50%) 50% / 35px 35px;
   height:200px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    
    }
}

.quoteblock {
  background-color:#ffffff;
  border:#ffcce3 5px solid;
  box-sizing:border-box;
  padding:5px;
}

#current {
  grid-area:current;
  background-color:#000 !important;
  border:10px #ffffff solid;
  padding:10px;
  overflow:auto;
  &::-webkit-scrollbar-track {background: #000;}
  &::-webkit-scrollbar-thumb {background: #fff;}
  &::-webkit-scrollbar-thumb:hover {background: #555;}
  
  & > div {
    display:flex;
    background-color:#ffffff;
    width:auto;
    margin-bottom:10px;
    padding:10px;
      & > img {
        width:150px;
        height:150px;
        margin-right:10px
    }
    & > div {
      flex-grow:1;
     & > h1 {margin:0;
        & > span {font-size:1rem;}}
     & > p {margin:0;}
    }
  }

  & a {color:#fd0273;
    text-decoration:1px #fd0273 wavy underline;
    &:hover {color:#000}}

}

#quiz {
  position:relative;
  grid-area:quiz;}

#quizzy {
  overflow:auto;
  padding:5px;
}

.titley {
position:absolute;
  color:#fd0273;
  text-shadow:4px -3px #000;
  bottom:-20px;
  right:0;
  z-index:2;
  font-size:2.7rem;
    font-weight:bold;
}

#quizresults {
white-space:nowrap;
  & img {
    height:135px;
    filter:grayscale(100%);
    transition:0.2s ease;
    &:hover      {filter:grayscale(0%)}
  }
}

#game {
  grid-area:game;
  padding:5px;
  position:relative;
  & img {width:100%;
  height:100%;object-fit:cover;object-position: center -150px;
    background-color:#cfffd6;
    filter:grayscale(100%);
    transition:0.2s ease;
    &:hover      {filter:grayscale(0%)}
  }
}

#mood {
  grid-area:mood;
  background-color:#fd0273 !important;
  display:flex;
  flex-flow:column wrap;
  align-items:stretch;
  & * {
    flex-grow:1;
    height:33%;
    object-fit:cover;
    width:50%;
    scale:95%;
    transition:0.5s ease;
    &:hover {
      scale:100%;
}
  }
}

#char {
  grid-area:char;
  font-size:2rem;
  background:linear-gradient(to right, red, orange, yellow, green, blue, purple, pink);
  font-family:"Comic Sans MS", sans-serif;
  padding:2rem;
  & div {animation:10s linear infinite spinning;}
}

@keyframes spinning {
  from {transform:rotate(0deg)}
  from {transform:rotate(360deg)}
}