.calendar {
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2vmax;
  width: 80%;
  height: 100%;
  display: inline-block;
}
.headerrow {
  width: 100%;
  /* padding: 1vmax 0; */
  height: 3vmax;
  background-color: MEDIUMAQUAMARINE;
}
.footerrow {
  width: 100%;
  height: 1.2vmax;
  font-size: 0.6vmax;
  background-color: transparent;
  background-color: #ace5d2;
}
.calbutton {
  float: left;
  display: inline-block;
  width: 20%;
}
.leftbutton, .rightbutton {
  font-size: 1.5vmax;
  color: rgb(255,255,255);
  margin: 5px auto 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(255,255,255); /*border inset*/
  width: 2vmax;
  height: 2vmax;
  transform: scale(1); /* you need a scale here to allow it to transition in both directions */
  transition: 0.15s all ease;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently */
  cursor: default;
}
.calbutton:hover .leftbutton, .calbutton:hover .rightbutton {
  transform: scale(1.2);
}
.calendartitle {
  color: rgba(1,1,1,0.5);
  float: left;
  display: inline-block;
  width: 60%;
  text-align: center;
  padding-top: 5px;
}


.tablecell {
  color: rgba(1,1,1,0.5);
  padding: 2vmax 0;
  float: left;
  width: 14.28571428571429%;
  box-shadow: 0 0 0 1px rgba(1,1,1, 0.2); /*border inset*/
  -webkit-animation:fadein 0.4s;
  animation:fadein 0.4s;
}
@-webkit-keyframes fadein{
  from{opacity:0} to{opacity:1}
}
@keyframes fadein{
  from{opacity:0} to{opacity:1}
}
.blankcell {
  color: rgba(1,1,1,0);
  padding: 2vmax 0;
  float: left;
  width: 14.28571428571429%;
}
.currentdate {
  background-color: LIGHTSTEELBLUE;
}
.tableday {
  color: rgba(1,1,1,0.3);
  float: left;
  width: 14.28571428571429%;
  display: inline-block;
}