@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --hobo-color: #676e8b;
  --cell-size: calc(100vw / 34);
}



body {
  font-family: 'Inter';
  font-size: 1.5vw;
  color: var(--hobo-color);
  text-align: center;
}

header {
  width: 100%;
}

      
table.dailyheader {
  font-size: calc(1.2*var(--cell-size));
  width: calc(32 * var(--cell-size));
  height: calc(6 * var(--cell-size));
  margin: var(--cell-size);
  border-collapse: collapse;
}

table.dailyheader td {
   border: solid 0.2mm;
}

table.dailyheader td.month {
  width: calc(3*var(--cell-size));
  height: calc(3*var(--cell-size));
  text-align: center;
}
table.dailyheader td.date {
  height: calc(3*var(--cell-size));
  width: auto;
  text-align: center;
  font-weight: bold;
  font-size: 5vw;
}
table.dailyheader td.day {
  width: calc(3*var(--cell-size));
  height: calc(3*var(--cell-size));
  text-align: center;
}
table.dailyheader td.moon {
  width: calc(3*var(--cell-size));
  height: calc(3*var(--cell-size));
  text-align: center;
}
table.dailyheader td.moon svg {
  color: var(--hobo-color);
}
table.dailyheader td.fulldate {
  height: calc(2*var(--cell-size));
  border-right: 0px solid;
  text-align: left;
  padding-left: 5mm;
}
table.dailyheader td.weekno {
  width: calc(2*var(--cell-size));
  height: calc(2*var(--cell-size));
  border-left: 0px solid;
  text-align: right;
  padding-right: 5mm;
}

button {
  background-color: var(--hobo-color);
  color: white;
  font-size: 2em;
  border-radius: 0.1em;
  padding: 0.5em;
  margin: 2vw;
}

.moon img {
   width: calc(2*var(--cell-size));
   background: var(--hobo-color);
   outline: solid 0.2mm white;
   outline-offset: -0.04vw;
}

img.example {
  width: 80vw;
  transform: rotate(15deg) scale(75%);
  filter: drop-shadow(0.75vw 0.75vw 2vw var(--hobo-color));
}