@font-face{
  font-family: smooth;
  src: url(../media/fonts/smooth/Aaargh.ttf);
}

@font-face{
  font-family: arcon;
  src: url(../media/fonts/arcon/Arcon-Regular.otf);
}

img:hover{
  cursor: pointer;
}

#entirePageImage{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, 0.5);
  z-index: 5;
  transition: 0.5s;
  display: none;
}


#entirePageImageImage {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 90%;
    width: auto;
}

body{
  /*background-image: url("../media/night_sky_lighter.png");*/
  background-color: rgba(0, 10, 45, 1);
  margin: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
}

#navBox{
  position: fixed;
  background-color: rgb(225, 90, 55);
  left: 0px;
  top: 0px;
  width: 15%;
  height: 100%;
}

#mainLogo{
  width: 75%;
  margin-left: 10%;
}

#linksBox{
  margin-top: 20%;
}

.navLink{
  display: block;
  line-height: 30px;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  font-size: 16pt;
  color: rgb(50, 10, 50);
  font-family: arcon;
  background-color: rgb(255, 255, 255);
  transition: 0.5s;
}

#currentLink{
    background-color: rgb(255, 225, 195);
}

.navLink:hover{
  background-color: rgb(230, 80, 50);
  transition: 0.5s;
}

.copyrightClaim{
  font-size: 10pt;
  color: rgb(50, 10, 50);
  font-family: arcon;
  width: 90%;
  margin-left: 5%;
}

#pageTitleBox{
  position: relative;
  font-family: arcon;
  background-color: rgb(245, 215, 108);
  left: 17%;
  margin-top: -10px;
  width: 81%;
  height: 60px;
}

#pageTitleBox h1{
    padding-top: 0px;
}

h1{
  text-align: center;
  font-size: 32pt;
  color: rgb(50, 10, 50);
  margin-top: 20px;
}

#homeImportantBox, #importantBox1, #importantBox2, #importantBox3, #importantBox4, #importantBox5, #importantBox6, #importantBox7, #importantBox8, .importantBox{
  position: relative;
  background-color: rgb(245, 215, 108);
  left: 17%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  width: 81%;
}

#introVideo{
  position: relative;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-top: 2.5%;
  margin-bottom: 2.5%;
  width: 95%;
  height: 95%;
  transition: 0.75s;
}

#introVideo:hover {
  margin-left: 1.5%;
  margin-right: 1.5%;
  margin-top: 1.5%;
  margin-bottom: 1.5%;
  width: 97%;
  height: 97%;
  transition: 0.75s;
}

#blockBox {
    text-align: center;
    margin-top: 5px;
}

/*specific to each page*/

/*Home*/

#bigImage{
  margin-top: 15px;
  width: 56%;
  margin-left: 22%;
  text-align: center;
}

#homePageButton{
  margin-bottom: 15px;
}

.smallImage{
  margin-left: 1%;
  margin-right: 1%;
  width: 30%;
  transition: 0.75s;
}

.smallImage:hover{
  margin-left: 0.5%;
  margin-right: 0.5%;
  width: 31%;
  transition: 0.75s;
}

#teamSize, #details, .teamSize, .details{
  text-align: center;
  font-size: 18pt;
  color: rgb(50, 10, 50);
  font-family: arcon;
  padding-left: 20px;
  padding-right: 20px;
}

.paragraphForm{
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.mediaTitle{
  text-align: center;
  font-size: 28pt;
  color: rgb(50, 10, 50);
  font-family: arcon;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
}

/*Games*/

#image1, #image2, .image1, .image2{
  display: inline;
  width: 47%;
  margin-left: 2%;
  margin-top: 15px;
  transition: 0.75s;
}

#image1:hover, #image2:hover, .image1:hover, .image2:hover{
  display: inline;
  width: 48%;
  margin-left: 1%;
  margin-top: 10px;
  transition: 0.75s;
}



/*Music*/

#musicDisclaimer{
  font-size: 24pt;
  font-family: arcon;
  text-align: center;
  padding-top: 20px;
  margin-left: 25px;
  margin-right: 25px;
  color: rgb(50, 10, 50);
}

#musicButtonBox{
  height: 400px;
  width: 100%;
}

.musicButton{
  font-size: 14pt;
  font-family: arcon;
  color: rgb(50, 10, 50);
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 15px;
  margin-bottom: 25px;
  height: 60px;
  background-color: rgb(255, 105, 25);
  border-radius: 35px;
  transition: 0.5s;
}

.musicButton.downloadBackground{
  font-size: 14pt;
  font-family: arcon;
  color: rgb(250, 250, 250);
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 15px;
  margin-bottom: 25px;
  height: 60px;
  background-color: rgb(10, 10, 10);
  border-radius: 35px;
  transition: 0.5s;
  
}

.musicButtonDownloadButton{
  color: rgb(240, 230, 240);
  background-color: rgb(15, 10, 5)
}

.musicButton:hover{
  cursor: pointer;
  background-color: rgb(255, 25, 0);
  transition: 0.5s;
}

a{
  text-decoration: none;
}

.musicButton h3{
  padding-top: 15px;
}

/*Contact*/

#contactForm{
  width: 80%;
  margin-left: 25%;
  padding-top: 50px;
  padding-bottom: 50px;
}

#nameLabel, #emailLabel, #messageLabel{
  display: block;
  margin-top: 25px;
  font-size: 18pt;
  font-family: arcon;
  color: rgb(50, 10, 50);
}

#nameInput, #emailInput, #messageInput{
  margin-top: 7px;
  width: 65%;
  height: 30px;
  font-size: 14pt;
  font-family: arial, sans-serif;
}

#messageInput{
  width: 85%;
  height: 150px;
}

#sendButton, #resetButton, #submit{
  display: block;
  margin-top: 20px;
  width: 100px;
  height: 50px;
  font-size: 18pt;
  font-family: arial, sans-serif;
  border-radius: 30px;
  background-color: rgb(255, 105, 25);
  transition: 0.5s;
}

#sendButton:hover, #resetButton:hover{
  background-color: rgb(255, 25, 0);
  transition: 0.5s;
}

#correctInfo, #wrongInfo{
  color: rgb(50, 10, 50);
  font-size: 18pt;
  text-align: center;
  font-family: arcon;
  padding-bottom: 25px;
}

@media screen and (max-width: 768px) {
    #mainLogo {
        display: none;
    }
    
    .copyrightClaim {
        text-align: center;
    }
        
    #navBox {
        position: relative;
        height: 200px;
        width: 100%;
        left: 0;
    }
    
    #homeImportantBox, #importantBox1, #importantBox2, #importantBox3, #importantBox4, #importantBox5, #importantBox6, .importantBox {
        width: 100%;
        left: 0;
        top: 10px;
    }
    
    #pageTitleBox {
        width: 100%;
        left: 0;
        position: relative;
        margin-top: 20px;
        display: none;
    }
    
    #pageTitleBox h1 {
        margin-top: 10px;
        padding-top: 25px;
    }
    
    #linksBox {
        margin-top: 25px;
        padding-top: 15px;
    }
    
    #entirePageImageImage {
        width: 95%;
        margin-left: 2.5%;
        height: auto;
        margin-top: 25%;
    }
}