body {
    background-image:url("background-image.jpg");
    position:relative;
}

.finishedDiv {
  position:absolute;
  background-color:#eaeffa;
  border: 1px solid #d3d3d3;
  margin-left: 5%;
  margin-right: 5%;
  width:90%;
  top:10%;
  height:80vh;
  color:black;
}

.closeImg {
  float:right;
}
.finishedTitle {
  font-size: 3vw;
  margin-bottom:5%;
  text-align:center;
  color:white;
  background-color: #5a82d8;
}
.finishedStats {
  font-size: 2vw;
}
.reward {
  margin-top:5%;
  font-size:2vw;
}
.inputDiv {
    background-color: #2a52a2;
    color:white;
    padding:1%;
    margin-left:10%;
    margin-right:10%;
    font-size: 20px;
}
.mainDiv {
    background-color:#fadea0;
    height:65vh;
    margin-left: 10%;
    margin-right: 10%;
    margin-top:2%;
    margin-bottom: 10%;
}
.calculationDiv {
  font-size: 2vw;
  text-align: center;
}

.resultDiv {
  text-align:center;
  font-size:2vw;
}

.nextStepDiv {
  padding-top:1%;
  margin-right: 2%;
}

.nextStepDiv button {
 position:relative;
 left:2%;
 border-radius: 4px;
 background-color: #258039;
 border: none;
 color: #FFFFFF;
 font-size: 20px;
 padding: 5px;
 transition: all 0.5s;
 cursor: pointer;
}

.funFactBtn {
   border-radius: 4px;
   background-color: #258039;
   border: none;
   color: #FFFFFF;
   text-align: center;
   font-size: 20px;
   padding: 5px;
   width:12%;
   transition: all 0.5s;
   cursor: pointer;
   margin-right:1%;
}

button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}
nav {
  background-color: #cf3721;
  text-align: center;
  padding-bottom: 1%;
  padding-top:1%;
  margin-bottom:1%;
  color:white;
  font-size:24px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}

.rulesDiv {
  background-color: #cf3721;
  color: white;
  margin-top:1%;
  padding:1%;
  margin-left:10%;
  margin-right:10%;
}

.funFactDiv {
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
  margin-top:1%;
  margin-bottom:1%;
  padding-top:1%;
  padding-bottom:1%;
  border-radius:5px;
  font-size:20px;
}

.spanNum1 {
   color: #e6194B; /*red*/
   font-weight: bold;
 }
 .spanNum2 {
   color: #f58231; /*orange*/
   font-weight: bold;
 }
 .spanNum3 {
   color: #3cb44b; /*green*/
   font-weight: bold;
 }
 .spanNum4 {
   color: #42d4f4; /*cyan*/
   font-weight: bold;
 }
 .spanNum5 {
   color: #4363d8; /*blue*/
   font-weight: bold;
 }
 .spanNum6 {
   color: #911eb4; /*purple*/
   font-weight: bold;
 }
 .spanNum7 {
   color: #f032e6; /*magenta*/
   font-weight: bold;
 }
 .spanNum8 {
   color: #a9a9a9; /*grey*/
   font-weight: bold;
 }
 .spanNum9 {
   color: #800000; /*maroon*/
   font-weight: bold;
 }
 .spanNum10 {
   color: #e6beff; /*lavender*/
   font-weight: bold;
 }