body{
   font-family: Arial, Helvetica, sans-serif;
   background-color:#FFFFFF;
}



header {
  text-align:center;
  list-style:none;
  font-size:30px;
  font-weight:bold;


}

.sentbox{
    width:20%;
    height: 17%;
    background-color:#FCC;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    bottom:0px;
    text-align:center;
    outline:solid black;
    overflow:hidden;
    justify-content: space-between;
    margin-top: 40px;

}

.sentbox:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}


li{

  display:inline;
  padding:30px;
}


body {

  text-align:center;
  font-size:20px;
  font-weight:bold;

}




#element2 {
  display:inline-block; 
  width:35%; 
  padding:10px; 
  margin-top:-100px; 
  font-weight:lighter;
  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
}


#instruct1{
  font-size:25px;
  text-decoration:underline;
  background: rgb(0,255,118);
  background: linear-gradient(0deg, rgba(0,255,118,0.6334908963585435) 42%, rgba(255,255,255,0.48783263305322133) 92%);


}
#instruct2{
  font-size:25px;
  text-decoration:underline;
  background: rgb(186,12,185);
  background: linear-gradient(0deg, rgba(186,12,185,0.5662640056022409) 0%, rgba(245,230,243,1) 100%);
}
#instruct3{
  font-size:25px;
  background: rgb(255,0,0);
  background: linear-gradient(0deg, rgba(255,0,0,0.5158438375350141) 42%, rgba(255,255,255,0.48783263305322133) 100%);
   text-decoration:underline;
}

.answer{
  border:1px solid black;
  border-radius:4px;
  font-size:20px;
  padding:10px 0;
  text-align:center;
}

#title {
  background: rgb(241,255,0);
  background: linear-gradient(0deg, rgba(241,255,0,0.48783263305322133) 76%, rgba(255,255,255,0.5158438375350141) 93%);
}


#customAlert{
 
  position:fixed;
  top:0;
  left:300px;
  right: 0;
  bottom:0;
  z-index:999;
  display:none;


}

#box {
  border-radius:5px;
  margin-top:100px;
  margin-left:400px;
  height:15%;
  width: 500px;
  text-align:center;
  box-shadow:2px 2px 8px black; 
  background-color:white;

}

.boxHead{
  background-color:#118FEB;
  color:black;
  font-size:12px
  padding:5px;
}

#content {
  margin-top: 30px;
  text-align:center;

}

#closeAlert{

  height:25px;
  width:80px;
  border-radius:8px;
  background-color:#118FEB;
  cursor:pointer;
}


#clickme{
   height:25px;
   width:80px;
   border-radius:8px;
   background: rgb(34,193,195);
   background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
   cursor:pointer;

}

#reset{
  height:25px;
  width:80px;
  border-radius:8px;
  background: rgb(34,193,195);
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
  cursor:pointer;
}



#home{
   height:25px;
   width:80px;
   border-radius:8px;
   background: rgb(34,193,195);
   background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
   cursor:pointer;
}


.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top:-25px;
  overflow-x: hidden;
  padding-top: 20vh;
  appearance:button;
  -moz-appearance:button;
  -webkit-appearance:button;
  overflow:hidden;
  background-color:transparent;


}


.sidenav p {
  text-decoration: none;
  font-size: 24px;
  width:125px;
  color: #2196F3;
  display: block;
  padding: 2px 5px;
  color:black;
  border-radius:12px;
  background: rgb(34,193,195);
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.sidenav #back{
  border:1px white;
  font-size:68px;
  color:red;
  float:left;
  background-color:transparent;
  color:#303C6C;
}



#back:hover{
  color:red;
  cursor:hand;
}
  
#clickme:hover{

 background-color:#303C6C;
}body{
   font-family: Arial, Helvetica, sans-serif;
   background-color:#FFFFFF;
}



header {
  text-align:center;
  list-style:none;
  font-size:30px;
  font-weight:bold;


}

.sentbox{
    width:20%;
    height: 17%;
    background-color:#FCC;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    bottom:0px;
    text-align:center;
    outline:solid black;
    overflow:hidden;
    justify-content: space-between;
    margin-top: 40px;

}

.sentbox:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}


li{

  display:inline;
  padding:30px;
}


body {

  text-align:center;
  font-size:20px;
  font-weight:bold;

}




#element2 {
  display:inline-block; 
  width:35%; 
  padding:10px; 
  margin-top:-100px; 
  font-weight:lighter;
  box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
}


#instruct1{
  font-size:25px;
  text-decoration:underline;
  background: rgb(0,255,118);
  background: linear-gradient(0deg, rgba(0,255,118,0.6334908963585435) 42%, rgba(255,255,255,0.48783263305322133) 92%);


}
#instruct2{
  font-size:25px;
  text-decoration:underline;
  background: rgb(186,12,185);
  background: linear-gradient(0deg, rgba(186,12,185,0.5662640056022409) 0%, rgba(245,230,243,1) 100%);
}
#instruct3{
  font-size:25px;
  background: rgb(255,0,0);
  background: linear-gradient(0deg, rgba(255,0,0,0.5158438375350141) 42%, rgba(255,255,255,0.48783263305322133) 100%);
   text-decoration:underline;
}

.answer{
  border:1px solid black;
  border-radius:4px;
  font-size:20px;
  padding:10px 0;
  text-align:center;
}

#title {
  background: rgb(241,255,0);
  background: linear-gradient(0deg, rgba(241,255,0,0.48783263305322133) 76%, rgba(255,255,255,0.5158438375350141) 93%);
}


#customAlert{
 
  position:fixed;
  top:0;
  left:300px;
  right: 0;
  bottom:0;
  z-index:999;
  display:none;


}

#box {
  border-radius:5px;
  margin-top:100px;
  margin-left:400px;
  height:15%;
  width: 500px;
  text-align:center;
  box-shadow:2px 2px 8px black; 
  background-color:white;

}

.boxHead{
  background-color:#118FEB;
  color:black;
  font-size:12px
  padding:5px;
}

#content {
  margin-top: 30px;
  text-align:center;

}

#closeAlert{

  height:25px;
  width:80px;
  border-radius:8px;
  background-color:#118FEB;
  cursor:pointer;
}


#clickme{
   height:25px;
   width:80px;
   border-radius:8px;
   background: rgb(34,193,195);
   background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
   cursor:pointer;

}

#reset{
  height:25px;
  width:80px;
  border-radius:8px;
  background: rgb(34,193,195);
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
  cursor:pointer;
}



#home{
   height:25px;
   width:80px;
   border-radius:8px;
   background: rgb(34,193,195);
   background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
   cursor:pointer;
}


.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top:-25px;
  overflow-x: hidden;
  padding-top: 20vh;
  appearance:button;
  -moz-appearance:button;
  -webkit-appearance:button;
  overflow:hidden;
  background-color:transparent;


}


.sidenav p {
  text-decoration: none;
  font-size: 24px;
  width:125px;
  color: #2196F3;
  display: block;
  padding: 2px 5px;
  color:black;
  border-radius:12px;
  background: rgb(34,193,195);
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(45,253,233,0.3533788515406162) 100%);
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.sidenav #back{
  border:1px white;
  font-size:68px;
  color:red;
  float:left;
  background-color:transparent;
  color:#303C6C;
}



#back:hover{
  color:red;
  cursor:hand;
}
  
#clickme:hover{

 background-color:#303C6C;
}