#container-div{
  position:relative;
  border:10px solid green;
  width:50%;
  height:60vh;
  margin:8% auto;
  border-radius:10px;
}

#current-date{
  color:#fff;
  margin:0;
  width:98%;
  padding:1%;
  font-size:24px;
  text-align:center;
  background-color: green;
  font-family: cambria math;
}
.control-div{
   padding:2% 1%;
   border:3px solid green;
   border-top: 0;
   border-left: 0;
   border-right: 0;
   position: relative;
  }

  #current-monyr{
    margin:0;
    padding:0;
    margin-left:5%;
    width:50%;
    font-size:26px;
    display: inline-block;
    color:brown;
  }

  .month-controls1{
    position: absolute;
    font-size:26px;
    font-family: arial;
    background-color: green;
    padding: 4px 15px;
    border-radius:5px;
    color:#fff;
    right:17%;
  }

 .month-controls2{
   position: absolute;
   font-size:26px;
   font-family: arial;
   background-color: green;
   padding: 4px 15px;
   border-radius:5px;
   color:#fff;
   right:10%;
 }

 .month-controls3{
   position: absolute;
   font-size:26px;
   font-family: arial;
   background-color: green;
   padding: 4px 15px;
   border-radius:5px;
   color:#fff;
   right:3%;
 }

 .month-controls1:hover,.month-controls2:hover,.month-controls3:hover{
   cursor: pointer;
   background-color: darkgreen;
 }

 .calender-table{
   width:80%;
   height: auto;
   margin: 2% auto;
 }

 .calender-table-header{
   font-size:20px;
   color:brown;
   font-family:cambria math;
 }

 .calender-table-row{
   border:1px solid blue;
 } 

.calender-table-data{
  text-align:center;
  font-size:24px;
  color:#000;
  padding:1%;
}

.calender-table-data:hover{
   color:red;
   cursor: pointer;
}

.todayDate{
  color:red;
  text-shadow:1px 1px 3px red;
}

.todayDate:hover{
  color:red;
  text-shadow:1px 1px 7px red;
}