* {

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  /*font-family: 'Gloria Hallelujah', cursive; */
  font-family: 'Architects Daughter', cursive;
}
body {
  width:100vw;
  min-height: 100vh;
  max-height: 100vh;
  text-align:center;
  /*margin-top:20px;*/
  background-image:url("../images/kingsLanding.jpg");
  background-size:cover;
  background-position:center;
}
h1 {
  font-size: 2.5em;
  color:white;
}
p {
  padding:0px 0px 0px 0px;
}
.boardContainer {
  position:relative;
  width:400px;
  height:400px;
  background-color: rgba(215, 190, 159, 0.5);
  margin:auto auto;
}
.tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, .tile8, .tile9 {
  cursor:pointer;;
  font-size:2.3em;
}
.tile1:hover, .tile2:hover, .tile3:hover, .tile4:hover, .tile5:hover, .tile6:hover, .tile7:hover, .tile8:hover, .tile9:hover {
  background-color: #FF4040;

}
table, th, td {
  position: relative;
    border: 2px solid black;
    width:33%;
    height:33%;
}

section {
  position:fixed;
  left:0px;
  bottom:0px;
  height:26vh;
  width:25vw;
  z-index:10;
  display:inline-block;
  background-color: rgba(0,0,0,0.7);
}
article {
  position:relative;
  width:70vw;
  display:inline-block;
}
aside {
  background-color: ghostwhite;
  border:1px solid grey;
  width:35vw;
  height:40vh;
  position:fixed;
  display:inline-block;
  left:35vw;
  top:30vh;
  transition:4s all;
  z-index:999;
}
.asideClicked {
  background-color: ghostwhite;
  border:1px solid grey;
  width:10vw;
  height:10vh;
  position:fixed;
  display:inline-block;
  left:0vw;
  top:30vh;
  transition:4s all;
  z-index:999;
}


#reset, #enterName, #location, #house {
  position:relative;
  display:inline-block;
  float:left;
  width:50%;
  height:50%;
  background-color: rgba(0,0,0,0.2);
  text-align: center;
  color:white;
  font-size:1em;
  padding-top:2em;
  border:1px solid black;
}
#house:hover, #reset:hover, #enterName:hover, #location:hover {
  background-color: #FF4040;
  cursor:pointer;
}
.menu {
  position:relative;
  width:100px;
  height:50px;
  background-color: rgba(0,0,0,0.2);
  text-align: center;
  color:white;
  font-size:1em;
}
.menu:hover {
  background-color: #FF4040;
  cursor: pointer;
}

.scoreBoardContainer {
  width: 25vw;
  height: 26vh;
  z-index:99999;
  background-color: rgba(0,0,0,0);
  float:left;
  position:fixed;
  left:0px;
  top:0px;
  text-align:left;
  /* bottom:26vh; */
}
.scoreHeadingContainer {
  background-color: rgba(0,0,0,0);
  width:23vw;
  height:8vh;
  margin-left:2vw;
  color: #FF4040;
  font-size:1.3em;
  margin-bottom:0px;
}
.scoreContentContainer {
  color: #FF4040;
  font-size:1em;
  margin-left:2vw;
  margin-top:0px;
}

.restartButton {
  width: 40%;
  height: 10vh ;
  background:rgba(255, 64, 64, 0.6);
  z-index: 999999999999 ;
  position: relative ;
  margin: 1.2em auto;
  color: white ;
  font-size: 0.35em;
  padding-top: 0.8em;
  transition: 0.7s all;
  border: 1px solid black;
}
.restartButton:hover {
  background: #FF4040;
  cursor:pointer;
  margin: 1em auto;
  width:42%;
  height:11vh;
  font-size:0.4em;
  position: relative;
  z-index: 200;
}
img {
  width:100px;
  height:100px;
  z-index:999999999999;
}

.environmentContainer {
  width: 15vw;
  height: 60vh;
  background-color: background: rgba(0, 0, 0, 0.5);
  position:fixed;
  right:0px;
  top:15%;
  transition:1s all;
  z-index: 99999;

}
.environment1, .environment2, .environment3 {
  position:relative;
  float:right;
  width:15vw;
  height:20vh;
  background-color: black;
  border: 1px solid black;
  opacity:0.4;
  font-size:1.8em;
  color:white;
}
.environment1 {
  background-image: url("../images/battleOnIce.jpg");
  background-size:cover;
}
.environment2 {
  background-image: url("../images/theWall.jpg");
  background-size:cover;
}
.environment3 {
  background-image: url("../images/kingsLanding.jpg");
  background-size:cover;
}
.environment1:hover, .environment2:hover, .environment3:hover {
  opacity:1;
  cursor:pointer;
}
.environmentToggleOff {
  right:-18vw;
}
.houseContainer {
  width:40vw;
  height:60vh;
  position:fixed;
  background-color: rgba(0, 0, 0, 0.5);
  left:30%;
  bottom:20%;
  opacity:0.9;
  transition:2.5s;
  z-index: 9999999;
}
.stark, .lannister, .baratheon, .tyrell, .greyjoy, .targ {
  width:33.1%;
  height:40%;
  float:left;
  position:relative;
  border: 1px solid black;
}
.stark {
  background-image:url("../images/stark.png");
  background-position:center;
  background-size:auto;
  background-repeat:no-repeat;;
}
.lannister {
  background-image:url("../images/lannister.png");
  background-position:center;
  background-size:auto;
  background-repeat:no-repeat;;
}
.baratheon {
  background-image:url("../images/baratheon.png");
  background-position:center;
  background-size:auto;
  background-repeat:no-repeat;;
}
.tyrell {
  background-image:url("../images/tyrell.png");
  background-position:center;
  background-size:auto;
  background-repeat:no-repeat;;
}
.greyjoy {
  background-image:url("../images/greyjoy.png");
  background-position:center;
  background-size:auto;
  background-repeat:no-repeat;;
}
.targ {
  background-image:url("../images/targ.png");
  background-position:center;
  background-size:auto;
  background-repeat:no-repeat;;
}
.stark:hover, .lannister:hover, .baratheon:hover, .tyrell:hover, .greyjoy:hover, .targ:hover {
  background: red;
  opacity:0.5;
  cursor:pointer;
}
.houseToggleOff {
  bottom: -65vh;
}
#playerSelectHouse {
  color:white;
}


.victory {
  width: 40vw;
  height: 45vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999999999;
  position: fixed;
  top: 28%;
  left: 30%;
  font-size: 60px;
  color: white;
  padding-top: 1em;


}


@media ( max-width: 1280px ) and ( min-width: 721px ){

  .boardContainer {
    position:relative;
    width:420px;
    height:420px;
    background-color: rgba(215, 190, 159, 0.5);
    margin:auto auto;
  }
  img {
    width:90px;
    height:90px;
    z-index:999999999999;
  }
  .options-container {
    width: 20%;

  }
}

/* Phone */
@media ( max-width: 720px ) {

  .boardContainer {
    position:relative;

    width:260px;
    height:260px;
    background-color: rgba(215, 190, 159, 0.5);
    margin:auto auto;

  }
  h1 {
    font-size: 1.2em;
  }
  img {
    width:50px;
    height:50px;
    z-index:999999999999;
  }

  .options-container {
    width:100%
  }

  .scoreBoardContainer {
    width: 100vw;
    height: 26vh;
    z-index:99999;
    background-color: rgba(0,0,0,0);
    float:left;
    position:fixed;
    left:0px;
    top:50%;
    text-align:left;
    /* bottom:26vh; */

  }
  #scoreDigits {
    display: none;
  }

  .scoreContentContainer p {
    display: inline-block;
  }
  #playerTwoScore {

  }
  #playerTwoName {
    margin-left: 47%
  }

  .environmentContainer {
    width: 60vw;
    height: 60vh;
    right:0px;
    top:15%;

  }
  .environmentToggleOff {
    right:-60vw;
  }
  .environment1, .environment2, .environment3 {
    position:relative;
    float:right;
    width:60vw;
    height:20vh;
    background-color: black;
    border: 1px solid black;
    opacity:0.4;
    font-size:1.8em;
    color:white;
  }

  .houseContainer {
    width:90%;
    height:60%;
    position:fixed;
    background-color: rgba(0, 0, 0, 0.5);
    left:5%;
    bottom:30%;
    opacity:0.9;
    transition:2.5s;
  }
  .houseToggleOff {
    bottom: -60%;
  }

  .victory {
    width: 80vw;
    height: 60vh;
    background: rgba(0,0,0,0.5);
    z-index: 9999999999;
    position: fixed;
    top: 5%;
    left: 10%;
    font-size: 4em;
    color: white;
    padding-top: 0.5em;
  }

  .restartButton {
    width: 70vw;
    height: 15vh;
  }

}