@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap');

body {
  color: white;
  font-family: Verdana;
  background-repeat: repeat;
  margin: 0;
  padding: 0;
  background-color: #11001a;
  background-attachment: fixed;
  animation: bgmove 5s linear infinite;
  width: auto;
  height: auto;
  
}
@keyframes bgmove {
  0% {background-position: 0px 0px;}
  100% {background-position: 640px 0px;}
}

.rainbow{
  animation:rainbow 4s linear infinite; 
}
@keyframes rainbow{
  0% {color: red;}
  16% {color: orange;}
  32% {color: yellow;}
  48% {color: green;}
  64% {color: blue;}
  80% {color: purple;}
  100%{color: red;}
}

.transgender{
  animation:transgender 2s linear infinite;  
}
@keyframes transgender{
  0% {color: DeepSkyBlue;}
  10% {color: DeepSkyBlue;}
  25% {color:pink;}
  30% {color:pink;}
  50% {color: white;}
  55% {color: white;}
  75% {color:pink;}
  80% {color:pink;}
  100%{color: DeepSkyBlue;}
}

#title {
  width:400px;
  height:89px;
}

#title a:hover{
   text-decoration-color: #7328eb;
}

#linkbar {
  border: 15px ridge purple;
  margin-left:auto;
  margin-right:auto;
  width: 600px;
  height:121px;
  overflow:hidden;
  scroll:"no";
}

h1 img{
  vertical-align:top;
  height:45px;
}

.other img{
  max-width:530px;
}

/*center hopefully*/
.center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

/*spoiler text*/
.spoiler{
  background-color:#151716;
  color:#151716;
}
.spoiler:hover{
  color:white; 
}
/*image hover replace*/
.static {
  position:absolute;
  background: black;
}

.static:hover {
  opacity:0;
}

/*the music player*/
#musicDiv{
  width:620px;
  border:5px double #7b007b;
  display:inline-block;
  font-family:"Inconsolata";
}

#audio{
  width:600px;
  height:20px;
}

/*makes mobile display the title properly and other stuff*/
#wrapper{
  width:600px; 
}

/*Generic Text Box*/
.box{
  width:620px;
  display:inline-block;
  background-color:black;
  border:5px double purple;
}
p{
  margin-left: 15px;
  margin-right:15px;
  font-size: 17px;
  text-align: left;
  line-height:1.2;
  text-indent:20px;
}
.boldText{
  font-size:25px;
  font-weight: bold; 
}
.centerText.centerText{
  text-indent:0px;
  text-align:center;
}

/*minwidth of box*/
.extend{
  width:620px; 
}
/*background color of the boxes*/
#musicDiv, .box{
  background-color:#0f0b11;
}
/*dancing characters*/
.mascot:first-child{
  float:left;
}

.mascot{
  vertical-align: middle;
  margin-top: 7px;
  height:100px;
  float:right;
}

/*Horizontal line*/
.hr{
  border-bottom:5px double purple;
  margin-bottom:20px;
}

/*Quick navigation window */
.navWindow{
  position:fixed;
  bottom: -286px;
  width:200px;
  left: 68%;
  color:#37d104;
  border:5px double darkgreen;
  overflow:hidden;
  transition: transform .05s;
  text-align:center;
}
.navWindow #navTitlebar{
  height:22px; 
}
.navWindow #navText{
  font-size:17px;
  float:left;
  margin-left: 6px;  
}
.navWindow #navButtons{
  font-size:17px;
  float:right;
  margin-right:6px;
}

.navWindow:hover{
  transform: translate(0px, -250px);
}

 /* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}