*{


}
body{
  height:100%;
  width:100%;
  font-family: Futura;
  text-align: justify;
  font-size: 28px;
  background-color: #7f8c8d;
  margin:0;
  padding:0;
  z-index:0;
}



#header{

  display:inline-block;
  height:180px;
  width: 95%;
  background: #000080;
  text-align: center;
  float:center;
  color: #ecf0f1 ;
  padding-top: 0;
  margin-top: 2%;
  padding-bottom: 2%;
  margin-left: 0;
  margin-right: 0;
  font-size: 100%;
  font-family: Futura;
    box-shadow:0px 4px 10px 5px #082642;

}

#footer{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width:100%;
  height: 800px;

  margin-left: 0;
  margin-right: 0;


}

#mainDiv{
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  background: #B3B9F0;
  color:#000080;
  padding-top: 2%;
  height:40%;


  font-family: Futura;
  font-size: 100%;
  margin:0;
  box-shadow:0px 4px 8px 5px #082642;
  position: relative;
  z-index:9999;
}
#checkbox{
  color:white;
  margin-bottom: 1%;
}
#button{
  height: 60px;
  width: 60px;
  color: #ecf0f1;
  background: linear-gradient(#90C6F6,#266FB2);
  border:0;
  font-family: Futura;
  text-align: center;
  font-size: 75%;
  border-radius: 50px;
  outline:none;
  margin-bottom: 1%;
  margin-top: -3%;

}
#button:active{
  background:#266FB2;
  color:#CDCDCD;
}



#coursediv{
  height: 400px;
  width:400px;
}
#courseP{
  font-size: 36px;
  color:#000080;
  text-decoration: none;
}
#courseP:hover{
  cursor:pointer;
  color: #549F93;
}

#a{
  font-size: 65%;
  margin-left: 1%;

}
.style{
  border:0;

  border-radius: 50px;
  margin:3%;
  height: 20px;
  width:20px;
  outline: none;
}
#style1:active{
  background:#324A6D;
}
#style2:active{
  background:#c0392b;
}
#style3:active{
  background:#977D44;
}
#styleP{
  color: #ecf0f1;
  font-size: 80%;
  margin-top: 3%;
  margin-bottom: 2%;
}
#style1{
  background:linear-gradient(#58819A,#2c3e50);
}
  #style2{
    background: linear-gradient(#D19899,#9B1D20);
  }
    #style3{
      background: linear-gradient(#FFF1D7,#BAA47B);
    }
#signatureA{
  margin-top: 1%;
  color: #2c3e50;
  font-size: 60%;

  /*
  transform: rotate(90deg);
  white-space: nowrap;
  */


  width:100%;
  height:10%;


}



.medium{
  height:700px;
  width:2%;
  background-color: #ecf0f1;
  float:left;
  position: relative;
  z-index:0;
}

.small{
  height:700px;
  width:1%;
  background-color: #2c3e50;
  float:left;
  position: relative;
  z-index:0;
}
#xl{

  display:inline-block;
  height:180px;
  width: 95%;
  background: #000080;
  text-align: center;
  float:center;
  color: #ecf0f1 ;
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 2%;
  margin-left: 0;
  margin-right: 0;
  font-size: 100%;
  font-family: Futura;
  box-shadow:0px 4px 8px 5px #082642;


  z-index:0;
}