/* SITE STYLE by YUNI TANKAKUKA 
  let me just establish that this is not professional nor optimized styling. i do, however, like my silly site, so i will edit it however i feel like it! BLEH!!
  you can repurpose anything you like from the site, and if you can't read it might i suggest frequenting https://www.w3schools.com/css and /html to build a better site than me LOL
  anyways the organizing is for my sake since i tend to forget where things are. :P
*/

/* Font Shit */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Roboto:ital,wght@0,900;1,900&display=swap');

@font-face {
    font-family: 'Soul Ring PX';
    src: url('/font/soul-ring-8px.ttf');
}

.roboto-font {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lilita-one-regular {
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Variables and such */
:root {
  --site-bg-color: #000;
  --site-outline: #04f;
  --nav-thickness: 128px; /* max header height should be under 250px */
}

/* Main CSS */
body {
  margin: 8px;
  padding-top: calc(var(--nav-thickness) - 32px);
  padding-bottom: calc(var(--nav-thickness) - 32px);
  background-color: #000;
  color: #fff;
  font-family: Roboto;
  image-rendering: OptimizeSpeed;
  overflow-x: hidden;
}

a,
a:visited,
a:active {
  color: #E9F4FF;
  text-decoration: none;
}

a:hover {
  color: #08f;
  text-decoration: none;
}

hr {
  color: var(--site-outline);
}

h1 {
  color: #fff;
  font-family: Lilita One;
}

#page {
  background-color: #000000dd;
  width: calc(100% - var(--nav-thickness));
  max-width: 640px;
  border: 4px solid var(--site-outline);
  border-radius: 0 0 64px 0;
  padding: 32px;
  margin: 0 0 0 var(--nav-thickness);
  box-sizing: border-box;
  transition: .5s ease;
  z-index: 5;
}

.bg {
  background-color: #008;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("KTKN_BGTile.png");
  background-repeat: repeat;
  background-size: 1162px;
  background-blend-mode: darken;
  opacity: .5;
  animation: movingBackground 30s linear infinite;
  z-index: -99;
}
/* header elements */
#header { 
  background-color: #08f;
  background-image: url("centigifbanner.gif");
  background-repeat: repeat;
  background-size: 800px;
  background-blend-mode: normal;
  animation: movingHeader 20s linear infinite;
  width: 100%;
  height: var(--nav-thickness);
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 0 4px 0;
  border-color: var(--site-outline);
  z-index: 10;
}

#header #darkGradient{ 
  background: #020024;
  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 127, .90) 10%, rgba(0, 85, 255, .50) 50%, rgba(0, 141, 255, .30) 70%, rgba(85, 255, 255, 0) 100%);
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

#header #logo {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  padding: 0px 16px;
  position: fixed;
  bottom: 8px;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
}

#header #bar {
  background: #000;
  width: 100%;
  height: 36px;
  padding: 0px;
  position: fixed;
  bottom: 0px;
  z-index: 3;
  font-size: 24px;
  border-style: solid;
  border-width: 4px 0 0 0;
  border-color: #000;
}

#label {
  width: calc(100% - 400px);
  height: 64px;
  padding: 0px 8px;
  position: fixed;
  top: calc(var(--nav-thickness) - 80px);
  right: 0px;
  text-align: left;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  z-index: 12;
  box-sizing: border-box;
}

#label a:hover {
  color: #8ff;
  text-decoration: none;
}
#label h1 {
  font-size: 36px;
  -webkit-text-stroke: 8px black;
  paint-order: stroke fill;
}

#marquee-fake {
  bottom: 4px;
  width: 100%;
  position: fixed;
  height: 8px;	
  overflow: hidden;
  z-index: 3;
  padding: 0px;
  background-image: url("fakemarquee.png");
  background-repeat: repeat;
  background-size: 1200px;
  background-blend-mode: normal;
  animation: fakeMarquee 40s linear infinite;
}

@keyframes fakeMarquee {
  from { background-position: 0 0;}
  to { background-position: -1200px 0;}
}

/* Navigation */
#nav-side {
  background-color: #000;
  height: 100%;
  width: var(--nav-thickness);
  border: 4px solid var(--site-outline);
  border-width: 0 4px 0 0;
  padding: 4px;
  position: fixed;
  top: var(--nav-thickness);
  left: 0px;
  transition: .5s ease;
  z-index: 8;
}

#nav-sidebox {
  width: var(--nav-thickness);
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  left: 0;
  position: fixed;
  top: 0;
  list-style: none;
  font-size: 12px;
}

#nav-side body {
  padding: 0px;
  width: var(--nav-thickness);
  border-width: 0px;
} 

#nav-foot { 
  background-color: #000;
  width: 100%;
  height: 0px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 4px 0 0 0;
  border-color: var(--site-outline);
  z-index: 10;
  transition: height .5s ease;
}

#nav-footbox {
  box-sizing: border-box;
  min-height:  var(--nav-thickness);
  height: var(--nav-thickness);
  width: 100%;
  padding: 16px;
  overflow: hidden;
  left: 0;
  position: fixed;
  bottom: 0;
  list-style: none;
  font-size: 12px;
}

#nav-footbox body {
  padding: 0px;
  border-width: 0px;
} 

.nav-body {
  padding: 0px;
  border-width: 0px;
  width: 100%;
  height: 100%;
}

#nav-footbox li {
  float: left;
  margin: 2px 4px;
}

/* cool ass badge css */
#badge {
  display: inline-block;
  width: 88px;
  height: 35px;
  margin: 2px;
  color: #8ff;
}

#badge img {
  border-radius: 2px;
  width:88px;
  height:31px;
  border-style: inset;
  border-color: #008;
  border-opacity: .5;
  border-width: 4px 2px 2px 2px;
  background-color: #008;
  transition: border-width .06s linear;
  transition-delay: .5s;
}

#badge:hover img{
  border-style: outset;
  background-color: #00f;
  border-color: #00f;
  border-width: 2px 2px 4px 2px;
  transition-delay: 0s;
}

/* flexbox for items */
#centerflex {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

@keyframes movingBackground {
  from { background-position: 0 0px;}
  to { background-position: -2324px 704px;}
}

@keyframes movingHeader {
  from { background-position: 0 0px;}
  50% { background-position: -400px calc(-250px + (var(--nav-thickness) - 36px));} 
  to { background-position: -800px 0px;}
}

.atabox {
  font-family: Roboto;
  width:100%;
  height: 85vh;
  image-rendering: OptimizeSpeed;
}

.atabox #header{
  display: none;
}

@media screen and (max-width: 640px) {
  #label {
    width: 0;
    display: none;
  }
  #page {
    width: calc(100% + 8px);
    margin: 0 -8px calc(var(--nav-thickness) + 4px) 0px;
  }
  #nav-side{
    width: 0;
  }
  
  #nav-foot{
    height: var(--nav-thickness);
    transition: .5s ease;
  }
}

/* Border Image Types (save for l8r) */
#hudimageborder{
  width: 100%;
  height: 96px;
  padding: -20px;
  margin: -20px;
  border-style: solid;
  border-width: 10px 10px 10px 42px;
  -moz-border-image: 31 10 31 40 stretch stretch;
  -webkit-border-image: 31 10 31 40 stretch stretch;
  -o-border-image: 31 10 31 40 stretch stretch;
  border-image: 31 10 31 40 stretch stretch;
  border-image-source: url(WindowFront9Slice.png);
  border-image-width: 32px 10px 32px 40px;
}

/* ts didn't work how i'd like it to so fakemarquee 4 nyow */  
#marquee {
  font-family: 'Soul Ring PX';
  font-size: 8px;
  bottom: 0px;
  width: 100%;
  position: fixed;
  height: 40px;	
  overflow: hidden;
  z-index: 3;
  padding: 0px;
  color: var(--site-outline);
}
#marquee a {
  color: var(--site-outline);
}
  
#marquee p {
  position: absolute;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);	
  transform:translateX(100%);
  /* Apply animation to this element */	
  -moz-animation: scroll-left 30s linear infinite;
  -webkit-animation: scroll-left 30s linear infinite;
  animation: scroll-left 30s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
  0%   { 
  -moz-transform: translateX(100%); /* Browser bug fix */
  -webkit-transform: translateX(100%); /* Browser bug fix */
  transform: translateX(100%); 		
 }
  100% { 
  -moz-transform: translateX(-100%); /* Browser bug fix */
  -webkit-transform: translateX(-100%); /* Browser bug fix */
  transform: translateX(-100%); 
 }
}