/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* How does the site get its base colors: */
body {
  background-color: black;
  color: white;
  font-family: 'pressstart2p';
  /*font-size: 12px;
  /*font-family: "Times New Roman", Times, serif;
  */
  cursor: url("/icon/cursor.png"), default;
  margin-left:30px;
  margin-right:30px;
  padding:8px;
}

/* I should delete this. */
a {
  color:#034992;
}
a:hover {
  color:lime;
  text-shadow: 0 0 10px lime;
}
h6 {
  text-align: center;
}

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

/* TODO BOX */
.bio {
  background-color: black;
  border: 2px solid red;
  padding: 10px;
  overflow-y: scroll;
}

/* BOX */
.box {
  background-color:black;
  max-width: 600px; 
  border: 2px solid red; 
  padding: 10px; 
  margin: 20px;
}

/* SIDE BOX */
.sidebio {
  background-color: black;
  border: 2px solid red;
  padding: 10px;
  overflow-y: scroll;
  height:100%;
  width:20%;
}
.sidebio:hover {
  cursor: url("/icon/pointer.png"), default;
}
.sidebio:active {
  cursor: url("/icon/active.png"), default;
  animation-name: shake;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

/* MAIN BOX */
.middlebio {
  background-color: black;
  border: 2px solid red;
  padding: 10px;
  overflow-y: scroll;
  height:100%;
  width:60%;
}

/* DRAGGABLE BOX */
#draggableWIN {
  position: absolute;
  z-index: 9;
  background-color: black;
  text-align: center;
  border: 2px solid red;
}

#draggableWINheader {
  padding: 2px;
  cursor: move;
  z-index: 10;
  background-color: black;
  color: #fff;
  text-align: left;
  border-bottom: 2px solid red;
}

/* TOOL TIPS.*/

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  top: 100%;
  left: 50%;
  margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */
  background-color: black;
  color: #fffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.text {
  color:white;
  text-shadow: 0.1em 0.1em 0.1em black, 0.1em 0.1em 0.1em black;
  position:absolute;
  bottom:20px;
  }

/* This is a class/span to change the dialogue for different members.*/
.cass {
  color: #b9ca35;
  text-shadow: 2px 2px #440000;
  }
  
.flos {
  color: lime;
  }
  
.moon {
  color: cyan;
  text-shadow: 2px 2px #003030;
  }
  
.sun {
  color: red;
  animation-name: SUNINFLUX;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  }
  
/* --------------------------------------------------------------- */


/* Alignment Classes + Hovers */
.aligncenter {
    text-align: center;
    }

.hover {
  cursor: url("/icon/pointer.png"), default;
}

.questionhover {
  cursor: url("/icon/pointer_r.png"), default;
}

.centerbox {
  text-align: center;
  margin: auto;
  width: 40%;
  border: 3px solid red;
  padding: 10px;
}

.center {
  display: flex;
  justify-content: center;
}

.spacebetween {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  }

.nav {
  background-color:black;
  position: sticky; 
  top: 0;
  right: 0;
  display: flex; 
  justify-content: center; 
  border: 2px solid red; 
  padding: 10px; 
  gap: 10px;
  z-index: 1;
}

/* --------------------------------------------------------------- */

/* FOR WORKING HOME BUTTONS */
.homebutton {
  padding: 1px 10px;
  background-color:black;
  color: white;
  border: 2px solid red;
  
}

.homebutton:hover {
  padding: 1px 10px;
  cursor: url("/icon/pointer.png"), default;
  color: lime;
  background: black;
}

/* FOR NON-WORKING HOME BUTTONS */
.homenonbutton {
  padding: 1px 10px;
  background-color:black;
  color: white;
  border: 2px solid red;
  
}

.homenonbutton:hover {
  padding: 1px 10px;
  cursor: url("/icon/pointer.png"), default;
  color: black;
  background: black;
}

/* FOR SOCIAL BUTTONS */
.socialbutton {
  padding: 20px 20px;
  background-color:black;
  color: white;
  border: 2px solid red;
  
}

.socialbutton:hover {
  padding: 20px 20px;
  cursor: url("/icon/pointer.png"), default;
  color: lime;
  background-image: url("/icon/button_tempress.png");
}

.textlink {
  color:white;
  text-decoration:underline;
  }

.textlink:hover {
  color:lime;
  cursor: url("/icon/pointer.png"), default;
  }

/* Temporary way to make animated Images but non-interactive ones :( 

.funnyimage {
  background-image: url("/icon/flos.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
  height: 300px;
  margin:20px; 
  padding:8px;
  }

.funnyimage:hover {
  background-image: url("/icon/flos_question.png")
  }
  
.funnyimage[onclick] {
  background-image: url("/icon/flos_hit.png")
  }
*/


/* --------------------------------------------------------------- */

/* Special Test Classes*/

.bg {
  position:absolute; 
  z-index:-1; 
  left:0px; 
  top:0px;
  }

.static {
  background-image: url("system/bg_earthbound1.gif");
  background-repeat: repeat;
  background-size: auto;
}

.indexbackground {
  background-image: url("system/bg_earthbound.gif");
  background-repeat: repeat;
  background-size: auto;
}

.testingbg {
  background-image: url("background_test.gif");
  background-repeat: repeat;
  background-size: auto;
  cursor: url("/icon/cursor.png"), default;
}

.casshover:hover {
  animation-name: casshover;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes casshover {
  0%{
    transform: scale(100%);
    }
  100%{
    transform: scale(110%);
    }
}

/* Animations! */

.typewriter h2 {
  font-family:"venice";
  font-size:20px;
  text-transform:uppercase;
  
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid black; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end 13;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: cyan; }
}

.marquee {
  white-space: nowrap;
  -webkit-animation: rightThenLeft 2s linear;
  }


/* Spin Gears */
.gear {
  animation-name: spin;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.gear1 {
  animation-name: spin;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.gear2 {
  animation-name: spin;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.revgear {
  animation-name: respin;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.revgear1 {
  animation-name: respin;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.revgear2 {
  animation-name: respin;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spin {
  0% {
  transform: rotate(0deg)
  }
  25% {
  transform: rotate(90deg)
  }
  50% {
  transform: rotate(180deg)
  }
  75% {
  transform: rotate(270deg)
  }
  100% {
  transform: rotate(360deg)
  }
}

@keyframes respin {
  0% {
  transform: rotate(360deg)
  }
  25% {
  transform: rotate(270deg)
  }
  50% {
  transform: rotate(180deg)
  }
  75% {
  transform: rotate(90deg)
  }
  100% {
  transform: rotate(0deg)
  }
}










/* Spin news */
.news {
  animation-name: news;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

@keyframes news {
  0%{
    background-color:black;
    transform: translateY(1000px);
    opacity: 0;
    }
  50%{
    background-color:red;
    transform: rotate(360deg);
    opacity: 1;
    }
  100%{
    background-color:black;
    transform: rotate(0deg)
    }
}

.jump {
  animation-name:jumping;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes jumping {
  0% {
  color: black;
  transform: translateY(20px)
  }  
  10% {
  color: gray;
  transform: translateY(-10px)
  }  
  40% {
  color: white;
  transform: translateY(0px)
  }
  100% {
  transform: translateY(0px)
  }
}

.shout {
  animation-name:shouting;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes shouting {
  0% {
  color: black;
  transform: scale(10%);
  transform: rotate(-2deg)
  }  
  10% {
  color: gray;
  transform: scale(90%);
  }  
  40% {
  color: white;
  transform: scale(150%);
  transform: rotate(2deg)
  }
  100% {
  transform: scale(100%);
  transform: rotate(0deg)
  }
}




.fadein {
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

.fadein2 {
  animation-name: fadein;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

.fadein3 {
  animation-name: fadein;
  animation-duration: 5s;
  animation-iteration-count: 1;
}

.fadeout {
  animation-name: fadeout;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
}

.fadeout2 {
  animation-name: fadeout2;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

@keyframes fadein {
  0% {
  opacity: 0;  
  }  
  10% {
  opacity: 0;  
  }  
  100% {
  opacity: 1;  
  }
}

@keyframes fadeout {
  0% {
  opacity: 1;  
  }  
  10% {
  opacity: 1;  
  }  
  100% {
  opacity: 0;  
  }
}

.shake {
  animation-name: shake;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.shakeinf {
  animation-name: shake;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
  transform: translateX(0px)
  }
  20% {
  transform: translateX(-3px)
  }
  40% {
  transform: translateX(6px)
  }
  60% {
  transform: translateX(-3px)
  }
}

.lev {
  animation-name: levitate;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes levitate {
  0% {
  transform: rotate(1deg)
  }
  50% {
  transform: rotate(-1deg)  
  }
  100% {
  transform: rotate(1deg)
  }
}

.sizeup {
  animation-name: sizeup;
  animation-duration: 4s;
  animation-iteration-count: 1;
}

@keyframes sizeup {
  0% {
  transform: scale(0%);
  }
  100% {
  transform: scale(100%);
  }
}

/*.censor {
/*  animation-name: censorOn;
/*  animation-duration: 0.5s;
/*  animation-iteration-count: 1;
/*}
/*.censor:hover {
/*  animation-name: censorOff;
/*  animation-duration: 33s;
/*  animation-iteration-count: infinite;
/*}

@keyframes censorOn {
  0% {
  opacity:1;
  }
  100% {
  opacity:1;
  }
}

@keyframes censorOff {
  0% {
  opacity:1;
  }
  100% {
  opacity:0;
  }
}*/

@keyframes SUNINFLUX {
  0% {
    opacity:1;
    text-shadow: 0 0 10px red;
  }
  50% {
    opacity:0.2;
    text-shadow: 0 0 5px red;
  }
  100% {
    opacity:1;
    text-shadow: 0 0 10px red;
  }
}

/* --------------------------------------------------------------- */

/* On click > scroll to <down> */
@media screen and (max-width: 600px) {
  div.spacebetween {
    flex-direction: column;
  }
}

 #down {
  
} 


/* --------------------------------------------------------------- */

/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 416px;
  height: 416px;
  margin: -208px 0 0 -208px;
  background-image: url("icon/loading circle anim.gif");
  background-repeat: no-repeat;
  background-size: cover;
/*  border: 16px solid #f3f3f3;
/*  border-radius: 50%;
/*  border-top: 16px solid #3498db;
/*  -webkit-animation: spin 2s linear infinite;
/*  animation: spin 2s linear infinite;*/
}

/*@-webkit-keyframes spin {
/*  0% { -webkit-transform: rotate(0deg); }
/*  100% { -webkit-transform: rotate(360deg); }
/*}

/*@keyframes spin {
/*  0% { transform: rotate(0deg); }
/*  100% { transform: rotate(360deg); }
/*}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#contentDiv {
  display: none;
  text-align: center;
}