* {
  cursor: url('https://cdn.cursors-4u.net/previews/cute-caterpillar-5cca90a6-32.webp') 32 32, auto !important;
}

@font-face {
  font-family: 'sidewalk'; src:url(sidewalk.ttf);}

 @font-face {
  font-family: 'punk'; src:url(magazineletter.ttf);}

  @font-face {
    font-family: "Comic Sans MS";
    src: url(Comic\ Sans\ MS.ttf);
  }

body {
  background-image:url(https://katerpillar.neocities.org/assets/AHHHH.png);
  background-size:cover;
  background-attachment:fixed;
  font-family:"Pixelify Sans", sans-serif;
}

#wrapper {
  position:relative;
  width:900px;
  background:linear-gradient(to bottom, #fff, #E0E0E0);
  border-radius:15px 15px 0 0;
  border:#000 3px solid;
  padding:5px;
  margin-top:50px;
  box-shadow:#fd0273 5px 5px;
}

#banner {height:20px; background-color:#fd0273; width:200px; margin:70px 0px 10px 0px;}

#header {
  background-color: #000000;
background-image: linear-gradient(45deg, #6dea71 25%, transparent 25%, transparent 75%, #6dea71 75%), linear-gradient(45deg, #6dea71 25%, transparent 25%, transparent 75%, #6dea71 75%);
background-position: 10px 10px, 30px 30px;
background-size: 40px 40px;
  height:180px;
  width:400px;
  position:relative;
}

#me {
  height:320px; position:absolute; right:5px; bottom:0px; filter:drop-shadow(5px 0px #fff)
}

#wrap2 {display:flex;}

#katerpilar {
  margin:0; color:#fff; position:absolute; bottom:5px; left:20px;
        text-shadow:#000 3px 0px;font-size:2.5rem;
        transform:rotate(5deg);font-family:sidewalk;font-weight: 400;
        &:hover {text-shadow:#fd0273 4px 0px}
}

#dotneocities {position:absolute;bottom:-50px; left:-5px;font-family:punk;
  font-size:2.3rem;
  transform:rotate(-2deg);
  font-weight:400;
color:#000; text-shadow:#fff 3px 3px;
z-index:2;

&:hover {color:#fd0273}}

#lyricquee {
  color:#000;font-weight:700;
        font-size:0.8rem;margin-top:5px; background-color:#6dea71;border-top:2px #000 solid;padding-bottom:2px;
}

#nav a {font-size:0.7rem; display:inline-block;
  text-decoration:none; background-color: #000;color:#fff;padding:2px 5px 2px 5px;font-weight:600;
  
  &:hover {color:#000;background-color:#fff;border:2px #000 solid;}}


#otherflex {flex-grow:1; }

p {font-size:0.67rem;}

#holder {
  padding-left:2px;
  & img {width:100%;}}

  #hitlist {
   width:170px;
   padding:10px;
   height:270px;
   background-color: #000;
   overflow:auto;
   scrollbar-width: thin;
   & img {width:75px;
    filter:sepia(0);
    
  &:hover {filter:sepia(100%);}
  }}

  #hitheader {position:relative; font-size:1.5rem; 
    left:5px;
    margin-top:-1.7rem;
    font-family:"Comic Sans MS", sans-serif;
    font-weight:bold;
    top:-10px;
  color:#fff;
  text-shadow:0px -3px #000
}

#sitebutton {
 display:flex; padding:2px; width:100%;
}



#recently {
  width:;
  padding:5px;
  margin-left:5px;
  color:white;
  font-size:0.8rem;
  display:flex;
  background:linear-gradient(to bottom, rgb(255, 140, 192), #fd0273);

  & span {color:rgb(255, 216, 234)}
}


::selection {
    color: rgb(255, 255, 255);
    background: rgb(255, 140, 192);
}

#aroace {
  width:250px;
  height:150px;
  font-size:0.75rem;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color:black;
  overflow:auto;
  background-size:cover;
  background-image:url('https://katerpillar.neocities.org/assets/aroaceflag.svg')
}

#sartre {
   width:250px;
   font-size:0.7rem;
   font-family:'Times New Roman', Times, serif;
   padding:7px;
   box-sizing:border-box;
   background-color:#fff;
   margin-top:2.5px;
   margin-bottom:2.5px;
   border:#000 1px solid ;
}

#atawrapper {
  align-self:stretch;
  width: 230px;
  position:relative;}

#atabook {
  -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
        height:100%;
       
        margin-bottom:-80px;
}

#textse {
  flex-grow:5;
  scrollbar-color:#6dea71 #d4ffd5;
  background:linear-gradient(to bottom,#d4ffd5,#8cec90);
  border:#8cec90 outset 5px;
  margin-right:3px;
  font-size:0.7rem;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding:7px;
  height:272px;
  overflow:auto;
  
  & div {
    padding:2px;background-color:#6dea71;font-weight:bold;
    border:outset 3px #8cec90;
  }
}

#cbox {
  position:fixed;
  border-radius: 15px 15px 0 0;
  bottom:-3px;
  border:#fd0273 3px solid;
  box-shadow:#000 0px 5px 10px ;
  background:linear-gradient(to bottom,#fff, #E0E0E0);
  right:25px;
  z-index:8;
}

#quotes {
  background-color:#000000;
  color:#E0E0E0;
  max-width:200px;
  height:230px;
  overflow:auto;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.8rem;
  padding:10px;
  scrollbar-width:thin;
  scrollbar-color:#fd0273 black ;
  margin-left:5px;
  & > p {
    border: 1px solid #E0E0E0;
    padding:5px
  }
}

.row {display:flex;margin-top:5px;}

#fanlistings {
  background-color:#8cec90;
  padding:2px;
  width:230px;
  scrollbar-color:#6dea71 #fff ;
    flex-shrink:0;
  height:154px;
    box-shadow:inset 0px 0px 15px #fff;
    border:5px #6dea71 solid;
  position:relative;
  & img:hover {filter:brightness(1.7);}
  & > h1 {
    color:white;
    text-shadow: #6dea71 4px 2px,#000 6px 3px,#000 0px 0px 5px;
    position:absolute;
    left:10px;
    top:-40px;
    &:hover {text-shadow: #fd0273 4px 2px,#000 6px 3px,#000 0px 0px 5px;scale:1.05}
  }
}

#hifrank {height:168px; object-fit:cover;
margin-left:3px;

    flex-shrink:0;

&:hover{filter: saturate(100);}}

#recs {font-size:0.7rem;
   font-family:'Times New Roman', Times, serif;
   padding:7px;
   box-sizing:border-box;
   background-color:#fff;
   border:#000 1px solid;
  box-sizing: border-box;}

   #tobe {
    width:255px;
    display:flex;
    flex-direction:column;
    margin-left:5px;
    height:168px;
    flex-shrink:0;
   }

   #TBW {flex-grow:1;
  background-color:#fd0273;
  font-family:'Courier New', Courier, monospace;
  color:#fff;
  font-size:0.67rem;
  scrollbar-color:#fff #fd0273;
  padding:7px;
  margin-top:2.5px;
border-radius:10px 0px;
overflow:auto;
& ul {margin-top:5px;}}

#webrings {
  height:168px;
  overflow:auto;
  margin-left:5px;
  scrollbar-width:thin;
  background:linear-gradient(to right, red, orange, yellow, green, blue, purple, pink);
  & > div {
    margin:auto;
  }
}

.bubble {
    position: relative;
    background: #fff;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 20px;
    line-height: 120px;
    text-align: center;
    width: 250px;
    height: 120px;
    border-radius: 10px;
    padding: 0px;
}
.bubble:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent #fff;
    border-width: 20px 20px 20px 0;
    top: 50%;
    left: -19px;
    margin-top: -20px;
}

#others {
  position:absolute; top:10px; left:920px;
  perspective:900px;
  width:500px;
}

#status {
  -webkit-transform:rotateY(-30deg);
  padding-top:2px;
}

#gubby 
{position:absolute; width:200px;
  top:-50px;
left:200px;

&:hover {scale:1.1}
}

#myquotes {
  font-family:Arial, Helvetica, sans-serif;
  background-color:white;
  width:250px;
  padding:5px;
  height:110px;
  transform:rotateY(25deg);
  position:relative;
  border:#000 solid 1px;
  top:-10px;
left:250px;

& p {margin-top:5px;
  margin-bottom:5px;}
}

#updatelog { 
  position:absolute;
  font-family:'Comic Sans MS';
  width:300px;
  height:200px;
  top:260px;
  left:150px;
  background-color:black;
  padding:5px;
  color:#E0E0E0;
  font-size:0.67rem;
  overflow:auto;
   & > div {
    border:#E0E0E0 1.5px solid;
    margin-bottom:5px;
    display:block;
    padding:5px;

   }
}