body {
  background-color: #611515;
  font-family: sans-serif;
  margin: 0;
  height: 100vh;
    cursor: cell;


}

.cursor {
  width: 20px;
  height: 20px;
  border: 1px solid #d4d2cd;
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  animation: cursorAnim .5s infinite alternate;

}

.cursor::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  border: 8px solid rgb(209, 155, 19);
  border-radius: 50%;
  opacity: 0.3;
  left: -9px;
  bottom: -9px;
  animation: cursorAnim2 .5 infinite alternate;
}

@keyframes cursorAnim {
  from {
    transform: scale(1);
  }
  to{
    transform: scale(1.7);
  }
}

@keyframes cursorAnim2 {
  from {
    transform: scale(3);
  }
  to{
    transform: scale(8);
  }
}

.dec {
text-align: center;
font-family: sans-serif;
font-size: 50px;
transition: ease all 1s;

}

.y2022 {
  text-align: right;
  font-family: sans-serif;
  font-size: 50px;
  color: #0f2f12;
  opacity: 0.8;
  position: absolute;
top: 60px;
right: 630px;
*/
  transition: ease all 1s;
}





/*this tells the browser to account for any border and padding in the values you specify for an element's width and height.*/

* {box-sizing:  border-box;}


.week {
  display: flex;
  height: 150px;
  justify-content: flex-end;
}
.month {
  max-width: 1050px;
  margin: 50px auto;
    background-color: #d4d2cd;
    flex-direction: row;

      flex-wrap:  wrap;
      padding:none;
      height: auto;

}

.hover {
  color: #757575;
  position: absolute;
  top: 70px;
  left: 40px;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;

}

@keyframes example {
  0%   { left:40px; top:70px;}
  25%  {left:600px; top:70px;}
  50%  { left:600px; top:200px;}
  75%  { left:40px; top:200px;}
  100% {left:40px; top:70px;}
}

}
  /*
  width: 1100px;
  display: flex;

  flex-direction: row;
    justify-content: flex-start ;

    flex-wrap:  wrap;
    padding:10px;
    height:  100vh;

    */

    /*min-height: 300px;*/


}



.day {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 0;
}

.day {
  padding: 10px;
  font-family: sans-serif;
  font-size:  18px;
  text-align:  center;

}

.day {
  margin: 10px 10px;
  width: 130px;
  height: 130px;
  background-color: #611515;
  color:  #0f2f12;
}


.day:hover {
  background-color:  #d4d2cd;
  color: #d4d2cd;
  cursor: url(imgs/spk.png), auto;
  transition: ease all 1s;
}

.day1 {
  margin: 10px 10px;
  width: 130px;
  height: 130px;
  background-color: #d4d2cd;
  color:  #d4d2cd;
  padding: 10px;
  font-family: sans-serif;
  font-size:  18px;
  text-align:  center;

}

.dayy {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  padding: 10px;
  font-family: sans-serif;
  font-size:  18px;
  text-align:  center;
  margin: 10px 10px;
  width: 130px;
  height: 130px;
  background-color: #611515;
  color:  #d4d2cd;
}

.dayy:hover {
  color:  #611515;
  transition: ease all 1s;
}

.ct {
  opacity: 0;
  position: relative;
  bottom: 118px;

}

.ct img {
  width: 40px;
}

.ct:hover {
  opacity: 1;
  transition: ease all 1s;
}

.pre {
  opacity: 0;
  position: relative;
  bottom: 20px;
}

.pre img {
  width: 36px;
}

.pre:hover {
  opacity: 1;
  transition: ease all 1s;
}

.milk {
  opacity: 0;
  position: relative;
  bottom: 123px;
}

.milk img {
  width: 40px;
}

.milk:hover {
  opacity: 1;
  transition: ease all 1s;
}

.fireworks {
  opacity: 0;
  position: relative;
  bottom: 138px;
}

.fireworks img {
  width: 40px;
}

.fireworks:hover {
  opacity: 1;
  transition: ease all 1s;
}

.nop {
  opacity: 0;
  position: relative;
  bottom: 120px;
}

.nop img {
  width: 50px;
}

.nop:hover {
  opacity: 1;
  transition: ease all 1s;
}


.holiday {
  opacity: 0;
  padding: 28px;
text-align: center;
color: #d4d2cd;

}

.holiday:hover {
  opacity: 1;

  font-size: 18px;

  transition: ease all 1s;

}

@media (max-width:1024px){

  .dec {
    color: #0f2f12;
    text-align: center;
    font-size: 50px;
    letter-spacing: 5px;
  }

  .y2022 {
    color: #0f2f12;
    text-align: right;
    font-size: 36px;
    transition: ease all 1s;
  }

  .month {
    text-align: center;
    vertical-align: center;

  }


  .holiday {
    opacity: 0;
  }

  .holiday:hover {
    opacity: 1;
    font-size: 18px;
      transition: ease all 1s;

  }

}

@media (max-width:768px){


  .dec {
    color: #d4d2cd;
    text-align: center;
    font-size: 30px;
    letter-spacing: 2px;
  }

  .y2022 {
    color: white;
    text-align: right;
    font-size: 20px;
    right: 90px;

  }

  .month {
    text-align: center;
    vertical-align: center;

  }

  .day {
    font-size: 15px;
  }

  .ct {
    bottom: 80px;
    transition: ease all 1s;
  }

  .ct img {
  width: 30px;
  }

  .milk {
    bottom: 90px;
    transition: ease all 1s;
  }

  .milk img {
  width: 30px;
  }

  .pre {
    transition: ease all 1s;
  }

  .pre img {
  width: 30px;
  }

  .fireworks {
    bottom: 86px;
    transition: ease all 1s;
  }

  .fireworks img {
  width: 30px;
  }

  .nop {
      bottom: 80px;
    transition: ease all 1s;
  }
  .nop img {
  width: 40px;
  }

  .holiday {
    opacity: 0;
    font-size: 1px;

  }

  .holiday:hover {
    opacity: 1;
    font-size: 15px;
      transition: ease all 1s;

  }

}