@font-face {
    font-family: "FreePixel";
    src: url("../fonts/FreePixel.ttf") format("truetype");
}
/***
THE BASE CODE HAS BEEN REVAMPED!
IF YOU WANT THE OLD CSS, GO TO https://eggramen.neocities.org/code/css/misc/fakewp_old/fakewp2.css
***/

body {
  background: url("../img/bluestarback.gif");
  		background-repeat: repeat;
		background-attachment: fixed;
		background-color:black;
  color: white;
  font-family: FreePixel;
  font-size: 1.15rem;
  cursor: url("../img/kidcore-cursor.png") 2 2, pointer;
     display: flex;
  justify-content: center;
  
  }
  li:hover {
        background-color: #3a2f10;
        cursor: url("../img/kidcore-cursor.png") 2 2, pointer;
      }
ul {
  list-style-type: square;
} 

center {
  text-align: center;
  }
  
#ps2id {
 display: none; 
}
  
.ps2 {
  display: none;
}

#xboxid {
  display: none;
}

.xbox {
 display: none; 
}

.nintendo {
  display: none;
}

  
/*Contains everything*/
.wrapper {
  width: 1200px;
  max-width: 100%;
  overflow-x: hidden; 
  min-height:3500px;
  overflow-y: hidden; 
  background:url("../img/bluestarback.gif");
  background-position: center;
  background-repeat: repeat;
  top: 0;
  margin-top: 0px;
  border-left: 0px solid #12282f;
  margin-bottom: 0px;
  border:3px ridge black;
  border-radius:30px 30px 30px 30px;
  box-shadow: 0px 0px 10px #bfdd0b;
  }
  /*Contains main and sidebar dhttps://sadhost.neocities.org/images/tiles/background.gifivs*/
.wrapper-2 {
  position: relative;
  min-height:4000px;
}

/*Header and footer images*/
.header, .footer {
  height: 150px;
  overflow: hidden;
  background:url("../img/bluestarback.gif");
  background-size:cover;
  border-bottom:3px ridge #002347;
  border-radius:30px 30px 0px 0px;
  width:1200px;
  }
  
  
.footer {
  height: 50px;
  }
  
.header img {
  border-top: 0px;
  }
  
#sticker{
position: absolute; 
z-index:999;
cursor:move;
}
   
#sticker1{
position: absolute; 
z-index:999;
cursor:move;
}
  
#sticker2{
position: absolute; 
z-index:999;
cursor:move;
}

#sticker3{
position: absolute; 
z-index:999;
cursor:move;
}

#sticker4{
position: absolute; 
z-index:999;
cursor:move;
}

#sticker5{
position: absolute; 
z-index:999;
cursor:move;
}

#sticker6{
position: absolute; 
z-index:999;
cursor:move;
}

#sticker7{
position: absolute; 
z-index:999;
cursor:move;
}

#sticker :hover, #sticker1 :hover, #sticker2 :hover, #sticker3 :hover, #sticker4 :hover, #sticker5 :hover, #sticker6 :hover, #sticker7 :hover{
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

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

/*Big title at the top of the page.*/  
.title {
  padding: 15px 10px 10px 20px;
  }
  
/*Override default margins/padding for headings.*/
.title h1, .title h2, .title h3 {
  padding:0;
  margin: 0;
  }

/*Container for top row of links.*/
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
  }
  
/*Div style for individual links.*/
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border: 0px solid red;
  }
  
.link a {
  color: white;
  text-decoration: none;
  }

/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.sidebar-left, .main, .sidebar-right {
  display: inline-block;
  }
  
.sidebar-left, .sidebar-right {
  width: 230px;
  position: absolute;
  top: 0;
  }

.sidebar-left {
  margin-left: 10px;
  }
  
.main {
  margin-left: 250px;
  width: 700px;
  }
  
.sidebar-right {
   margin-right: 10px;
  margin-left: 10px;
  }
  
/*Floating imgages on side*/

.img-right {
  margin-top:60px;
    position: relative;
  float: right;
  }
  
.img-left {
  margin-top:60px;
    position: relative;
  float: left;
  
  }
  
  .update {  
  padding: 5px 10px 16px 10px;
  background: black;
  color: white;
  margin: 10px 5px 15px 0px;
  width: 320px;
  border:2px solid #bfdd0b;border-image:linear-gradient(45deg,#eaff6b,#bfdd0b,#8fac00,#6f8a00,#8fac00,#bfdd0b,#eaff6b) 1;
    box-shadow: none;
    overflow: auto;
  max-height: 700px;
  }
  
/*Box used for individual sections in the sidebar, center column, etc.*/
.box {  
  padding: 5px 10px 16px 10px;
  background: black;
  color: white;
  margin: 10px 5px 15px 0px;
  border:2px solid #bfdd0b;border-image:linear-gradient(45deg,#eaff6b,#bfdd0b,#8fac00,#6f8a00,#8fac00,#bfdd0b,#eaff6b) 1;
    box-shadow: none;
  }
  
/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  }
  
  .boxsparkle {  
  padding: 5px 10px 16px 10px;
  background: url("../img/sparkle/glitterbg.gif");
  background-size: cover;
  color: white;
  margin: 10px 5px 15px 0px;
  border:2px solid #bfdd0b;border-image:linear-gradient(45deg,#eaff6b,#bfdd0b,#8fac00,#6f8a00,#8fac00,#bfdd0b,#eaff6b) 1;
    box-shadow: none;
  }
  
  .boxsparkle img {
  max-width: 100%;
  height: auto;
  }
  
/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  
  }

.marquee{ 
  max-width: 100%;
   border:3px ridge #bfdd0b;
   overflow:hidden;
  background: black;
  background: linear-gradient(0deg,#eaff6b,#bfdd0b,#6f8a00);
margin: 0;
}

.marquee1{ 
   overflow-x:hidden;
width: max-content; 
top:0;
  left:0;
}

.buttons{
 overflow-x: hidden;
  animation: marqmove 20s linear infinite;


  vertical-align: middle;
  display:inline-block;
}

@keyframes marqmove {

  100% {
    transform: translateX(-1260px);
  }
}


pfp {
  border-radius: 50%;
}

h3{
  font-size:1.6rem;
  margin-top:0px;
  margin-bottom:5px;
  color:#ffffff;
  text-align:center;
  
}

h3 span { 
  background:url(https://sadhost.neocities.org/images/tiles/bg_starrynight.gif);
  border-radius:10%;
}

.wrapingimage  
{  
float: right;   
margin: 10px 10px 10px 10px;   
}  

/*Box used for individual sections in the sidebar, center column, etc.*/
.box2 {  
  padding: 5px 10px 16px 10px;
  width:20px;
  margin-left:50px;
  background: #e2dcc1;
  color: #12282f;
  margin: 10px 5px 15px 0px;
  border:3px ridge #002347;
  }

.maindouble {
  columns: 2;
  column-gap: 25px;
  margin-left: 220px;
  
  width: 560px;
  }

p2{
  color:blue;
  font-size:1rem;
}

.mainscroll {
  margin-left: 220px;
  width: 560px;
  overflow:auto;
  }

p5{
  color:grey;
  font-size:0.9rem;
  
}

        section {
            height: 100px;
            width: 100px;
            background-position: center;
            background-repeat: no-repeat;
        }

.center{
 text-align: center;
}

.left{
 text-align: left;
}

.right{
 text-align: right;
}

.button {
  background-color: #bfdd0b;
  color: black;
  cursor: url("../img/kidcore-cursor.png") 2 2, pointer;
  width: 50%;
  text-align: center;
  font-family: FreePixel;
  font-size:1.063rem;
  font-weight:bold;
  border: double;
  border-color: #c99a1f;
  outline: none;
  min-height:40px;
  transition: 0.4s;
  		line-height: 1.25;
			max-width: 50%;
			margin: 0 auto 1rem;
      min-width: 200px;
}

.active, .button:hover {
  background-color: #eaff6b;
}

::-moz-selection { /* Code for Firefox */
  color: #eaff6b;
  background: transparent;
}

::selection {
  color: #eaff6b;
  background: transparent;
}

a {
  color: #bfdd0b;
  cursor: url("../img/kidcore-cursor.png") 2 2, default;

}
a:hover {
  color: #eaff6b;
  cursor: url("../img/kidcore-cursor.png") 2 2, pointer;
  
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #bfdd0b;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #6f8a00;
}

 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted #eaff6b; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #bfdd0b;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -150px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.2s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
  align-content: center;
  grid-gap: 10px;
  height: 100vh;
}

.grid img {
  width: 200px;
  height: 200px;
  cursor: pointer;
  object-fit: cover;
}

#lightbox {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  display: none;
}

#lightbox.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

#lightbox img {
  max-width: 90%;
  max-height: 80%;
  padding: 4px;
  background-color: black;
}

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #bfdd0b;
  color: black;
  cursor: url("../img/kidcore-cursor.png") 2 2, pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  font-family: FreePixel;
  font-size:1.063rem;
  font-weight:bold;
  border: double;
  border-color: #c99a1f;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #eaff6b;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: black;
  display: none;
  overflow: visible;
  border: double;
  border-color: #bfdd0b;
} 


@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 9999;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
/*.crt {
  animation: textShadow 2.6s infinite;
}

credit: http://aleclownes.com/2017/02/01/crt-display.html */

@media screen and (max-width: 1200px) {
  .wrapper {width: 450; height:200%}
  .main {position:relative; margin-left:0; width:100%;}
  .sidebar-left {position:relative; width:100%;}
  .sidebar-right {position: relative; width:100%;}
  .main .sidebar-left .sidebar-right {align-content:center; display:flex; flex-direction:column;}
  #sticker, #sticker1, #sticker2, #sticker3, #sticker4, #sticker5, #sticker6, #sticker7 {display: none;}
}
/* rainbow gradient titles inside boxes (flowing) */
.box h1, .box h2, .update h1, .update h2, .main .box h1, .main .box h2 {
  background: linear-gradient(90deg,#eaff6b,#bfdd0b,#8fac00,#6f8a00,#8fac00,#bfdd0b,#eaff6b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rainbowtext 5s linear infinite;
}
@keyframes rainbowtext { to { background-position: 200% center; } }
/* iggino lime banner gradient (flowing) */
@keyframes igginoBanner { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }