@font-face {
    font-family: "FreePixel";
    src: url("https://shinyexe.neocities.org//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("pokedarkalt.png");
  		background-repeat: repeat;
		background-attachment: fixed;
		background-color:black;
  color: white;
  font-family: FreePixel;
  font-size: 1.15rem;
  cursor: url("mew cursor2 big.gif"), pointer;
     display: flex;
  justify-content: center;
  
  }
  li:hover {
        background-color: #5e073e;
        cursor: url("shiny mew cursor2 big.gif"), 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("pokedarkheader.png");
  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 hotpink;
  }
  /*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("pokedarkheader.png");
  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 ridge #4900FF;
    box-shadow: 3px 3px #9600FF, -3px -3px #FF00C1;
    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 ridge #4900FF;
    box-shadow: 3px 3px #9600FF, -3px -3px #FF00C1;
  }
  
/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  }
  
  .boxsparkle {  
  padding: 5px 10px 16px 10px;
  background: url("/sparkle/glitterbg.gif");
  background-size: cover;
  color: white;
  margin: 10px 5px 15px 0px;
  border:2px ridge #4900FF;
    box-shadow: 3px 3px #9600FF, -3px -3px #FF00C1;
  }
  
  .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 magenta;
   overflow:hidden;
  background: black;
  background: linear-gradient(0deg, magenta, blue, purple);
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: hotpink;
  color: black;
  cursor: url("shiny mew cursor2 big.gif"), pointer;
  width: 50%;
  text-align: center;
  font-family: FreePixel;
  font-size:1.063rem;
  font-weight:bold;
  border: double;
  border-color: deeppink;
  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: pink;
}

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

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

a {
  color: hotpink;
  cursor: url("mew cursor2 big.gif"), default;

}
a:hover {
  color: red;
  cursor: url("shiny mew cursor2 big.gif"), pointer;
  
}

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

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

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

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5e073e;
}

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

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: hotpink;
  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: hotpink;
  color: black;
  cursor: url("shiny mew cursor2 big.gif"), pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  font-family: FreePixel;
  font-size:1.063rem;
  font-weight:bold;
  border: double;
  border-color: deeppink;
  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: pink;
}

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


@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;}
}