index.css

.header{
background-color:powderblue;
font-size:50px;
height:70px;
margin-bottom:10;
font-family: "Times New Roman";
}

.btn{

  width:20%; 
  height:40;
  margin-bottom:20;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #3f3284;
  border: 0;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
font-family: "Times New Roman";

}

.btn:hover,.btn:active,.btn:focus {
  background: #6f60dd;
  
}
.main{
text-align:center;
font-family: "Times New Roman";
}
.left{
width:29%;
float:left;
border-left:2px solid;
border-right:2px solid;
border-top:2px solid;
height:100%;
padding-top:20;
font-family: "Times New Roman";
}
.right{

width:70%;
float:left;
height:100%;
border-right:2px solid;
border-top:2px solid;
font-family: "Times New Roman";

}

.row:after{

content: "";
  display: table;
  clear: both;


}

ol.even {
  position: relative;
  left: 5.45455rem;
}

ol.odd {
  position: relative;
  margin-bottom: -4.5%;
}

.hex {
  position: relative;
  margin: 1em auto;
  width: 6rem;
  height: 10.2rem;
  background: #3f3284;
  transform: rotate(-90deg);
  display: inline-block;
  list-style-type: none;
  margin-right: 4.61538rem;
  transition: all 150ms ease-in-out;
  z-index: 2;
  float: left;
  
}

.hex:before, .hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  z-index: -1;
}

.hex:before {
  transform: rotate(60deg);
}

.hex:after {
  transform: rotate(-60deg);
}

.hex:hover {
  background: #6f60dd;
  cursor: pointer;
}


.hex .hex-content {
   position: absolute;
   top: 50%;
   left: 50%;
font-family: "Times New Roman";
   transform: translate(-50%, -50%) rotate(90deg);

   color: white;
 }
 
 .box {
	 position: absolute;
	 top: 30%;
     left: 45%;
	 border: 10px solid transparent;
   font-family: "Times New Roman";
 }