html {
  scrollbar-color: rgb(255, 0, 149) black;
}
body {
  background-image:url("./graphics/heavengatetile.jpg");
  cursor:url("./8165a.gif"),auto;
  font-family: 'Comic Sans MS';
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(255, 0, 149); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(195, 0, 255); 
}
.fof {
  display:block;
  box-align:center;
  margin-left:auto;
  margin-right:auto;
  margin-top:100px;
}
.flex {
  display:flex;
}
main {
  display:block;
  width:1205px;
  margin-left:auto;
  margin-right:auto;
}
.blinkiedivider {
  display:block;
  align:center;
  max-width:1080px;
  min-width:1080px;
  margin-left:auto;
  margin-right:auto;
}
.banner {
  position:relative;
}
.batman {
  position:absolute;
  right:300px;
}
/*-- HEADER --*/
header {
  margin:3px;
}
.header-left {
  border:5px ridge rgb(255, 0, 191);
  border-radius:10px;
  display:block;
  background-image:url("./graphics/checker-moving.gif");
  width:60%;
  position:relative;
}
.mood {
  position:absolute;
  top:33px;
  right:20px;
  border:5px solid rgb(255, 0, 191);
  border-radius:5px;
}
.spiderman {
  position:absolute;
  top:-71px;
  left:430px;
  width:224px;
  height:171px;
}
.counter {
  position:absolute;
  top:58px;
  left:20px;
}
.header-right {
  border:5px ridge rgb(0, 225, 255);
  border-radius:10px;
  width:40%;
  background-image:url("./graphics/rbowlinebg.gif");
}
.hright1 {
  width:27%;
  position:relative;
}
.news, .todo {
  margin-top:0;
  margin-left:10px;
  text-decoration-line: underline;
  color:rgb(255, 0, 191);
  text-shadow: -1px 0 rgb(255, 230, 0), 0 1px rgb(255, 230, 0), 1px 0 rgb(255, 230, 0), 0 -1px rgb(255, 230, 0), 2px 2px 4px #1c0069;
}
.catnews {
  position:absolute;
  height:130px;
  left:-5px;
  top:20px;
}
.hright2 {
  width:73%;
  height:125px;
  overflow:auto;
}
.newstable {
  border-collapse: collapse;
  border:3px groove rgb(255, 230, 0);
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  background-image:url("./graphics/lightbluechecker.png");
  color:rgb(33, 0, 85);
  text-shadow: -2px 0 #9DFCE7, 0 2px #9DFCE7, 2px 0 #9DFCE7, 0 -2px #9DFCE7, -2px 2px #9DFCE7, 2px 2px #9DFCE7, 2px -2px #9DFCE7, -2px -2px #9DFCE7;
}
.newstable a {
  color:rgb(165, 0, 110);
  text-decoration: none;
  text-shadow: -2px 0 #9DFCE7, 0 2px #9DFCE7, 2px 0 #9DFCE7, 0 -2px #9DFCE7, -2px 2px #9DFCE7, 2px 2px #9DFCE7, 2px -2px #9DFCE7, -2px -2px #9DFCE7;
}
.newsdate {
  padding-right: 5px;
  padding-left:3px;
}
.newsupdate {
  width:auto;
  padding-left:3px;
  padding-bottom:3px;
  font-size: 14px;
  font-weight: bold;
}
/*-- MAIN --*/
.main-middle, .main-left, .main-right {
  margin:3px;
}
.main-left, .main-right {
  width:25%;
}
.main-middle {
  width:75%;
  margin-left:-3px;
  margin-right:-3px;
  margin-top:-5px;
}
/*-- LEFT SIDEBAR --*/
.left1 {
  border:5px ridge rgb(0, 225, 255);
  border-radius:10px;
  background-image:url("./graphics/waterlo.gif");
  margin-bottom:6px;
  text-align: center;
  padding-top:5px;
  padding-bottom:10px;
}
.navbox {
  background-color: #81fbff70;
  margin:0;
  padding-bottom:5px;
  margin-left:30px;
  margin-right:30px;
  margin-top:5px;
  border:3px dotted #00ffd5;
  border-radius:10px;
  box-shadow:2px 2px 4px #0073df,2px -2px 4px #0073df,-2px 2px 4px #0073df,-2px -2px 4px #0073df;
}
.navlink {
  color:#f7fffb;
  font-weight: bold;
  font-size: 17px;
  text-shadow: -1px 0 rgb(255, 0, 221), 0 1px rgb(111, 0, 255), 1px 0 rgb(0, 255, 242), 0 -1px rgb(255, 217, 0), 2px 2px 4px #1c0069
}
.left2 {
  border:5px ridge rgb(255, 0, 191);
  border-radius:10px;
  background-image: url('graphics/1514284mnr8cr31p7.gif');
  max-width: 230px;
  height:207px;
  margin-bottom:6px;
}
.moonphase {
  display:block;
  align:center;
  margin:auto;
  margin-top: 5px;
}
.left3 {
  border:5px ridge rgb(0, 225, 255);
  border-radius:10px;
  background-image:url("graphics/back-299.gif");
  margin-bottom:6px;
  padding-top:5px;
  padding-bottom:10px;
}
.todolist {
  list-style-image: url('graphics/cat wiggle.gif');
  margin: 0;
  margin-top: -10px;
  color:#36009b;
}
.left4 {
  border:5px ridge rgb(255, 0, 191);
  border-radius:10px;
  background-image: url("graphics/2808844oelllvsuew.jpg");
  margin-bottom:6px;
}

/*-- RIGHT SIDEBAR --*/
.right1 {
  border:5px ridge rgb(255, 0, 191);
  border-radius:10px;
  background-image:url("graphics/sparklespace.gif");
  margin-bottom:6px;
  position: relative;
  height: 275px;
  width: 220px;
  padding:5px;
}

/*-- Start gay shit (music player) --*/

.music-body {
  height: auto;
  margin: 0;
  font-family: "Comic Sans MS", Lato;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.music-container {
  display: flex;
  flex-direction: row;
  padding: 0px;
  margin-left: 0px;
  position: relative;
  margin: 0px;
  box-sizing: border-box;
  right:4px;
}

.music-container p {
  margin: 0px;
}

.music-container.play {     /*--.img-container img--*/
  animation-play-state: running;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-top: 3px;
  position: absolute;
  left: -49px;
  top: 98px;
}

.action-btn {
  background: none;
  border: 0;
  color: white;
  font-size: 20px;
  padding: 0px 10px;
  margin: 0 0px;
}

.music-info {
  position: absolute;
  top: -10px;
  margin-left: -104px;
  z-index: 2;
  width: 210px;
}

.music-info h1 {
  margin: 0;
  font-size: 18px;
  font-style: italic;
  color: rgb(255, 183, 0);
  text-decoration: none;
}

.progress-container {
  background-color: rgba(255, 0, 170, 0.479);
  border-radius: 0px;
  margin: 8px 0;
  height: 5px;
  width: 100%;
  z-index: 2;
  margin-left: 3px;
  position: relative;
}

.progress {
  background-color: rgb(255, 230, 0);
  background-image: url("graphics/progress bar.png");
  object-fit: contain;
  border-radius: 0px;
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;
  z-index: 2;
  position: relative;
}

.playlist {
  position: absolute;
  display: inline;
  margin-top: 150px;
  width: 204px;
  height: 100px;
  margin-left: -101px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: rgb(255, 0, 170);
  border:3px ridge yellow;
  border-radius:10px;
  z-index: 1;
}

.playlist ul, .playlist li {
  width: 100%;
  margin-left: -7px;
  margin-top: 3px;
  list-style-image: url('graphics/cat DANCE.gif');
  
}

.playlist li {
  font-size: 12.5px;
  width: 100%;
  vertical-align: middle;
  color:aqua
}

.playlist li:hover {
  background: rgba(153, 0, 255, 0.137);
}

.activeSong {
  background: rgba(85, 0, 196, 0.336);
}

.trackDuration {
  position: absolute; 
  right: 5px;
  margin-top: 3.5px;
  font-size: 10px;
}

.trackInfo {
  display: inline-block;
  width: 130px;
  word-wrap: break-word;
  margin-left: -5px;
}

/*-- End gay shit --*/

.right2 {
  border:5px ridge rgb(0, 225, 255);
  border-radius:10px;
  background:black;
  margin-bottom:6px;
}
.right3 {
  border:5px ridge rgb(255, 0, 191);
  border-radius: 10px;
  background: black;
  margin-bottom:6px;
}
.right4 {
  border:5px ridge rgb(0, 225, 255);
  border-radius:10px;
  background-image:url("./graphics/jhfghfghghf.png");
  background-size: cover;
  margin-bottom:6px;
}
.chatbox {
  margin-top:0;
  margin-left:10px;
  text-decoration-line: underline;
  color:rgb(255, 230, 0);
  text-shadow: -1px 0 rgb(0, 225, 255), 0 1px rgb(0, 225, 255), 1px 0 rgb(0, 225, 255), 0 -1px rgb(0, 225, 255), 2px 2px 4px #1c0069;
}
/*-- MIDDLE SECTION --*/
.middle1 {
  border:5px ridge rgb(183, 0, 255);
  border-radius:10px;
  background: url("./graphics/cmyk squares.png");
  margin-bottom:6px;
  padding-bottom:10px;
}
.welcome, .aboutme, .quizzes, .webbadges, .buttons, .userboxes, .bumperstickers, .userbars, .sites {
  margin-top:0;
  margin-left:10px;
  text-decoration-line: underline;
  color:rgb(0, 225, 255);
  text-shadow: -1px 0 rgb(183, 0, 255), 0 1px rgb(183, 0, 255), 1px 0 rgb(183, 0, 255), 0 -1px rgb(183, 0, 255), 2px 2px 4px #1c0069;
}
.welcomepic {
  float:right;
  position:relative;
  bottom:40px;
  right:-15px;
  margin-left:-30px;
  margin-bottom:-65px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.magpie {
  position:absolute;
  float:right;
  top:-60px;
  right:-20px;
  margin-left:-30px;
}
.homeabout, .about, .funfacts, .quizbox, .linkbox, .picrewbox {
  border:5px dotted rgb(183, 0, 255);
  border-radius:15px;
  background:rgba(255, 255, 255, 0.75);
  margin-left:10px;
  margin-right:10px;
  margin-top:-10px;
  color:#36009b;
  position:relative;
}
.linkbox a {
  color:rgb(0, 149, 235);
}
.funfacts {
  margin-bottom: 10px;
  padding:10px;
}
.meow {
  position:absolute;
  bottom:-38px;
  right:-20px;
}
.pollmiddle2 {
  border:5px ridge rgb(255, 230, 0);
  border-radius:10px;
  background: url("./graphics/spaghetti.jpg");
  margin-bottom:6px;
  margin-top: 3px;
  float:left;
  min-height: 315px;
  max-height: 315px;
  width:368px;
}
.polls, .funfacttitle, .blinkies, .stamps, .bookmarks, .picrew {
  margin-top:0;
  margin-left:10px;
  text-decoration-line: underline;
  color:rgb(111, 0, 255);
  text-shadow: -1px 0 rgb(255, 0, 191), 0 1px rgb(255, 0, 191), 1px 0 rgb(255, 0, 191), 0 -1px rgb(255, 0, 191), 2px 2px 4px #0a0027;
}
.pollbox {
  margin-left: 5px;
  margin-top:-15px;
  max-height: 265px;
  width:351px;
  border: 3px ridge rgb(0, 225, 255);
  border-radius:10px;
  overflow:scroll;
}
.middle2 {
  border:5px ridge rgb(255, 230, 0);
  border-radius:10px;
  background-image:url("graphics/rbgrid5.png");
  margin-bottom:6px;
  margin-top: 3px;
  padding-bottom: 10px;
}
.likes, .dislikes, .funfactsbox {
  margin-left: 10px;
}
.likes, .dislikes {
  width:50%;
  margin:0px;
}
.funfactsbox {
  width:50%;
  margin:0px;
}
.funfactsbox2 {
  margin:0px;
  margin-top: 5px;
}
.likedisliketitle {
  width:50%;
}
.middle3 {
  border:5px ridge rgb(183, 0, 255);
  border-radius:10px;
  background: url("./graphics/cmy leopard.jpg");
  margin-bottom:6px;
  padding-bottom:10px;
}
.quizbox {
  padding-top: 17px;
  padding-bottom: 10px;
  position:relative;
  height: 600px;
  overflow: scroll;
}
.mainad {
  border: rgb(89, 0, 255) 2px solid;
  height:180px;
  width:224px;
}
.saltiead {
  border: rgb(255, 0, 0) 2px solid !important;
}
.gobboad {
  border: rgb(89, 0, 255) 2px solid;
  position: absolute;
  top: 0;
  left: 5px;
  height:180px;
  opacity:0;
}
.lilyad {
  border: rgb(123, 124, 201) 2px solid;
  position: absolute;
  top: 0;
  left: 238px;
  height:180px;
  opacity:0;
}
.gobboad:hover, .lilyad:hover {
  opacity:1;
}
.imgcollection:hover {
  position: relative;
  image-rendering: pixelated;
  z-index: 1;
  transform: scale(2);
  background-color: transparent;
  filter: drop-shadow(3px 3px 0px #00000033);
  transition: .1s;
}
.middle4 {
  border:5px ridge rgb(255, 230, 0);
  border-radius:10px;
  background-image:url("graphics/rbgrid5.png");
  margin-bottom:6px;
  margin-top: 3px;
  padding-bottom: 10px;
}
.picrewbox {
  height:650px;
  overflow: scroll;
}
.picrewimg {
  width:32%;
  border-radius: 10px;
}
.dollimg:hover {
  animation: shake 2s;
  animation-iteration-count: infinite; 
}
/*-- FOOTER --*/
.footer {
  border:5px ridge rgb(183, 0, 255);
  border-radius:10px;
  margin:3px;
  background-image: url("graphics/bluebrick.jpg");
}
.leftfooter {
  width:70%;
  text-align:center;
  display:block;
}
.rightfooter {
  width:30%;
}
/*-- RAINBOW TEXT --*/
.animated_rainbow_1 {
  font-size: 42px;
  font-family: 'Comic Sans MS' Black, Gadget;
  background-image: -webkit-linear-gradient(left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
  -webkit-animation: animatedBackground_a 5s linear infinite alternate;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #0000;
  background-clip: text;
}

@keyframes animatedBackground_a {
  0% { background-position: 0 0 }
  100% { background-position: -500px 0 }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}