:root {
    --numDays: 5;
    --timeHeight: 15px;
    --calBgColor: #e6f0ff;
    --eventBorderColor: #e6f0ff;
    --eventColor1: #29a3a3;
    --eventColor2: #E07807;
    --eventColor3: #b32d00;
    --eventColor4: #7575a3;
  }

  .calendar {
    display: grid;
    gap: 10px;
    grid-template-columns: auto 1fr;
  }

  .calendar a {
    color: #2f0b66;
  }

  .calendar a:hover {
    color: #2f0b66;
  }

  .calendar a:visited {
    color: #2f0b66;
  }
  
  .calendar a:active {
    color: #2f0b66;
  }

  .timeline {
    display: grid;
    margin-top: 54px;
    grid-template-rows: repeat(var(--numIntervals), var(--timeHeight));
  }
  
  .days {
    display: grid;
    grid-column: 2;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  .events {
    display: grid;
    grid-template-rows: repeat(var(--numIntervals), var(--timeHeight));
    border-radius: 5px;
    background: var(--calBgColor);
  }
  
  
  /* Event */
  .title {
    font-weight: 600;
    /* margin-bottom: 0.25rem; */
    font-size: 0.5rem;
    color: white;
    margin: 0rem;
    padding: 0rem;
  }
  
  .time {
    color: white;
    font-size: 0.4rem;
    font-weight: 300;
  }
  
  .event {
    border: 1px solid var(--eventBorderColor);
    border-radius: 5px;
    padding-left: 0.5rem;
    /* padding: -0.5rem; */
    margin: 0rem;
    background: white;
  }  
  
  /* Global / Etc */
  body {
    font-family: system-ui, sans-serif;
  }
  
  .primary {
    background: var(--eventColor1);
  }
  
  .break {
    background: var(--eventColor2);
  }
  
  .writing {
    background: var(--eventColor3);
  }
  
  .securities {
    background: var(--eventColor4);
  }
  
  .date {
    gap: 1em;
    display: flex;
  }
  
  .date-num {
    font-weight: 100;
  }
  
  .date-day {
    font-weight: 400;
  }