/*-----------Stilregler basert på skjermstørrelse-----------*/
@media only screen and (max-width: 900px) {/*Gjelder for mobile/mindre enheter*/
  #gamecontainer{
    width: 580px;
    margin-left: 5%;
  }
  #nav-bar{
    width:360px;
  }
}

@media only screen and (min-width: 900px) {/*Gjelder for større enheter*/
  #gamecontainer{
    width: 64%;
    margin-left: 18%;
  }

  #nav-bar{
    width: 50%;
  }
  #nav-bar a:hover {
    background-color: black;
  }

  .box:hover{
    background: grey;
    cursor: pointer;
  }
}
/*--------------Generelle regler for siden--------------*/
*{/* Fjerner padding og margin på alle elementer */
  padding: 0;
  margin: 0;
}

body {/* Bakgrunnsfarge */
  background-color: #5b1e1e;
}

h1 {/* Header - tittel på siden*/
  font-family: headerfont;
  text-align: center;
  font-size: 70px;
  color: white;
  text-shadow: -5px 0 black, 0 5px black, 5px 0 black, 0 -5px black;
}

/* -----------Ulike eksterne Google-fonts -----------*/
@font-face {
  font-family: txtfont;
  src: url(txtfont.ttf);
}

@font-face {
  font-family: headerfont;
  src: url(headfont.ttf);
}

/* -----------Stilsetting av navigasjonsbar----------- */
#nav-bar {
  margin: auto;
  height: 54px;
}

#nav-bar a {
  float: left;
  box-sizing: border-box;
  width: 33%;

 font-family: txtfont;
 font-size: 1.2em;
 color: white;
 text-decoration: none;
 text-align: center;

 background-color: #190707;
 border-radius: 10px;
 border: 1px solid black;
 padding: 10px;
 padding-bottom: 20px;

}

.active {/*Nettsiden brukeren er på */
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px #c4c4c4;
}

/* -----------Stilsetting av "om spillet"----------- */
#about-game {
  width: 900px;
  height: 500px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  margin-bottom: 30px;
  background: white;
  box-shadow: 0 0 30px 30px white;
  overflow-y: scroll;
}
#about-game p, #about-game li{
  font-size: 18px;
  list-style: none;
  font-style: normal;
  text-align: left;
  padding-bottom: 10px;
}
.first-word{
  font-weight: bold;
}

#about-game h2, #about-game h3{
  padding: 10px;
}

/* -----------Stilsetting av "kontakt oss" -----------*/
#contact {
  width: 400px;
  height: 400px;
  text-align: center;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  margin-bottom: 30px;
  background: white;
  box-shadow: 0 0 30px 30px white;
}

.contactPadding>li{
  padding-bottom: 20px;
}

#contact li {
  list-style: none;
  font-style: oblique;
}

/*----------- Stilsetting av game container------------- */
#gamecontainer {
  position: absolute;
  box-sizing: border-box;
  height: 640px;
  margin-top: 5%;
  margin-bottom: 5%;

  background-size: cover;
  border: 9px solid #000000;
  border-radius: 10px;
  overflow: hidden;
}

/*---------------Stilsetting av tekst-spillet-----------------*/
.storyBox {
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  height: 70%;
}

.storytext {
box-sizing: border-box;
width: 70%;
margin: auto;
margin-top: 10%;
margin-bottom: 50%;

border-radius: 80px;
background: white;
box-shadow: 0 0 30px 30px white;

font-size: 20px;
color: black;
line-height: 35px;
text-align: center;
}

/*-----------Stilsetting av valg-bokssene----------------*/
 .optionBoxes {/*Valgboks-container*/
  position: absolute;
  bottom: 0px;
  box-sizing: border-box;
  height: 20%;
  width: 100%;
  margin:auto;
  background-color: white;
  box-shadow: 0 0 5px 5px white;
}

.box {/*Felles for valg-boksene*/
  display: inline-block;
  box-sizing: border-box;
  height: 100%;
  width: 49%;
}
.box:first-of-type{/*Valg 1*/
  position: absolute;
  left:0px;
}
.box:last-of-type{/*Valg 2*/
  position: absolute;
  right: 0px;
}

.boxtext {/*Teksten i valg-boksene*/
  text-align: center;
  font-size: 20px;
}

.noMarkup {/*En kan ikke markere tekst, med prefiks til ulike nettlesere*/
  user-select: none; /* Chrome og opera*/
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Microsoft Edge*/
  -webkit-touch-callout: none; /* iOS Safari -IKKE TESTET-*/
  -webkit-user-select: none; /* Safari -IKKE TESTET-*/
}
