/*TAG SELECTORS*/
a{
  text-decoration:none;
}

a:active{
  text-decoration:none;
}

a:hover{
  text-decoration: none;
}

a:visited{
  text-decoration:none;
}

body{
  background-color: #2361AD;
  /*background-image: url('../img/flags.jpg');*/
}

h1{
  color:yellow;
  font-family: Ardarling;
  font-size: 10vh;
  margin-bottom: 30px;
  text-align:center;
}

h2{
  color:#fff;
  font-family: Ardarling;
  font-size: 7vh;
  text-align:center;
}

h3{
  background-color: rgba(164,164,164,0.2);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #DEDEDE;
  font-family: Dernier;
  font-size: 4vw;
  margin:20px 10%;
  padding: 10px;
  text-align: center;
}

h4{
  color:#fff;
  font-family: Ardarling;
  font-size: 7vh;
  text-align:center;
}

h6{
  color:yellow;
  font-family: Ardarling;
  font-size: 5vh;
  margin-top:30px;
  text-align:center;
}

nav{
  font-family: Dernier;
  font-size: 24 px;
}

nav li{
  font-size: 18px;
}

ol{
  font-family: Ardarling;
  font-size:5vh;
  text-align: center;
  text-transform: lowercase;
}

span{
  font-family: Dernier;
  font-size: 3vh;
}

/*CLASS SELECTORS*/
.bigButton{
  background-color: #FAD813 ;
  border-radius: 5px ;
  box-shadow: 0px 0px 10px #D1B411;
  color: #fff;
  cursor: pointer;
  font-family: TypoSlab;
  font-size: 36px;
  max-width: 250px;
  min-width: 100px;
  margin: 15px auto;
  padding:5px;
  text-decoration: none;

}

.bigButton:hover{
background-color: #D1B411;
box-shadow: 0px 0px 20px #fff;
font-family: 36px;
font-weight:bold;
text-decoration: none;
transform: scale(1.1);
}

.bigButton:active{
  background-color: #FAD813 ;
  box-shadow: 0px 0px 10px #D1B411;
  text-decoration: none;
  transform: scale(1);
}

.bigButton a{
  color: #fff;
  text-decoration: none;
}
.bigButton a:visited{
  color: #fff;
  text-decoration: none;
}

.bigButton:visited{
  color: #fff;
  text-decoration: none;
}

.buttons{
  background-color: #FAD813 ;
  border-radius: 5px ;
  box-shadow: 0px 0px 10px #D1B411;
  color: #fff;
  cursor: pointer;
  font-family: TypoSlab;
  font-size: 4vh;
  max-width: 260px;
  max-height:60px;
  min-width: 100px;
  margin: 15px auto;
  padding:5px;
  text-align: center;
  text-decoration: none;

}

.buttons:hover{
background-color: #D1B411;
box-shadow: 0px 0px 20px #fff;
font-family: 36px;
font-weight:bold;
text-decoration: none;
transform: scale(1.1);
}

.buttons:active{
  background-color: #FAD813 ;
  box-shadow: 0px 0px 10px #D1B411;
  text-decoration: none;
  transform: scale(1);
}

.buttons a:visited{
  color: #fff;
  text-decoration: none;
}

.buttons:visited{
  color: #fff;
  text-decoration: none;
}

.buttons a{
  color: #fff;
  text-decoration: none;
}

.buttonContainer{
  text-align:center;
}

.choices{
  background-color: #FAD813 ;
  border-radius: 5px ;
  box-shadow: 0px 0px 10px #D1B411;
  color: #fff;
  cursor: pointer;
  font-family: TypoSlab;
  font-size: 2vw;
  width: 260px;
  word-wrap: break-word;
  margin: 15px auto;
  padding:5px;
  text-align: center;
  text-decoration: none;

}

.choices:hover{
background-color: #D1B411;
box-shadow: 0px 0px 20px #fff;
font-family: 36px;
font-weight:bold;
text-decoration: none;
transform: scale(1.1);
}

.choices:active{
  background-color: #FAD813 ;
  box-shadow: 0px 0px 15px 10px #D1B411;
  text-decoration: none;
  transform: scale(1);
}

.endGame{
  background-color: #FA5858
}

.endGame:hover{
  background-color: #CE1126;
  text-shadow: 0 0 100px #fff !important;
}

.endGame a{
  color: #666 !important;
}
.endGame a:hover{
  color: #fff !important;
  text-shadow: 0 0 100px #fff !important;
}

.hpDiv{
    text-align:center;
}

.info{
  background-color: rgba(164,164,164,0.2);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #DEDEDE;
  font-family: Dernier;
  font-size:18px;
  margin-bottom:20px;
  margin-top: 20px;
  padding: 10px;
  text-align: center;
}

.mainFlag{
  border:3px solid #fff;
  border-radius:5px;
  box-shadow: 0px 0px 15px 5px; #dedede;
  height: 170px;
  margin: 20px auto;
  width:260px;
}

.modal{
  background-color: rgb(40,44,52);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #DEDEDE;
  color: #fff;
  font-family: Dernier;
  font-size: 4vh;
  margin: 10% auto;
  padding: 10px;
  text-align: center;
  width:80%;
}

.modalClose{
  cursor: pointer;
}

.modale{
  background-color: rgb(40,44,52);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #DEDEDE;
  color: #fff;
  font-family: Dernier;
  font-size: 4vh;
  margin: 10% auto;
  padding: 10px;
  text-align: center;
  width:80%;
}

.player{
  background-color:#505662;
  border-radius:10px;
  box-shadow: 0px 0px 15px 5px; #dedede;
  color: #fff;
  display:block;
  font-family: Ardarling;
  font-size: 36px;
  margin: 20px auto;
  text-align:center;
  text-transform: uppercase;
  width:70%;
}

.recordContainer{
  background-color: #fff;
  border-radius: 5px;
  text-align:center;
}

.smallFlags{
  border:2px solid #fff;
  border-radius:3px;
  box-shadow: 0px 0px 10px 0px;
  height: 100px;
  margin: 20px auto;
  width: 170px;
}

.smallFlags:hover{
  box-shadow: 0px 0px 10px 5px #FFCE00;
  transform: scale(1.1) rotate(15deg) ;
}

.smallFlags:active{
  box-shadow: 0px 0px 20px 10px #FFCE00;
  transform: scale(1) rotate(15deg);
}

/*ID SELECTORS */

#endGameLayer{
  background-color:rgba(166,166,166,0.6);
	height:100%;
	position: fixed;
	top:0;
	width:100%;
	z-index: 12;
}

#endGameModal{
  background-color: rgb(40,44,52);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #DEDEDE;
  color: #fff;
  font-family: Dernier;
  font-size: 4vh;
  margin: 10% auto;
  padding: 10px;
  text-align: center;
  width:80%;
}

#endGameModal .choices{
  display: inline;
}

#helpModal{
  display: none;
}

#info{
  font-size: 24px;
}

#layer{
  background-color:rgba(166,166,166,0.6);
  display:none;
	height:100%;
	position: fixed;
	top:0;
	width:100%;
	z-index: 12;
}

#main{
  background-color: rgba(40,44,52,0.6);
  border-radius: 5px;
  box-shadow: 0px 0px 10px #dedede;
  color: #fff;
}

#recordLayer{
  background-color:rgba(166,166,166,0.6);
	height:100%;
	position: fixed;
	top:0;
	width:100%;
	z-index: 12;
}

#recordModal{
  display: block;
}



/*IMPORT SELECTORS*/
@font-face {
    font-family: Dernier;
    src: url(../font/Dernier.ttf);
}
@font-face {
    font-family: Neon;
    src: url(../font/Neon Glow.ttf);
}
@font-face {
    font-family: Nowadays;
    src: url(../font/Noewadays Regular.ttf);
}
@font-face {
    font-family: Perfect;
    src: url(../font/Perfect_fonts_CC.ttf);
}
@font-face {
    font-family: Roundy;
    src: url(../font/Roundy Font v1.ttf);
}
@font-face {
    font-family: TypoSlab;
    src: url(../font/TypoSlab_inlineDemo.otf);
}
@font-face {
    font-family: Volt;
    src: url(../font/volt___.ttf);
}
@font-face {
    font-family: Znikomit;
    src: url(../font/ZnikomitNo25.otf);
}

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

/*MEDIA QUERY TABLET */
@media screen and (max-width: 1125px){
.modeImg{
  width:90%;
}
}
@media screen and (max-width: 767px){
.modeImg{
  width:60%;
}


}

/*MEDIA QUERY MOBILE*/
@media screen and (max-width: 600px){

h1{
  font-size: 7vw;
  padding-left: 10%;
  padding-right: 10%;
}

h2{
  font-size: 7vw;
  padding-left: 10%;
  padding-right: 10%;
}

h3{
  font-size: 7vw;
  padding-left: 10%;
  padding-right: 10%;
}

h4{
  font-size: 7vw;
  padding-left: 10%;
  padding-right: 10%;
}

h6{
  font-size: 4vh;
  padding-left: 10%;
  padding-right: 10%;
}

/*Id Selectors*/
#hpLogo{
  max-width: 280px;
  width:95%;
}

/*Class Selectors*/
.bigButton{
  font-size: 24px;
  width: 80%;
}

.choices{
  font-size:6vw;
  margin: 10px auto;
  width:230px;
}

.mainFlag{
  height: 120px;
  margin: 10px auto;
  width:200px;
}

.modal{
    font-size: 3vh;
    margin: 10% auto 40%;
}

.modeImg{
  width:80%;
}

.player{

  font-size: 4vw;
  padding-bottom:10px;
  padding-top:10px;
  width:70%;
}

.smallFlags{
  border:2px solid #fff;
  border-radius:3px;
  box-shadow: 0px 0px 10px 0px;
  height: 70px;
  margin: 20px auto;
  width: 120px;
}



}