#calendar {
  width: auto;
  height: auto;
  background-color: var(--pink);
}

#calendar table{
  font-family:'MS UI Gothic';
  width: 100%; /*width of entire table*/
  height: auto;
  border: 1px solid black;
  border-width: 0px 0px 1px 1px;
  font-size: x-small; 
  color: black; 
  font-weight: normal;
  border-spacing: 2px; /*spacing between cells*/
  border-collapse: separate;
  box-shadow: inset 0px -2px var(--pinkgrad);
}

#calendar table td{
  background-color: var(--pinkhigh);
  border: 0px solid var(--pinkshad);
  padding: 3px; /*cell padding*/
  width: 2ch;
}

#calendar table .days{
  text-align: center;
}

#calendar table .emptydays{
  text-align: center;
}

#calendar span{
  font-weight: bold;
  color: var(--pinkgrad);
  background-color: var(--green);
  border: 2px solid var(--green);
  border-radius: 20px;
  margin:-2px; /*keeps the box sizes consistant*/
}

#calendar .weekdays {
  text-align: center;
  font-weight: bold;
  color: var(--pinkgrad);
  background-color: var(--pinkhigh);
  border: 0px solid var(--pinkshad);
}

#calendar #header {
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--pinkgrad);
}