/*This is the main css for the Silver Bullet Website*/

/*Global class*/
body{
  display: flex;
  flex-direction: column;
  background: black;
  color: white;
}

*{
  font-family: 'Oswald', sans-serif;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.wrapper > * {
  padding: 20px;
}

a:link, a:visited {
  background-color: white;
  color: rgb(16, 34, 23);
  border: 2px solid rgb(16, 34, 23);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active{
  background-image: url("Images/greenHover.png");
  color: white;
}
/* --------------------------------------------------------------- */
.main_cont{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  justify-self: center;
  min-height: 500px;
  margin-bottom: 15px;
}

.game_cont{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex-direction: row;
  align-items: start;
  justify-self: center;
  max-height: 350px;
  margin-bottom: 15px;
}

.title_cont{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  justify-self: center;
  min-height: 200px;
  margin-bottom: 15px;
}

.splitMain_cont{
  min-height: 250px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  justify-self: center;
}

.box{
  order: 2;
  flex-grow: 1;
  border: 3px solid white;
  min-height: 50px;
  margin: 10px 10px 10px;
  font-size: 1.5em;
  background-color: black;
  padding: 5px;
  justify-content: center;
  text-align: center;
}

.video_box{
  order: 2;
  border: 3px solid white;
  max-height: 30%;
  max-width: 60%;
  margin: 10px 10px 10px;
  font-size: 1.5em;
  background-color: black;
  padding: 5px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.textBox{
  order: 2;
  flex-grow: 1;
  border: 3px solid white;
  min-height: 50px;
  min-width: 95%;
  margin: 10px 20px 10px;
  font-size: 1.5em;
  background-color: black;
  padding: 5px;
}

.game_box{
  order: 2;
  flex-grow: 1;
  border: 3px solid white;
  min-height: 100px;
  max-width: 500px;
  font-size: 1.5em;
  background-color: black;
  padding: 5px;
  justify-content: center;
  text-align: center;
}

.box_zero{
  order: 2;
  flex-grow: 1;
  min-height: 50px;
  margin: 10px 10px 10px;
  font-size: 1.5em;
  padding: 5px;
  justify-content: center;
  text-align: center;
  background-color: transparent;
}

.space_footer{
  background-image: url("Images/footerGreen.png");
  min-height: 60px;
}

.plain_footer{
  
}

.center{
  display: block;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5px;
}

.t_center{
  text-align: center;
}
/*Background Section*/
.backgroundPinkTeal{
  min-height: 1000px;
background-image: url("Images/pinktealBack.png");
}

.backgroundBlack{
background-image: url("Images/blackBack.png");
}

.backgroundPurple{
background-image: url("Images/purpleBack.png");
}

.backgroundBlue{
background-image: url("Images/blueBack.png");
}

.backgroundG1{
  background: rgb(255,128,66);
  background: linear-gradient(180deg, rgba(255,128,66,1) 0%, rgba(133,35,173,1) 85%);
  height: 750px;
  position: relative;
}

.backgroundG2{
  background: rgb(72,76,125);
  background: linear-gradient(0deg, rgba(72,76,125,1) 30%, rgba(133,35,173,1) 85%);
  min-height: 750px;
  position: relative;
}

.backgroundG3{
  background: rgb(16, 34, 23);
  background: linear-gradient(0deg, rgba(16, 34, 23, 1) 44%, rgba(72, 76, 125, 1) 100%);
  height: 300px;
  position: relative;
  margin-bottom: 15px;
}

.backgroundPinkTeal, .backgroundPurple, .backgroundBlack, .backgroundBlue{
  position: relative;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.backgroundPurple, .backgroundBlack, .backgroundBlue{
  min-height: 700px;
}

.box_Title1{
  align-self: start;
  margin: 20px;
  margin-top: 50px;
  height: 100px;
  width: 330px;
  border-radius: 1px;
  border: 4px solid white;
  border-style: double;
  position: absolute;
}

.box_Title2{
  order: 2;
  background-image: url("Images/TitleC.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  flex-grow: 1;
  color: white;
  font-size: 30px;
  padding: 10px 0;
  height: 70px;
  overflow: hidden;
}

/*Hover Bars*/
#mySidenav a {
  position: fixed;
  height: 15px;
  padding: 15px;
  padding-left: 3px;
  text-decoration: none;
  font-size: 20px;
  z-index: 2;
}

#objective{
  width: 115px;
  top: -1px;
  right: 408px;
  color: white;
  border: 1px solid white;
  border-radius: 0 0 5px 5px;
  background-image: url("Images/orangeHover.png");
}

#controls{
  width: 115px;
  top: -1px;
  right: 272px;
  color: white;
  border: 1px solid white;
  border-radius: 0 0 5px 5px;
  background-image: url("Images/blueredHover.png");
  background-position: center;
}

#background{
  width: 115px;
  top: -1px;
  right: 136px;
  color: white;
  border: 1px solid white;
  border-radius: 0 0 5px 5px;
  background-image: url("Images/blueHover.png");
}

#features{
  width: 115px;
  top: -1px;
  right: 0;
  color: white;
  border: 1px solid white;
  border-radius: 0 0 5px 5px;
  background-image: url("Images/greenHover.png");
}

#gameForm {
  width: 115px;
  bottom: -1px;
  right: 0;
  color: white;
  border: 1px solid white;
  border-radius: 5px 5px 0 0;
  background: black;
  top: 
}

#siteForm {
  width: 115px;
  bottom: -1px;
  right: 135px;
  color: white;
  border: 1px solid white;
  border-radius: 5px 5px 0 0;
  background: black;
  
}

/*Titles*/
.objective_t{
  align-self: start;
  justify-self: center;
  font-size: 4em;
  padding: 0;
}

.controls_t{
  align-self: start;
  justify-self: center;
  font-size: 4em;
  padding: 0;
}

.features_t{
  align-self: start;
  justify-self: center;
  font-size: 4em;
  padding: 0;
}

.background_t{
  align-self: start;
  justify-self: center;
  font-size: 4em;
  padding: 0;
}

.game_t{
  text-align: center;
  align-self: start;
  justify-self: center;
  font-size: 2em;
  margin-bottom: 10px;
  padding: 0;
}
/*Separating for mobile CSS*/
@media only screen and (max-width: 1000px) {
  
  .backgroundPinkTeal, .backgroundPurple, .backgroundBlack, .backgroundBlue{
    background-attachment: scroll;
  }

  .backgroundPinkTeal{
    min-height: 500px;
  }

  .video_box{
    width: 500px;
    height: 100px;
  }

  #mySidenav a{
    font-size: 15px;
  }

  #objective{
    width: 65px;
    right: 253px;
  }

  #controls{
    width: 65px;
    right: 167px;
  }
  
  #background{
    width: 65px;
    right: 83px;
  }

  #features{
    width: 65px;
    right: 0;
  }

  #gameForm{
    width: 87px;
    right: 0px;
  }

  #siteForm{
    width: 76px;
    right: 105px;
  }
}