test.css

:root {
  --maxSync: 4;
  --meterHeight: 70%;
  --calendarWidth: 55%;
  --numDays: 1;
  --numHours: 19;
  --numInts: calc(var(--numHours) * 4); /* 15 min intervals for events */
  --hourHeight: 60px;
  --intHeight: calc(var(--hourHeight) / 4);
  --calBgColor: #fff1f8;
  --eventColor: rgba(214, 51, 255, 0.25);
}

/* ------- EVENT INFO ------- */

#event-info, #syncd-up {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - var(--calendarWidth))/2);
}

#event-info {
  border-right: 1px solid black;
}

#event-info h1 {
  font-family: "Preahvihear", sans-serif;
  font-size: 50px;
}

#availability-meter {
  height: var(--meterHeight);
  border: 2px solid black;
  border-top: none;
  width: 40px;
  display: grid;
  grid-template-rows: repeat(calc(var(--maxSync) + 1), calc(var(--meterHeight) / (var(--maxSync)+1)));
  border-radius: 5px;
  background-color: var(--calBgColor);
}

#availability-meter .event {
  grid-row-start: 1;
}

#availability-meter .event:hover{
  border: none;
}

#availability-meter .meter-0 {
  background-color: transparent;
  border: none;
  grid-row-end: calc(var(--maxSync) + 1);
}

.meter-1 {
  grid-row-end: calc(var(--maxSync));
}
.meter-2 {
  grid-row-end: calc(var(--maxSync) - 1);
}
.meter-3 {
  grid-row-end: calc(var(--maxSync) - 2);
}
.meter-4 {
  grid-row-end: calc(var(--maxSync) - 3);
}


/* ------- CALENDAR SECTION ------- */

#calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  margin: 2rem;
  width: var(--calendarWidth);
  overflow-y: auto;
  height: 95%;
}

#timeline {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--hourHeight));
}

#spacer, .date-title {
  height: 60px
}

#spacer {
  align-items: flex-end;
  color: gray;
}

.time-marker {
  font-family: "Questrial", sans-serif;
  border-bottom: 1px solid rgb(212, 212, 212);
  align-items: center;
  justify-content: right;
  display: flex;
}

/* #days {
  display: flex;
}

.day {
  width: calc(100 / var(--numDays)) + 1%;
} */

.date-title {
  display: flex;
  gap: 1em;
}

.date-num {
  font-size: 3rem;
  font-weight: 600;
  display: inline;
  margin: 0;
}

.date-day {
  display: inline;
  font-size: 3rem;
  font-weight: 100;
  margin: 0;
}

.events {
  display: grid;
  grid-template-rows: repeat(var(--numInts), var(--intHeight));
  border-radius: 5px;
  background: var(--calBgColor);
}

.event {
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0.5rem;
  background: var(--eventColor);
  grid-column: 1 / 1;
}

.event:hover {
  border: 1px solid black;
}

/* ------- SYNC'D UP SECTION ------- */

#syncd-up {
  border-left: 1px solid black;
}

#syncd-up h1 {
  font-size: 30px;
  font-family: "Quattrocento Sans", sans-serif;
  text-decoration: underline;
}

.user {
  margin: 5%;
  width: 250px;
  border: 1px solid black;
  border-radius: 15px;
  padding: 2% 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.user img {
  width: 20%;
}

.user div {
  text-align: center;
  font-family: "Questrial", sans-serif;
}

.user-name {
  margin: 0;
  font-size: 120%;
}

.user-status {
  letter-spacing: .2em;
  font-size: 3em;
  text-indent: .2em;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 100%;
}

html {
  height: 100%;
}