body {
  margin: 0;
  padding: 0;
  background-color:yellow;
  font-family: 'DotGothic16', sans-serif;font-family:
}
canvas {
  display: block;
}
h1{
  text-align:center;
  color:red;
    -webkit-animation: blink 1s ease-in-out infinite alternate;
  animation: blink 1s ease-in-out infinite alternate;
}


@-webkit-keyframes blink {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes blink {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
}


h2{
  text-align:center;
}
.wrapper{
    max-width: 600px;
    margin: 0 auto;
    color:black;
}
#header {
    text-align: center;
    font-size: 24px;
    width: 100%;
    margin: 1rem 0 0;
}


#calendar {
    text-align: center;
    width: 100%;
}
table {
    outline: 2px solid black;
    border-collapse: collapse;
    width: 100%;
}
th {
    color: black;
}
th, td {
    outline: 1px solid black;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}


td.disabled{
    color: gray;
}

td.today {
    color: #FF4F50;
    font-weight:bold;
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  animation: blink 1s ease-in-out infinite alternate;
}


@-webkit-keyframes blink {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes blink {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
    


#next-prev-button {
    position: relative;
}
#next-prev-button button{
    cursor: pointer;
    background: black;
    color: #fff;
    border: 1px solid black;
    font-size: 1rem;
    padding: 0.5rem 2rem;
    margin: 1rem 0;
}

#prev {
    float: left;
}
#next {
    float: right;
}