html, body {
  height: 100%;
  background-color: rgb(21, 21, 21);
  font-family: "Storytime";
  font-size: 1.1em;
  color: white;
}

button {
  outline: none;
}

.stars {
  font-family: "Source Code Pro";
  color: rgb(255, 255, 102);
}

.tab-button {
  background-color: rgb(21, 21, 21);
  color: white;
  height: 40px;
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box;
  border: 5px solid transparent;
}

.day-button {
  background-color: rgb(21, 21, 21);
  color: white;
  height: 40px;
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box;
  border: 5px solid transparent;
}

.is-active {
  border-image: 5 repeating-linear-gradient(-45deg, #9C2929 0, #9C2929 12px, transparent 0, transparent 12px, #08874F 12px, #08874F 24px, transparent 0, transparent 12px);
}

@font-face {
    font-family: 'Storytime';
    src: url('./Storytime.ttf') format('truetype');
}

@font-face {
    font-family: 'ThePerfectChristmas';
    src: url('./ThePerfectChristmas.ttf') format('truetype');
}

#snow-blur {
    box-shadow: 0px 0px 15px 30px #FFF, inset 0px 0px 5px 3px #FFF;
    -webkit-box-shadow: 0px 0px 15px 30px #FFF, inset 0px 0px 5px 3px #FFF;
    position: fixed;
    left: -1vw;
    right: -1vw;
    top: -10vh;
    bottom: 10px;
    z-index: 9999;
    border-radius: 60px;
    pointer-events: none
}