body{
  background: #2D3E58;
  font-family: rubik;
  }

  #answer-value{
    font-family: 'verdana', cursive;
	text-transform: capitalize;
    font-size: 32px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    position: absolute;
    letter-spacing: 5px;
    width: 100%;
    text-align: center;
    top: 166px;
    left: -40px;
  } 
  .font-false{
   color:#e95e58; 
  }
  
  .font-true{
    color:#6cd586;
   }

  #close{
    color: red;
    font-size: 40px;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    }
  #messages{
  text-align: center;
  width: 100%;  
  /*background: rgba(0, 0, 0, 0.7);*/
  position: absolute;
  z-index: 9;
  height: 100%;
  }
  #name,#score,#ranking{
  display: none;  
  }
  .msg{
    border: solid 2px white;
    width: 350px;
    padding: 45px;
    color: white;
    position: relative;
    top: 100px;
    background: #437bf2;
    display: inline-block;
	font-size: 18px;
	text-align: left;
  }
  input {
    padding: 8px 15px;
    border: 2px solid white;
    font-weight: bold;
    margin: 5px 7px;
    cursor: pointer;
   }
   
   .btn-blue {
    background: linear-gradient(#53b06c, #3ec763);
    color: white;
   }
   .btn-green {
    background: linear-gradient(#1c3990, #477de1);
    color: white;
   }
   .btn-red {
    background: linear-gradient( darkred,red);
    color: white;
   }

  #wallpaper{
  width: 100%;
  text-align: center;
  }
  #wallpaper img{
    width: 750px;
    margin-top: 60px;  
  }
#rosco li, .time, .correct, .letter-container{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 200px;
  left: 45%;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  
  /*font-family: 'Bowlby One', cursive;*/
  font-family: 'verdana';
  color: white;
  font-size: 20px;
  text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
  display: inline-block;
  padding: 0 10px;
  border: 2px solid white;
  border-radius: 4px;
} 
#rosco li b{
  position: absolute;
    top: 3px;
    left: 8px;
 }

 #rosco li:nth-of-type(24) b, #rosco li:nth-of-type(13) b {
  margin-left: -3px;
 }
 #rosco li:nth-of-type(9) b {
  margin-left: 3px;
 }
 
 #legend{
 position: absolute;  
 top: 420px;
 width: 100%;
 text-align: center;
 }
 #legend section{
  width: 800px;
  display: inline-block;
 }

 .time,.correct, .letter-container{
  position: relative;
  width: 70px;
  height: 70px;
  background-image: -webkit-gradient(radial, 36 36, 223, 30 10, 0, from(rgb(0, 0, 0)), color-stop(0.4, #916227), color-stop(0.85,#fd8d04), to(#f6c07c)); 
  font-size: 26px;
  left: 0px;
  top: 0px; 
  float: left;
 }
 #rosco li,.letter-container,.blue{
  background: -webkit-gradient(radial, 36 36, 223, 30 10, 0, from(rgb(0, 0, 0)), color-stop(0.4, #10308b), color-stop(0.85,#4469d8), to(#50b0f6));
  
 }
.letter{
  font-size: 50px;
  margin-top: -6px;
  position: absolute;
  margin-left:0;
  text-transform: uppercase;
  color: #f7b666;
   
}
.change-letter{
  color: white;
  font-size: 36px;
  margin-top: 9px;
  margin-left: 9px;
  -webkit-transition: all 4s ease-in;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
 }

.red{   
  background-image: -webkit-gradient(radial, 36 36, 223, 30 10, 0, from(rgb(0, 0, 0)), color-stop(0.4, #8b1610), color-stop(0.85,#d51f16), to(#fc625a)) !important; 
 }
.green{   
  background-image: -webkit-gradient(radial, 36 36, 223, 30 10, 0, from(rgb(0, 0, 0)), color-stop(0.4, #51745b), color-stop(0.85,#51ac6c), to(#17ff50))!important; 
 }

  .time b{
  position: absolute;
  margin-top: 16px;
  left: 5px;
  }
  .correct{
    top: 85px;
    margin-left: -70px; 
    border-radius: 0 !important;
    height: 38px;
   }
  
   .letter-container{
    position: absolute;
    height: 70px;
    top: -35px;
    left: -35px;
    border-radius: 0 !important;
    z-index: 1; 
  }
   .question{
     text-align: left;
     position: relative;
     top: 15px;
     left: 120px;
    width: 600px;
    color: white;
    background: linear-gradient(#1c3990, #477de1);
    border: 1px solid white;
    padding: 8px 15px 8px 60px;
    /*letter-spacing: 1px;*/
    word-spacing: 4px;
    font-size: 20px;
   }

  #rosco li:nth-of-type(1) {
    transform: rotate(-90deg) translate(170px) rotate(90deg);
  }
  #rosco li:nth-of-type(2) {
    transform: rotate(-77deg) translate(170px) rotate(77deg);
  }
  #rosco li:nth-of-type(3) {
    transform: rotate(-63deg) translate(170px) rotate(63deg);
  }
  #rosco li:nth-of-type(4) {
    transform: rotate(-50deg) translate(170px) rotate(50deg);
  }
  #rosco li:nth-of-type(5) {
    transform: rotate(-37deg) translate(170px) rotate(37deg);
  }
  #rosco li:nth-of-type(6) {
    transform: rotate(-24deg) translate(170px) rotate(24deg);
  }
  #rosco li:nth-of-type(7) {
    transform: rotate(-11deg) translate(170px) rotate(11deg);
  }
  #rosco li:nth-of-type(8) {
    transform: rotate(2deg) translate(170px) rotate(-2deg);
  }
  #rosco li:nth-of-type(9) {
    transform: rotate(15deg) translate(170px) rotate(-15deg);
  }
  #rosco li:nth-of-type(10) {
    transform: rotate(28deg) translate(170px) rotate(-28deg);
  }
  #rosco li:nth-of-type(11) {
    transform: rotate(41deg) translate(170px) rotate(-41deg);
  }
  #rosco li:nth-of-type(12) {
    transform: rotate(54deg) translate(170px) rotate(-54deg);
  }
  #rosco li:nth-of-type(13) {
    transform: rotate(67deg) translate(170px) rotate(-67deg);
  }
  #rosco li:nth-of-type(14) {
    transform: rotate(80deg) translate(170px) rotate(-80deg);
  }
  #rosco li:nth-of-type(15) {
    transform: rotate(93deg) translate(170px) rotate(-93deg);
  }
  #rosco li:nth-of-type(16) {
    transform: rotate(106deg) translate(170px) rotate(-106deg);
  }
  #rosco li:nth-of-type(17) {
    transform: rotate(119deg) translate(170px) rotate(-119deg);
  }
  #rosco li:nth-of-type(18) {
    transform: rotate(132deg) translate(170px) rotate(-132deg);
  }
  #rosco li:nth-of-type(19) {
    transform: rotate(145deg) translate(170px) rotate(-145deg);
  }
  #rosco li:nth-of-type(20) {
    transform: rotate(159deg) translate(170px) rotate(-159deg);
  }
  #rosco li:nth-of-type(21) {
    transform: rotate(173deg) translate(170px) rotate(-173deg);
  }
  #rosco li:nth-of-type(22) {
    transform: rotate(187deg) translate(170px) rotate(-187deg);
  }
  #rosco li:nth-of-type(23) {
    transform: rotate(200deg) translate(170px) rotate(-200deg);
  }
  #rosco li:nth-of-type(24) {
    transform: rotate(214deg) translate(170px) rotate(-214deg);
  }
  #rosco li:nth-of-type(25) {
    transform: rotate(228deg) translate(170px) rotate(-228deg);
  }
  #rosco li:nth-of-type(26) {
    transform: rotate(242deg) translate(170px) rotate(-242deg);
  }
  #rosco li:nth-of-type(27) {
    transform: rotate(256deg) translate(170px) rotate(-256deg);
  }
  
@media (max-width: 768px) {
  body{
  /*background: #000;*/
  width: 100% !important;
  margin: 0px;
  }
  
  #wallpaper{
	/*width: 100%;
	text-align: center;*/
	display: none;
  }
  #wallpaper img{
   /* width: 80%;
    margin-top: 0px; */
	display: none;
  }
	#legend {
    width: 100%;		
	} 

	#legend section {
		width: 100% !important;
		display: inline-block;
	}
	.question {
		text-align: left;
		position: relative;
		/*top: 150px;
		left: 20%;*/	
		top: 0px;
		left: 10%;
		width: 80% !important;
		color: white;
		background: linear-gradient(#1c3990, #477de1);
		border: 1px solid white;
		padding: 35px 5px 8px 5px;
		/* letter-spacing: 1px; */
		word-spacing: 4px;
		font-size: 15px;	
	}


	.time {
		float: none !important;*/
		display: table-cell !important;
		left: -3%;
		top: -175px;
	}	
	.correct {
		float: none !important;*/
		display: table-cell !important;
		left: 0%;
		margin-left: 10px;
		top: -200px;
	}
	.msg {
		border: solid 2px white;
		width: 60%;
		padding: 45px;
		color: white;
		position: relative;
		top: 100px;
		background: #437bf2;
		display: inline-block;
		font-size: 15px;
		text-align: left;
	}
	
	.letter-container {
		position: absolute;
		height: 70px;
		top: -30px;
		left: -15px;
		border-radius: 0 !important;
		z-index: 1;
	}
	input {
    padding: 8px 5px;
    border: 2px solid white;
    /* font-weight: bold; */
    margin: 5px 7px;
    cursor: pointer;
	}
	#answer-value {
    font-family: 'verdana', cursive;
    text-transform: capitalize;
    font-size: 24px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    position: absolute;
    letter-spacing: 3px;
    width: 100%;
    text-align: center;
    top: 156px;
    left: 10px;
}

  #rosco li:nth-of-type(1) {
    transform: rotate(-90deg) translate(150px) rotate(90deg);
  }
  #rosco li:nth-of-type(2) {
    transform: rotate(-77deg) translate(150px) rotate(77deg);
  }
  #rosco li:nth-of-type(3) {
    transform: rotate(-63deg) translate(150px) rotate(63deg);
  }
  #rosco li:nth-of-type(4) {
    transform: rotate(-50deg) translate(150px) rotate(50deg);
  }
  #rosco li:nth-of-type(5) {
    transform: rotate(-37deg) translate(150px) rotate(37deg);
  }
  #rosco li:nth-of-type(6) {
    transform: rotate(-24deg) translate(150px) rotate(24deg);
  }
  #rosco li:nth-of-type(7) {
    transform: rotate(-11deg) translate(150px) rotate(11deg);
  }
  #rosco li:nth-of-type(8) {
    transform: rotate(2deg) translate(150px) rotate(-2deg);
  }
  #rosco li:nth-of-type(9) {
    transform: rotate(15deg) translate(150px) rotate(-15deg);
  }
  #rosco li:nth-of-type(10) {
    transform: rotate(28deg) translate(150px) rotate(-28deg);
  }
  #rosco li:nth-of-type(11) {
    transform: rotate(41deg) translate(150px) rotate(-41deg);
  }
  #rosco li:nth-of-type(12) {
    transform: rotate(54deg) translate(150px) rotate(-54deg);
  }
  #rosco li:nth-of-type(13) {
    transform: rotate(67deg) translate(150px) rotate(-67deg);
  }
  #rosco li:nth-of-type(14) {
    transform: rotate(80deg) translate(150px) rotate(-80deg);
  }
  #rosco li:nth-of-type(15) {
    transform: rotate(93deg) translate(150px) rotate(-93deg);
  }
  #rosco li:nth-of-type(16) {
    transform: rotate(106deg) translate(150px) rotate(-106deg);
  }
  #rosco li:nth-of-type(17) {
    transform: rotate(119deg) translate(150px) rotate(-119deg);
  }
  #rosco li:nth-of-type(18) {
    transform: rotate(132deg) translate(150px) rotate(-132deg);
  }
  #rosco li:nth-of-type(19) {
    transform: rotate(145deg) translate(150px) rotate(-145deg);
  }
  #rosco li:nth-of-type(20) {
    transform: rotate(159deg) translate(150px) rotate(-159deg);
  }
  #rosco li:nth-of-type(21) {
    transform: rotate(173deg) translate(150px) rotate(-173deg);
  }
  #rosco li:nth-of-type(22) {
    transform: rotate(187deg) translate(150px) rotate(-187deg);
  }
  #rosco li:nth-of-type(23) {
    transform: rotate(200deg) translate(150px) rotate(-200deg);
  }
  #rosco li:nth-of-type(24) {
    transform: rotate(214deg) translate(150px) rotate(-214deg);
  }
  #rosco li:nth-of-type(25) {
    transform: rotate(228deg) translate(150px) rotate(-228deg);
  }
  #rosco li:nth-of-type(26) {
    transform: rotate(242deg) translate(150px) rotate(-242deg);
  }
  #rosco li:nth-of-type(27) {
    transform: rotate(256deg) translate(150px) rotate(-256deg);
  }


}