/*--- + css variables start + ---*/

:root {
   --primary: #60f0ee;
   --secondary: #a1edc1;
   --text: #4088bd;
   --link-color: #86efee;
   --link-color-hovered: #aefdcf;
   --link-color-active: #86efee;
}

/*--- + css variables end + ---*/

/*--- + font imports start + ---*/

@font-face {
   font-family: billo;
   src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF);} /* header font */

@font-face {
   font-family: "balsamiq sans";
   src: url(https://dl.dropbox.com/scl/fi/702ux1krisargxk9jdset/BalsamiqSans-Regular.ttf?rlkey=gcfmsac9d35id84fb643guqg1&dl=0);} /* body font */

/*--- + font imports end + ---*/

/*--- + basic customization start + ---*/

body {
   background-image: url(https://i.imgur.com/8tfKM34.png);
   margin: auto;
   font-family: balsamiq sans !important;
   font-size: 16px !important;
   color: var(--text) !important;
   overflow-x: hidden;

   /* animates the background */
   -webkit-animation: woof 10s linear infinite;
   -moz-animation: woof 10s linear infinite;
   -o-animation: woof 10s linear infinite;
   animation: woof 10s linear infinite;

   /* prevents text from adjusting on mobile devices (beat it, mobile compatibility) */
   text-size-adjust: none;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
}

@keyframes woof {
   from {
      background-position: 0 0;
   }

   to {
      background-position: 200px 200px;
   }
}

a {
   color: var(--link-color);
}

a:hover {
   color: var(--link-color-hovered);
   font-style: italic;
}

a:active {
   color: var(--link-color-active);
}

.pixels img {
   display: inline-block;
   transition: 0.2s ease;
}
.pixels img:hover {
   transform: translateY(-9%);
}

.wappystar {
   font-family: billo;
   margin: 0 !important;
   padding: 3px !important;
}

meow {
   font-weight: bold;
   font-size: 1em;
   color: white;
   text-shadow: -1px 0 #4088bd, 0 1px #4088bd, 1px 0 #4088bd, 0 -1px #4088bd;
   background: linear-gradient(90deg, #60f0ee 0%, #a1edc1 100%);
   border-radius: 1em;
}

/* rainbow hover links */
.squidparty {
   -webkit-animation: ikkan 5s linear infinite;
}

@keyframes ikkan {
   0% {
      color: #60f0ee;
   }
   50% {
      color: #a1edc1;
   }
   100% {
      color: #60f0ee;
   }
}

::selection {
   color: #fff;
   background-color: #86efee;
}

/* windows is in danger */
::-webkit-scrollbar {
   width: 16px;
}

::-webkit-scrollbar:horizontal {
   height: 17px;
}

::-webkit-scrollbar-corner {
   background: #eee;
}
::-webkit-scrollbar-track:vertical {
   background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-track:horizontal {
   background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-thumb {
   background-color: #eee;
   border: 1px solid #8e8f8f;
   border-radius: 3px;
   box-shadow: inset 0 -1px 1px hsla(0, 0%, 100%, 0.8), inset 0 1px 1px #fff;
}

::-webkit-scrollbar-thumb:vertical {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC")
         no-repeat 50%,
      linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
}

::-webkit-scrollbar-thumb:horizontal {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC")
         no-repeat 50%,
      linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
}

::-webkit-scrollbar-thumb:hover:vertical {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC")
         no-repeat 50%,
      linear-gradient(90deg, #e5f4fd 45%, #b3e0f9 0);
   border-color: #3c7fb1;
}

::-webkit-scrollbar-thumb:hover:horizontal {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC")
         no-repeat 50%,
      linear-gradient(180deg, #e5f4fd 45%, #b3e0f9 0);
   border-color: #3c7fb1;
}

::-webkit-scrollbar-thumb:active:vertical {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC")
         no-repeat 50%,
      linear-gradient(90deg, #cee9f8 45%, #86c6e8 0);
   border-color: #6d91ab;
}

::-webkit-scrollbar-thumb:active:horizontal {
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC")
         no-repeat 50%,
      linear-gradient(180deg, #cee9f8 45%, #86c6e8 0);
   border-color: #6d91ab;
}

::-webkit-scrollbar-button:horizontal:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:vertical:start:increment {
   display: none;
}

::-webkit-scrollbar-button {
   border: 1px solid transparent;
}

::-webkit-scrollbar-button:vertical {
   height: 17px;
}

::-webkit-scrollbar-button:vertical:start {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik04IDZIN3YxSDZ2MUg1djFINHYxaDdWOWgtMVY4SDlWN0g4VjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-button:vertical:end {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMSA2SDR2MWgxdjFoMXYxaDF2MWgxVjloMVY4aDFWN2gxVjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-button:horizontal {
   width: 16px;
}

::-webkit-scrollbar-button:horizontal:start {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik05IDRIOHYxSDd2MUg2djFINXYxaDF2MWgxdjFoMXYxaDFWNFoiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4="),
      linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-button:horizontal:end {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik03IDRINnY3aDF2LTFoMVY5aDFWOGgxVjdIOVY2SDhWNUg3VjRaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-button:hover {
   background-color: #eee;
   border-color: #8e8f8f;
   border-radius: 3px;
   box-shadow: inset 0 -1px 1px hsla(0, 0%, 100%, 0.8), inset 0 1px 1px #fff;
}

::-webkit-scrollbar-button:hover:vertical {
   height: 17px;
}

::-webkit-scrollbar-button:hover:vertical:start {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik04IDZIN3YxSDZ2MUg1djFINHYxaDdWOWgtMVY4SDlWN0g4VjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(90deg, #e5f4fd 45%, #b3e0f9 0);
   border-color: #3c7fb1;
}

::-webkit-scrollbar-button:hover:vertical:end {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMSA2SDR2MWgxdjFoMXYxaDF2MWgxVjloMVY4aDFWN2gxVjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(90deg, #e5f4fd 45%, #b3e0f9 0);
   border-color: #3c7fb1;
}

::-webkit-scrollbar-button:hover:horizontal {
   width: 16px;
}
::-webkit-scrollbar-button:hover:horizontal:start {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik05IDRIOHYxSDd2MUg2djFINXYxaDF2MWgxdjFoMXYxaDFWNFoiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4="),
      linear-gradient(180deg, #e5f4fd 45%, #b3e0f9 0);
   border-color: #3c7fb1;
}
::-webkit-scrollbar-button:hover:horizontal:end {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik03IDRINnY3aDF2LTFoMVY5aDFWOGgxVjdIOVY2SDhWNUg3VjRaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(180deg, #e5f4fd 45%, #b3e0f9 0);
   border-color: #3c7fb1;
}

::-webkit-scrollbar-button:active {
   background-color: #eee;
   border-color: #8e8f8f;
   border-radius: 3px;
   box-shadow: inset 0 -1px 1px hsla(0, 0%, 100%, 0.8), inset 0 1px 1px #fff;
}

::-webkit-scrollbar-button:active:vertical {
   height: 17px;
}

::-webkit-scrollbar-button:active:vertical:start {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik04IDZIN3YxSDZ2MUg1djFINHYxaDdWOWgtMVY4SDlWN0g4VjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(90deg, #cee9f8 45%, #86c6e8 0);
   border-color: #6d91ab;
}

::-webkit-scrollbar-button:active:vertical:end {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMSA2SDR2MWgxdjFoMXYxaDF2MWgxVjloMVY4aDFWN2gxVjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(90deg, #cee9f8 45%, #86c6e8 0);
   border-color: #6d91ab;
}

::-webkit-scrollbar-button:active:horizontal {
   width: 16px;
}

::-webkit-scrollbar-button:active:horizontal:start {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik05IDRIOHYxSDd2MUg2djFINXYxaDF2MWgxdjFoMXYxaDFWNFoiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4="),
      linear-gradient(180deg, #cee9f8 45%, #86c6e8 0);
   border-color: #6d91ab;
}

::-webkit-scrollbar-button:active:horizontal:end {
   background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik03IDRINnY3aDF2LTFoMVY5aDFWOGgxVjdIOVY2SDhWNUg3VjRaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),
      linear-gradient(180deg, #cee9f8 45%, #86c6e8 0);
   border-color: #6d91ab;
}

/* windows is in danger */

/*--- + basic customization end + ---*/

/*--- + png decorations start + ---*/

#header {
   background-image: url(https://i.imgur.com/XGohdv0.png);
   width: 1190px;
   height: 302px;
   position: absolute;
   top: -239px;
   left: -66px;
}

/* this is what makes the logo float!!! */
#float {
   animation-name: floating;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
}

@keyframes floating {
   0% {
      transform: translate(0, 0px);
   }
   50% {
      transform: translate(0, 8px);
   }
   100% {
      transform: translate(0, -0px);
   }
}

#cloudright {
   background-image: url(https://i.imgur.com/TYeNNn1.png);
   width: 229px;
   height: 127px;
   position: absolute;
   z-index: 999;
   top: -31px;
   right: -73px;
}

#cloudright2 {
   background-image: url(https://i.imgur.com/GQp2x9n.png);
   width: 49px;
   height: 115px;
   position: absolute;
   z-index: 999;
   right: -57px;
   top: 79px;
}

#cloudleft {
   background-image: url(https://i.imgur.com/ymiBk3E.png);
   width: 247px;
   height: 145px;
   position: absolute;
   z-index: 999;
   top: -49px;
   left: -88px;
}

#cloudleft2 {
   background-image: url(https://i.imgur.com/QUCNZ3K.png);
   width: 53px;
   height: 163px;
   position: absolute;
   z-index: 999;
   top: 79px;
   left: -58px;
}

#frills1 {
   background-image: url(https://i.imgur.com/wy9vMOG.png);
   width: 32px;
   height: 952px;
   position: absolute;
   z-index: -1;
   top: 33px;
   left: -32px;
}

#frills2 {
   background-image: url(https://i.imgur.com/wy9vMOG.png);
   width: 32px;
   height: 952px;
   position: absolute;
   z-index: -1;
   top: 33px;
   left: 1010px;
   transform: scaleX(-1);
}

#footerclouds1 {
   background-image: url(https://i.imgur.com/aejvElW.png);
   width: 1384px;
   height: 319px;
   position: absolute;
   z-index: -1;
   top: 703px;
   left: -182px;
}

#footerclouds2 {
   background-image: url(https://i.imgur.com/nrLTl9t.png);
   width: 1126px;
   height: 268px;
   position: absolute;
   z-index: 99999;
   left: -46px;
   top: 875px;
}

/*--- + png decorations end + ---*/

/*--- + content boxes start + ---*/

/* the stuff that actually makes everything in the middle */
#container {
   background-color: white;
   border: 1px solid #fff;
   border-radius: 4px;
   margin-top: 250px;
   width: 1000px;
   height: auto;
   padding: 5px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 150px;
}
/* the stuff that actually makes everything in the middle */

/* marquee thing lolz */
#sillymarquee {
   background-color: white;
   border: 1px solid #86efee;
   border-radius: 5px;
   padding: 3px;
   padding-top: 10px;
   z-index: 9999;
   margin-bottom: 8px;
   margin-left: auto;
   margin-right: auto;
   width: 746px;
}
/* marquee thing lolz */

/* left navbar */
#leftnav {
   float: left;
}

#navbar {
   width: 210px;
   background: white;
   padding: 5px;
   padding-bottom: 10px;
   border: 1px solid #86efee;
   border-radius: 5px;
   height: auto;
   margin-bottom: 8px;
}

#webrings {
   margin-top: 6px;
   width: 204px;
   background: white;
   padding: 8px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-radius: 5px;
   border: 1px #86efee solid;
   height: 176px;
}
/* left navbar */

/* right navbar */
#rightnav {
   float: right;
}

#sitestatus {
   width: 204px;
   background: white;
   padding: 8px;
   border: 1px solid #86efee;
   border-radius: 5px;
   height: auto;
   margin-bottom: 8px;
}

#todolist {
   margin-top: 6px;
   width: 204px;
   background: white;
   padding: 8px;
   padding-bottom: 10px;
   border-radius: 5px;
   border: 1px #86efee solid;
   height: 155px;
}

#randomgif {
   margin-top: 6px;
   width: 204px;
   background: white;
   padding: 8px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-radius: 5px;
   border: 1px #86efee solid;
   height: 209px;
}

#sitebtn {
   margin-top: 6px;
   width: 204px;
   background: white;
   padding: 8px;
   padding-top: 10px;
   padding-bottom: 10px;
   border-radius: 5px;
   border: 1px #86efee solid;
   height: 160px;
}

/* right navbar */

#content {
   border: 1px solid #86efee;
   border-radius: 5px;
   background: white;
   margin-left: auto;
   margin-right: auto;
   padding: 5px;
   width: 532px;
   height: auto;
   margin-bottom: 8px;
}

#footer {
   border: 1px solid #86efee;
   border-radius: 5px;
   background: white;
   margin-top: 8px;
   position: sticky;
}

/* smaller boxes */

#cbox,
#updates {
   border: 1px #86efee solid;
   background: white;
   margin-left: 6px;
   border-radius: 5px;
   padding: 10px;
   width: 250px;
   height: 272px;
   overflow-y: auto;
   margin-bottom: 8px;
}

#smallboxwrapper {
   display: flex;
   width: 550px;
   justify-content: center;
}

#cafe {
   width: 532px;
   background: white;
   padding: 5px;
   border: 1px solid #86efee;
   border-radius: 5px;
   height: auto;
   margin-left: auto;
   margin-right: auto;
}

/*--- + content boxes end + ---*/

/*--- + ringnote start + ---*/
#ringnote table {
   width: 172px;
   color: black;
   height: 100px;
   font-family: flipnote-hatena-font;
}
/*--- + ringnote end + ---*/

/*--- + misc stuff start + ---*/

/*--- + tooltip edits + ---*/
#s-m-t-tooltip {
   max-width: 200px;
   z-index: 99999999 !important;
   padding: 3px;
   margin: -20px 10px;
   background-color: #fff;
   font-size: 15px;
   border: 2px solid transparent;
   border-image: linear-gradient(to bottom right, #60f0ee 0%, #a1edc1 100%);
   border-image-slice: 1;
}

/*--- + statuscafe widget + ---*/
#statuscafe {
   padding: 0.5em;
   border: 1px dashed #86efee;
   padding: 10px;
   border-radius: 5px;
}

#statuscafe a {
   color: #60f0ee;
}

#statuscafe-username {
   margin-bottom: 0.5em;
}

#statuscafe-content {
   margin: 0 1em 0.5em 1em;
}

/* customizable snowflake styling */
.snowflake {
   color: #fff;
   font-size: 1em;
   font-family: Arial;
}

@-webkit-keyframes snowflakes-fall {
   0% {
      bottom: -10%;
   }
   100% {
      bottom: 100%;
   }
}
@-webkit-keyframes snowflakes-shake {
   0% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }
   50% {
      -webkit-transform: translateX(80px);
      transform: translateX(80px);
   }
   100% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
   }
}
@keyframes snowflakes-fall {
   0% {
      bottom: -10%;
   }
   100% {
      bottom: 100%;
   }
}
@keyframes snowflakes-shake {
   0% {
      transform: translateX(0px);
   }
   50% {
      transform: translateX(80px);
   }
   100% {
      transform: translateX(0px);
   }
}
.snowflake {
   position: fixed;
   bottom: -10%;
   z-index: 9999999999;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default;
   -webkit-animation-name: snowflakes-fall, snowflakes-shake;
   -webkit-animation-duration: 10s, 3s;
   -webkit-animation-timing-function: linear, ease-in-out;
   -webkit-animation-iteration-count: infinite, infinite;
   -webkit-animation-play-state: running, running;
   animation-name: snowflakes-fall, snowflakes-shake;
   animation-duration: 10s, 3s;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
   animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
   left: 1%;
   -webkit-animation-delay: 0s, 0s;
   animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
   left: 10%;
   -webkit-animation-delay: 1s, 1s;
   animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
   left: 20%;
   -webkit-animation-delay: 6s, 0.5s;
   animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
   left: 30%;
   -webkit-animation-delay: 4s, 2s;
   animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
   left: 40%;
   -webkit-animation-delay: 2s, 2s;
   animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
   left: 50%;
   -webkit-animation-delay: 8s, 3s;
   animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
   left: 60%;
   -webkit-animation-delay: 6s, 2s;
   animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
   left: 70%;
   -webkit-animation-delay: 2.5s, 1s;
   animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
   left: 80%;
   -webkit-animation-delay: 1s, 0s;
   animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
   left: 90%;
   -webkit-animation-delay: 3s, 1.5s;
   animation-delay: 3s, 1.5s;
}

.blue::before, .blue > .title-bar {
   background-color: #31cece;
}

*:focus {
   outline: none!important;
}

.window[role=dialog] {
   z-index:9999999;
}