/*--- + font imports start + ---*/
 @font-face {
     font-family: planet bubble;
     src: url(https://cinni.net/fonts/PLANB__.TTF); /* header font */
}

 @font-face {
     font-family: starlight;
     src: url(https://dl.dropbox.com/s/cfcp07kvx3qut4s/starlight.ttf); /* body font */
}
/*--- + font imports end + ---*/


/*--- + css variables start + ---*/
 :root {
     --primary: #60f0ee;
     --secondary: #B8FAF9;
     --text: #4088bd;
     --link-color: #86efee;
     --container: #fff;
}
/*--- + css variables end + ---*/


/*--- + basic customization start + ---*/
 html {
     height: 100%;
     scrollbar-color: var(--primary) var(---container);
     scrollbar-width: 20px;
}

 body:before {
     background-image:url(/personallayouts/v6/images/grid.png);
     background-attachment:scroll;
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: auto;
     min-height: 100vh;
     z-index: -1;
}

 body {
     background-image: linear-gradient(0deg,#ECFFFF 0%,#CAFFFF 100%)!important;
     background-color: var(--primary);
     background-attachment:fixed;
     color:var(--text);
     font-family:starlight, comic sans ms;
     font-size:14px;
     padding-bottom:50px!important;
    /* 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;
}

p {
  color:var(--text);
}

 a, a:link, a:visited {
     color:var(--primary);
}

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

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

 h1, h2, h3, h4, h5, h6 {
     font-family:planet bubble;
     margin:5px;
}

 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;
}

 ::-webkit-scrollbar-thumb {
     background-color: var(--primary);
     border-radius: 10px;
}

 ::-webkit-scrollbar-track {
     background-color: var(--container);
     border-radius: 10px;
}

 meow {
     font-weight: bold;
     font-size: 1em;
     color: white;
     text-shadow: -1px 0 var(--text), 0 1px var(--text), 1px 0 var(--text), 0 -1px var(--text);
     background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
     border-radius: 1em;
}
/*--- + basic customization end + ---*/


/*--- + containers + boxes start + ---*/
 #container {
     width:1100px;
     margin-left:auto;
     margin-right:auto;
     margin-top:50px;
     position:relative;
     display:flex;
     flex-direction:column;
     align-items:center;
}

 #header {
     background-image:url(/personallayouts/v6/images/header.gif);
     background-repeat:no-repeat;
     width: 973px;
     height: 231px;
     padding:60px;
}

 #sillymarquee {
     background-color:var(--container);
     border: 7px solid var(--primary);
     border-radius: 35px;
     border-bottom-left-radius:0;
     border-bottom-right-radius:0;
     border-bottom:0;
     padding:10px;
     padding-left:2px;
     padding-right:2px;
     margin-left:13px;
     margin-top:20px;
     width:1047px;
}

 #sidebar {
     background-color:var(--container);
     border: 7px solid var(--primary);
     border-right: 5px solid var(--primary);
     border-radius: 35px;
     border-top-left-radius:0;
     border-top-right-radius:0;
     border-bottom-right-radius:0;
     padding:15px;
     padding-left:5px;
     padding-right:5px;
     width:270px;
     margin-left:13px;
}

#sidebar img {
  user-drag:none;
  -webkit-user-drag:none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 #main {
     background-color:var(--container);
     border: 7px solid var(--primary);
     border-radius: 35px;
     border-left:0;
     border-top-right-radius:0;
     border-top-left-radius:0;
     border-bottom-left-radius:0;
     padding:25px;
     padding-top:15px;
     padding-bottom:15px;
     width:716px;
}

 #footer {
     background-image: url(/personallayouts/v6/images/footer.png);
     background-repeat: no-repeat;
     width: 973px;
     height: 83px;
     padding: 60px;
     margin-top: 20px;
     display:flex;
     align-items:center;
}

 #footer img {
  user-drag:none;
  -webkit-user-drag:none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }

 #navlink a:not(#selfinsertwebring) {
     color:var(--text);
     text-decoration:none;
     display: inline-block;
     transition: .2s ease;
}

 #navlink a:hover:not(#selfinsertwebring) {
     font-style:normal;
     transform: translateX(5%);
}
/*--- + containers + boxes end + ---*/


/*--- + statuscafe widget start + ---*/
 #statuscafe {
     padding: 0.5em;
     border: 2px dashed var(--secondary);
     padding: 10px;
     border-radius: 10px;
     text-align:left;
}

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

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

 #statuscafe-content {
     margin: 0 1em 0.5em 1em;
}
/*--- + statuscafe widget end + ---*/


/*--- + tooltip edits start + ---*/
 #s-m-t-tooltip {
     max-width: 225px;
     z-index: 99999999 !important;
     padding: 8px;
     margin: -20px 10px;
     background-color: #fff;
     border: 5px solid var(--primary);
     border-radius:10px;
}
/*--- + tooltip edits + ---*/


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


/*--- + scanlines start + ---*/
 .lines {
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
     pointer-events: none;
     z-index: 999999999999999999999999999999999999999999999999999999999999;
     opacity: 0.05;
}

 .lines:before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     pointer-events: none;
     background: linear-xgradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
     background-size: 100% 4px;
     will-change: background, background-size;
     animation: scanlines 0.2s linear infinite;
}

 @keyframes scanlines {
     from {
         background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .5) 51%);
         background-size: 100% 4px;
    }
     to {
         background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
         background-size: 100% 4px;
    }
}
/*--- + scanlines end + ---*/