calendar-monthly {
  .calendar-container {
    display: grid;
    grid-template-columns: calc(var(--day-grid-size) + (var(--grid-size) * 3) - 1px) calc(var(--day-grid-size) * 7 - 1px);
    grid-template-areas: 'notes main';
  }
  .main {
    border-top: 1px solid var(--text);
    border-left: 1px solid var(--text);
    display: grid;
    grid-area: main;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--text);
  }
  .month-header {
    background-color: var(--accent);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: calc(var(--grid-size) * 4 + 1px);
    color: var(--alt-text);
    padding: 0 5px;
  }
  .year-span {
    padding-top: 5px;
    font-size: 12px;
  }
  .month-span {
    font-family: "Univers-Light";
    font-size: 25px;
    margin-top: auto;
  }
  .dummy-day-grid {
    border-right: 1px solid var(--text);
    border-top: 1px solid var(--text);
  }
  .day-grid {
    border-right: 1px solid var(--text);
    border-top: 1px solid var(--text);
    height: calc(var(--day-grid-size) - 1px);
    width: calc(var(--day-grid-size) - 1px); 
  }
  .day-grid-short {
    height: calc(var(--day-grid-size) - calc(var(--grid-size) * 3) - 1px);

    .day-header{
      height: calc(var(--grid-size) * 2 - 2px);
    }
  }
  .dayOfWeek-header{
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(var(--grid-size) * 2 - 1px);
      background-color: var(--base);
      border-right: 1px solid var(--text);
      font-size: 12px;
    }
  .day-header {
    font-size: 16px;
    display: flex;
    align-items: center;
    height: calc(var(--grid-size) * 2 - 2px);
    padding-left: 10px;
    background-color: var(--base);
  }
  .week-markers {
    display: flex;
    flex-direction: column;
    top: calc(var(--day-grid-size) + calc(var(--grid-size) * 2) + 4px);
    left: calc(var(--grid-size) * 12 + 3px);
    position: absolute;
    font-size: 8px;
    height: calc(var(--day-grid-size) * 5);
    font-family: "Univers";

    .week-marker {
      flex-grow: 1;
    }

    .week-marker span {
      display: block;
      height: calc(var(--grid-size) - 4px);
      width: calc(var(--grid-size) * 2 - 8px);
      opacity: 0.8;
      background-color: var(--base);
      text-align: end;
    } 
  }
  .week-marker-short-month {
    font-size: 8px;
    font-family: "Univers";
    position: absolute;
    top: calc(var(--day-grid-size) * 6 - var(--grid-size) + 4px);
    left: calc(var(--grid-size) * 12 + 3px);

    span {
      display: block;
      width: calc(var(--grid-size) * 2 - 8px);
      opacity: 0.8;
      background-color: var(--base);
      text-align: end;
    }
  }
  
}