@font-face{
  font-family: PixelGothic; src: url(./font/Pixel_Gothic_Font.ttf)
}

@font-face{
font-family: liliput; src: url(./font/lilliput_steps.ttf)
}

h1 {
  font-family: liliput, serif;
  font-weight: lighter;
  font-size: 0vh;
}

h2{
  font-family: PixelGothic, serif;
  font-weight: lighter;
  font-size: 0vh; 
}

h3{
  text-align: justify;
  font-family: liliput, serif;
  font-weight: 300;
  font-size: 3.5vh;
  color: rgb(0, 0, 0);
}

body{
  margin:0;
  background-color: #42455a ;
}

nav{
  width: 100vw;
  text-align: center;
  background: #55d6aa;
  background: #210032;
  background-image: url(./webpage/background3.png);
}

.navbar{
  position: fixed;
}

nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li{
  display: inline-block;
  margin-left: 2vw;
  margin-right: 2vw;
  padding-top: 2vh;
  padding-bottom: 0.5vh;
  position: relative;
}

nav a{
  color: #42455a;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 3vh;
}

nav a:hover{
  color: #000;
}

nav a::before{
  content: '';
  display: block;
  height: 0.5vh;
  width: 100vw;
  background-color: #42455a;

  position: absolute;
  top: 0;
  width: 0;
  transition: all ease-in-out 300ms;
}

nav a:hover::before{
  width: 100%;
}

.fullWindow{
  width: 100vw;
  height: 95vh;
  padding-top: 5vh;
}

.fullDiv{
  width: 100%;
  height: 100%;
}

.titleDiv{
  width: 100%;
  height: 20%;
}

.contentDiv{
  width: 100%;
  height: 80%;
}

.contentDiv img{
  height: 80%;
}

#controlsDiv{
  text-align: center;
}
#tutorialDiv{
  text-align: center;
}

#teammatesDiv{
  display: flex;
  justify-content: center;
}

#historyLeft{
  width: 30%;
  height: 100%;
  float: left;
  text-align: center;
}

#historyRight{
  width: 60%;
  height: 100%;
  float: left;
}

#game{
  background-image: url(./webpage/background2.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#TitleName{
  text-align: center;
  font-size: 10vh;
  color: rgb(0, 0, 0);
  padding-top: 5vh;
  padding-bottom: 2vh;

}

#Controls{
  background-image: url(./webpage/background1.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#Tutorial{
  background-image: url(./webpage/background2.png);
  background-repeat: no-repeat;
  background-size: cover;

}

#History{
  background-image: url(./webpage/background1.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#Team{
  background-image: url(./webpage/background2.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#Teammates{
  border: 0px solid black;
  width: 70%;
  align-self: center;
}

#GameContainer{
 margin: auto;
 padding-top: 8vh;
 height: 70vh;
}