body{
  background-color: black;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

*{
  color:white;
}

#title{
  text-align: center;
  position:relative;
  bottom:10vw;
  font-size:6vw;
  transition: 1s ease;
  font-family: "Arial";
}

#title-img{
  width:18%;margin-left:auto;margin-right:auto;display:inline-block;position: relative;top:7vw;
  transition: 1s ease;
}

h3{
  text-align: center;
  position:relative;
  bottom:7.5vw;
  font-size:3vw;
  font-style: italic;
}

p{
  text-align: center;
  position:relative;
  bottom:5.5vw;
  z-index: 10;
  font-family: "Arial";
}

.start{
  height:50vw;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

.container {
  position: relative;
  width: 100%;
  bottom:8.5vw;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27vw;
  height: 45vw;
  width: 45vw;
  opacity: 0;
  margin-top:2.5vw;
  transition: .5s ease;
  background-color: #414767;
  border-radius:50%;
}

.container:hover .overlay {
  opacity: .6;
}

.text {
  color: white;
  font-size: 4vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


#questions{
  width:70%;
  height:65vw;
  margin:auto;
  display:none;
}

#question{
  color: black;
  background: white;
  height: 16%;
  padding: 2vw;
  border-radius: 2vw 2vw 0 0;
  font-size: 3vw;
  text-align: center;
  font-family: "Georgia";
}

#answers{
  color: black; 
  margin-top:2%;
  height: 65%;
  position: relative;
}

.answers{
  background:white;
  width:44%;
  height:40%;
  padding: 2vw;
  position: absolute;
  color:black;
  font-size: 4vw;
  text-align: center;
  vertical-align: center;
  font-family: 'Lalezar', cursive;
}

.answers:hover{
  background:gray;
}

#answer0{
  left:0;
  top:0;
}
#answer1{
  right:0;
  top:0;
}
#answer2{
  left:0;
  bottom:0;
}
#answer3{
  right:0;
  bottom:0;
}

#horse{
  display: block;
  position: absolute;
  left: 1%;
  top: 45%;
  background: white;
  font-size: 9vw;
  color: black;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: 2s ease;
  width:100%;
  text-align: center;
  font-family: "Arial";
}

#strikes{
  margin: auto;
  margin-left: 38.5vw;
  margin-bottom: 1vw;
  display: none;
  position: relative;
  bottom: 3vw;
}
.strike{
  opacity: 0.2;
  transition: 1s ease;
  width: 5vw;
  display: inline-block;
  margin: 1vw;
}

.unused{
  color: gray;
}

.used{
  color: red;
}

#country-choices{
  display: none;
  overflow: hidden;
  position: relative;
  bottom:4vw;
}

.country{
  display:inline-block;
  background: white;
  width:30%;
  margin:1vw;
  cursor:pointer;
}

.country-name{
  color:black;
  text-align: center
}

.country img{
  width:100%;
  height:50%;
}

.list{
  width:70%;
  height:70vh;
  margin:auto;
  overflow-y: scroll;
}

.answers img{
  width:80%;
}

#insult{
  width:50%;
  left: 22%;
  top: 50%;
  color:black;
  position: absolute;
  visibility: hidden;
  transition: .5s ease;
  z-index: 20;
  padding:3vw;
  font-size:4vw;
  text-align:center;
}


.score{
  position:absolute;
  top:2vh;
  right:2vw;
  height:3vw;
  width:10vw;
  border: solid white 0.4vw;
  font-family: 'VT323', monospace;
}

.score-label{
  font-size:2.5vw;
  float:left;
  padding: 0.2vw;
}

#score{
  background:white;
  float:right;
  padding: 0.2vw;
  width:40%;
  height:90%;
  color:black;
  font-size:2.5vw;
  text-align: right;
}

#score-box{
  display: none;
}


.timer{
  width:7vw;
  position:absolute;
  top:2vh;
  left:2vw;
  border: solid white 0.4vw;
  font-family: 'VT323', monospace;
  background: white;
  text-align:center;
  transition: 1s ease;
}

#timer{
  width:100%;color: black;display:inline-block;
  transition: 1s ease;
}