body {
  color: white;
  background-color: var(--dark) !important;
  background-position: 50% 0% !important;
  font-family: ITC;
  text-shadow: 3px 3px 3px #000000bb;
  font-size: 16px;
  text-align: center;
  margin: 0px auto;
}

.body {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@font-face{
        font-family: DJB;
        src: url(/font/TheNitpickyCat.ttf);
        font-weight: bold;
}
@font-face{
        font-family: FFHD;
        src: url(/font/FairfaxHD.ttf);
}
@font-face{
        font-family: ITC;
        src: url(/font/ConduitITC.otf);
}

h1 {
  font-size: 50px;
  font-weight: lighter;
  margin: 25px 0px;
}

h2 {
  font-size: 36px;
  font-weight: lighter;
}

h {
  font-size: 24px;
}

li {
  font-size: 20px;
}

a {
  color: white;
  text-decoration: none;
}

img {
  object-fit: contain;
}

a:hover {
  color: white; 
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff;
}

a:hover .video, .character a:hover {
  text-shadow: 3px 3px 3px #000000bb;
}

.banner {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  border: solid;
  border-top: 2px;
  border-bottom: 2px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-color: var(--darker);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.banner .title {
  font-size: 40px;
  padding: 0px 10px;
  margin-top: auto;
  margin-bottom: 5px;
  background-color: #00000080;
  border-radius: 0 5px 5px 0;
  align-self: flex-end;
  text-align: left;
}

.guide {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
}

.guide a {
  width: 100%;
}

.guidebtn, .box .header {
  height: 48px;
  margin: 0px;
  border: solid;
  border-width: 2px;
  border-color: var(--darker);
  user-select: none;
}

.box .header.closed {
  border-radius: 10px 10px 10px 10px;
}

.box .header.hideable {
  cursor: pointer;
}
.box .header.hideable:hover {
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff;
}

.box .header.hideable:active {
  background-image: linear-gradient(var(--dark), var(--light));
  box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
}

.guide a:not(:last-child) .guidebtn {
  border-right: 0px;
}

.guide a:first-child .guidebtn {
  border-radius: 0px 0px 0px 10px;
}

.guide a:last-child .guidebtn {
  border-radius: 0px 0px 10px 0px;
}

.pageicon {
  width: 45px;
  height: 45px;
  vertical-align: middle;
  filter: drop-shadow(3px 3px 3px #000000bb);
}

h2:hover .pageicon {
  filter: drop-shadow(0 0 7px #fff);
}

.guidebtn.selected:hover .pageicon {
  filter: drop-shadow(3px 3px 3px #000000bb);
}

.home {
  background-image: linear-gradient(#ffd900, #ffbc00);
  user-select: none;
}
.characters {
  background-image: linear-gradient(#90db36, #60ab1a);;
  user-select: none;
}
.images {
  background-image: linear-gradient(#ff944e, #ff6600);
  user-select: none;
}
.videos {
  background-image: linear-gradient(#50b9fd, #0099ff);
  user-select: none;
}
      .home:active {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#ffbc00, #ffd900);
  }
      .characters:active {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#60ab1a, #90db36);
  }
      .images:active {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#ff6600, #ff944e);
  }
      .videos:active {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#0099ff, #50b9fd);
  }
      .home:hover .img-text, .about:hover .img-text, .status:hover .img-text, .characters:hover .img-text, .images:hover .img-text,  .videos:hover .img-text {
    filter: drop-shadow(0 0 7px #fff);
  }.
  
      .home:hover, .home:hover a {
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff; 
  }
      .characters:hover, .characters:hover a {
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff; 
  }
      .images:hover, .images:hover a {
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff; 
  }
      .videos:hover, .videos:hover a {
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff; 
  }
  
      .selected:hover {
    text-shadow: 3px 3px 3px #000000bb;    
  }
    
      .home.selected {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#ffbc00, #ffd900);
  }
      .characters.selected {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#60ab1a, #90db36);
  }
      .images.selected {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#ff6600, #ff944e);
  }
      .videos.selected {
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    background-image: linear-gradient(#0099ff, #50b9fd);
  }
  
      .content {
    width: 100%;
  }
      .flex {
    display: flex;
  }
      .content .large {
    width: calc(70% - 5px);   
  }
      .content .small {
    width: calc(30% - 5px);
    margin-left: 10px;
  }
      .box {
        width: 100%;
        margin-bottom: 10px;
  }
      .box .header {
    border-width: 2px;
    border-radius: 10px 10px 0px 0px;
    background-image: linear-gradient(var(--light), var(--dark));    
  }
      .boxcontent {
    border-radius: 0px 0px 10px 10px;
    background-color: var(--light);
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
    border: solid;
    border-width: 2px;
    border-color: var(--darker);
  }
     .boxcontent {
    transition: max-height 0.5s, border 0.25s;
  }
     .boxcontent:has(.video) {
    overflow: hidden;
  } 
     .boxcontent:has(.color) {
    height: 56px;
  }
     .large .boxcontent {
       max-height: 560px;
  }
     .small .boxcontent {
       max-height: 360px;
  }
     .scroll {
       overflow: hidden;
       overflow-y: scroll;
  }
     .me {
    padding: 10px; 
 }
     .me img {
    height: 180px;
    width: 180px;
    object-fit: contain;
 }
     .text {
    padding: 5px;    
 }
     #catfolk-webring a, .ring a {
    color: #fff;
 }
     #catfolk-webring img:hover, #catfolk-webring #catfolk-randomlink:hover,.ring a:hover, .ring img:hover {
    filter: brightness(125%) drop-shadow(0 0 7px #fff);
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff;
 }
    .status {
      margin-top: 0px;
 }
    .update {
      padding: 5px 10px; 
 }
    .wide {
      width: 100%;
      display: block;
 }
    .socials {
      width: 180px;
      filter: drop-shadow(3px 3px 3px #000000bb);
 }
    .socials:hover {
      filter: brightness(10000000) drop-shadow(0 0 7px #fff);
 }
    .buttons img {
      width: 88px;
      height: 31px;
    }
    .buttons img:hover {
      filter: brightness(125%) drop-shadow(0 0 7px #fff);
      background-color: white;
 }
 
 .character {
   width: 100%;
   font-size: 30px;
   align-self: flex-end;
   transition: transform .2s;
 }
 .character:hover {
   transform: scale(1.1);
 }
 .character:active {
   transform: scale(0.9);
 }
 .character img {
   width: 100%;
 }
 
 .myImg {
    cursor: pointer;
    transition: .2s transform;
  }
      .myImg:hover {
   transform: scale(1.05);
  }
      .myImg:active {
   transform: scale(0.95);
  }
  .art {
        height: 240px;
        width: auto;
        min-width: 170px;
        max-width: 440px;
      }
  .fishbone {
    height: 150px;
  }
  .photo {
        height: 200px;
        width: auto;
        max-width: 400px;
      }
  textarea {
    resize: none;
    height: 80px;
  }
  .screen {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
  }
  .resizer {
    margin-bottom: 10px;
    display: flex;
  }
  .resizer h2 {
    background-image: linear-gradient(var(--light), var(--dark));
    border: solid 2px var(--darker);
    margin: 0px;
    height: 48px;
  }
  
  .resizer a {
    width: 100%;
    cursor: pointer;
    user-select: none;
  }
  .resizer a:first-child h2 {
    border-radius: 10px 0px 0px 10px;
  }
  .resizer a:last-child h2 {
    border-left: 0px;
    border-radius: 0px 10px 10px 0px;
  }
  
  .resize-button-primary.active {
    background-image: linear-gradient(var(--dark), var(--light));
    box-shadow: inset 5px 5px 5px 0px rgba(0,0,0,0.25);
  }
  
  
  
  
  
  h4 {
    text-align: center;
  }
  
  .thumbnail {
  margin: 6px auto;
  }
       .play {
  margin-top: 6px;
  display: none;
  position: absolute;
  filter: drop-shadow(3px 3px 3px #000000bb);
  }
  
  .play, .thumbnail {
    height: 125px;
  }
       .video:hover .play {
  margin-top: 6.5px;
  display: unset;
  position: absolute;
  }
       .video:active .play {
  margin-top: 6.5px;
  display: none;
  position: absolute;
  }
  
  .video:hover {
    background-color: #00000080;
    }
    .video:active {
    background-color: #ffffff80;
    }

       .video {
    width: 25%;
    height: 225px;
    margin: 0px;
    background-color: #0000;
    float: left;
    position: relative;
    }
    
    .video .title {
    font-size: 18px;
    margin: 5px;
    width: 258px;
    }

    .desc {
    font-size: 16px;
    text-align: center;
    }
     .video .r {
  min-height: 3.333px;
  font-size: 80%;
  line-height: 1.2;
  display: block;
  text-align: center;
  width: 100%;
  margin-left: 0px;
}
    .video .r p {
  margin: 0px;
  text-align: center;
}
  
  
  
  
  
  
  
  
  body.modal-open {
    overflow: hidden;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.66);
    margin: 0px;
    backdrop-filter: blur(8px);
    overflow: hidden;
    overscroll-behavior: contain;
}


.modal-content {
    margin: auto;
    display: block;
    height: 70%;
    max-width: 75%;
    object-fit: contain;
    user-select: none;
}

.displayImg {
  margin: auto;
}

.modal {
  animation-name: frosted-glass;
  animation-duration: 0.75s;
}

@keyframes frosted-glass {
  from {backdrop-filter: blur(0px); background-color: rgba(0,0,0,0);}
  to {backdrop-filter: blur(8px); background-color: rgba(0,0,0,0.66);}
}

.modal-content {
  animation-name: zoom;
  animation-duration: 0.75s;
}

@keyframes zoom {
  from {transform:scale(0) rotate(-45deg)}
  to {transform:scale(1) rotate(0deg)}
}

h3 {
  animation-name: appear;
  animation-duration: 0.75s;
}

@keyframes appear {
  from {opacity: 0;}
  to {opacity: 1;}
}

#caption {
  animation-name: up;
  animation-duration: 0.75s;
}

@keyframes up {
  from {padding-top: 16%; opacity: 0;}
  to {padding-top: 20px; opacity: 1;}
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #fff;
    padding: 20px 0;
    height: 150px;
    font-size: 35px;
    user-select: none;
}

h3 {
  font-size: 150%;
  position: absolute;
  top: 20;
  left: 0;
  right: 0;
  text-shadow: none;
  color: #ffffff33;
  user-select: none;
}






.l, .r {
  width: calc(50% - 5px);
}

.r {
  margin-left: 10px;
}

.likes-dislikes {
  display: flex;
}

.likes, .dislikes {
  width: calc(50% - 5px);
}

.likes .boxcontent, .dislikes .boxcontent {
  min-height: 96px;
}

.dislikes {
  margin-left: 10px;
}

.ocimg{
  padding: 10px;
}

.ocimg img {
  width: 200px;
}

.info {
  text-align: left;
}

.color {
  height: 40px;
  width: 40px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 7.5px;
  box-shadow: 3px 3px 3px #000000bb;
  float: left;
  user-select: none;
  }
  
  .color-000000 {
  background-color: #000000;
  }
  .color-ffffff {
  background-color: #ffffff;
  }
  .color-1f1f1f {
  background-color: #1f1f1f;
  }
  .color-ffb8dc {
  background-color: #ffb8dc;
  }
  .color-ffd500 {
  background-color: #ffd500;
  }
  .color-653319 {
  background-color: #653319;
  }
  .color-bb8548 {
  background-color: #bb8548;
  }
  .color-ecdcc3 {
  background-color: #ecdcc3;
  }
  .color-755b4d {
  background-color: #755b4d;
  }
  .color-00c3ff {
  background-color: #00c3ff;
  }
  .color-800004 {
  background-color: #800004;
  }
  .color-808080 {
  background-color: #808080;
  }
  .color-d9d9d9 {
  background-color: #d9d9d9;
  }
  .color-0085ad {
  background-color: #0085ad;
  }
  .color-962100 {
  background-color: #962100;
  }
  .color-ffaf7a {
  background-color: #ffaf7a;
  }
  .color-004b00 {
  background-color: #004b00;
  }

.goback {
  position: fixed;
  top: 15px;
  left: 15px;
}

.goback h {
  font-size: 36px;
}





html::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}
html::-webkit-scrollbar-track {
  box-shadow: inset 3px 3px 3px #00000055; 
  background-color: var(--light);
  border: solid 1px var(--darker);
}
html::-webkit-scrollbar-track:vertical {
  border-top: 0px;
  border-bottom: 0px;
}
html::-webkit-scrollbar-track:horizontal {
  border-left: 0px;
  border-right: 0px;
}
html::-webkit-scrollbar-thumb {
  background-image: url(/icons/v.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
  border: solid 1px var(--darker);
}
html::-webkit-scrollbar-thumb:horizontal {
  background-image: url(/icons/h.png), linear-gradient(var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
  border: solid 1px var(--darker);
}
html::-webkit-scrollbar-thumb:hover {
  background: url(/icons/vh.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}
html::-webkit-scrollbar-thumb:horizontal:hover {
  background: url(/icons/hh.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}
html::-webkit-scrollbar-thumb:active {
  background: url(/icons/vh.png), linear-gradient(to left, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}
html::-webkit-scrollbar-thumb:horizontal:active {
  background: url(/icons/hh.png), linear-gradient(to top, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}
html::-webkit-scrollbar-corner {
  background-image: var(--dark);
}

html::-webkit-scrollbar-button:single-button:vertical {
  height: 20px;
  border: solid 1px var(--darker);
}

html::-webkit-scrollbar-button:single-button:vertical:decrement {
  background: url(/icons/u.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:vertical:increment {
  background: url(/icons/d.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:horizontal {
  width: 20px;
  border: solid 1px var(--darker);
}

html::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background: url(/icons/l.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:horizontal:increment {
  background: url(/icons/r.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background: url(/icons/uh.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  background: url(/icons/dh.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  background: url(/icons/lh.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  background: url(/icons/rh.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  background: url(/icons/uh.png), linear-gradient(to left, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:vertical:increment:active {
  background: url(/icons/dh.png), linear-gradient(to left, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
  background: url(/icons/lh.png), linear-gradient(to top, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}

html::-webkit-scrollbar-button:single-button:horizontal:increment:active {
  background: url(/icons/rh.png), linear-gradient(to top, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}



div::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}
div::-webkit-scrollbar-track {
  box-shadow: inset 3px 3px 3px #00000055; 
  background-color: var(--light);
  border: solid 1px var(--darker);
}
div::-webkit-scrollbar-track:vertical {
  border-top: 0px;
  border-bottom: 0px;
}
div::-webkit-scrollbar-track:horizontal {
  border-left: 0px;
  border-right: 0px;
}
div::-webkit-scrollbar-thumb {
  background-image: url(/icons/v.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
  border: solid 1px var(--darker);
}
div::-webkit-scrollbar-thumb:horizontal {
  background-image: url(/icons/h.png), linear-gradient(var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
  border: solid 1px var(--darker);
}
div::-webkit-scrollbar-thumb:hover {
  background: url(/icons/vh.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}
div::-webkit-scrollbar-thumb:horizontal:hover {
  background: url(/icons/hh.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}
div::-webkit-scrollbar-thumb:active {
  background: url(/icons/vh.png), linear-gradient(to left, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}
div::-webkit-scrollbar-thumb:horizontal:active {
  background: url(/icons/hh.png), linear-gradient(to top, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}
div::-webkit-scrollbar-corner {
  background-image: var(--dark);
}

div::-webkit-scrollbar-button:single-button:vertical {
  height: 20px;
  border: solid 1px var(--darker);
}

div::-webkit-scrollbar-button:single-button:vertical:decrement {
  background: url(/icons/u.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:vertical:increment {
  background: url(/icons/d.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:horizontal {
  width: 20px;
  border: solid 1px var(--darker);
}

div::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background: url(/icons/l.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:horizontal:increment {
  background: url(/icons/r.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background: url(/icons/uh.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  background: url(/icons/dh.png), linear-gradient(to right, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  background: url(/icons/lh.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  background: url(/icons/rh.png), linear-gradient(to bottom, var(--light), var(--dark));
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  background: url(/icons/uh.png), linear-gradient(to left, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:vertical:increment:active {
  background: url(/icons/dh.png), linear-gradient(to left, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
  background: url(/icons/lh.png), linear-gradient(to top, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}

div::-webkit-scrollbar-button:single-button:horizontal:increment:active {
  background: url(/icons/rh.png), linear-gradient(to top, var(--light), var(--dark));
  box-shadow: inset 3px 3px 3px #00000055;
  background-repeat: no-repeat;
  background-position: center;
}