/*This is the basis on how everything is going to be themed throughout the whole website*/
@font-face{
    font-family: "Pixelify Sans";
    src: url(pixelify-sans/pixelify-sans-v2-latin-500.woff2)
}

@font-face{
    font-family: "Pixelify Sans";
    src: url(pixelify-sans/pixelify-sans-v2-latin-600.woff2)
}
@font-face{
    font-family: "Pixelify Sans";
    src: url(pixelify-sans/pixelify-sans-v2-latin-700.woff2)
}

@font-face{
    font-family: "Pixelify Sans";
    src: url(pixelify-sans/pixelify-sans-v2-latin-regular.woff2)
}

body{
  color: whitesmoke;
  text-align: left;
  font-family: "Pixelify Sans";
  font: 400;
  font-size: 110%;

/*This is simply for the background*/
  background-image: url("Images/moon.jpg");
  background-size: cover;
  background-image: 
    linear-gradient( rgba(0,0,0,.2), rgba(0,0,0,.2) ),
    url("Images/moon.jpg");
}

/*Colour for the links*/ 
a:link{
  color: #00ccd0;
}
a:visited{
  color: #00ddc0;
}
a:hover{
  color: hotpink;
}

/*Header styling*/ 
.header{
  padding: 0px;
  margin: 0px;
  border-radius: 15px;
  font-size: 90%;
  letter-spacing: 0.2em;
}
  
.bighead{
  font-size: 300%;
}

.header2{
  text-align: center;
  font-size: 150%;
  letter-spacing: 0.1em;
}

/*Vertical navigation bar*/ 

.navcontainer{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px;
}

.nav{
  display: block;
  list-style-type: none;
  margin: 0;
  text-align: center;
  padding: 0px;
  padding-left: 25px;
  padding-right: 25px;
  background-color: rgba(13,13,13,.5);
  border-radius: 15px;
}

.gay{
  float: left
}

li a{
  text-decoration: none;
  letter-spacing: 0.1em;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0px;
  
}

li a.active{
  color: hotpink;
}


/*Flex box bullshit*/
.flex-container{
  display: flex;
  justify-content: center;
}

/*Main body text*/ 
.index-text{
  margin: 0px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: left;
}

.maintext-box{
  background-color: rgba(13,13,13,.5);
  border-radius: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 850px;
}

.changelog{
  overflow: hidden;
  font-size: 75%;
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  letter-spacing: 0.05em;
}

.changelog-box{
  background-color: rgba(13,13,13,.5);
  border-radius: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 320px;
  width: 850px;
  overflow: auto;
}

/*Tabs are beautiful*/
/* Style the tab */
.tab {
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
background-color: rgba(13, 13, 13, 0.3);
margin-bottom: 15px;
overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: whitesmoke;
font-family:"Pixelify Sans";
font-size: 100%;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.5s;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgba(13, 13, 13, 0.7);
}

/* Create an active/current tablink class */
.tab button.active {
background-color: rgba(13, 13, 13, 0.7);
}

/* Style the tab content */
.tabcontent {
border-radius: 15px;
background-color: rgba(13, 13, 13, 0.5);
width: 850px;
padding: 6px 12px;
animation: fadeEffect 1.5s; /* Fading effect takes 1.5 seconds */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}