body {
  background-color: #f4f4f4;
  //background-image: linear-gradient(to bottom, #a7a7a7 0%, #e4e4e4 51%);
  font-family: "Helvetica", system-ui, -apple-system, -apple-system-font,
    "Segoe UI", "Roboto", sans-serif;
  font-size: 12px;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  /* Padding to avoid the "unsafe" areas behind notches in the screen */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  //text-transform:uppercase;
  width: 100%;

  text-align: center;
  vertical-align: middle;
}

.clickable {
  cursor: pointer;
}

.InstructionsArea {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  font-size: 16px;
}

#PlayArea {
  display: none;
}

.Complete {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  font-size: 16px;
  display: none;
}

table {
  text-align: center;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 10px;
  border-collapse: separate;
}

td {
  width: 50px;
  height: 50px;
  border: 1px grey solid;
  font-weight: bold;
}

.aKey {
  color: white;
  background-color: rgb(100, 106, 170);
}

.Wrong {
  animation-duration: 1s;
  animation-name: Wrong;
  color: white;
  background-color: rgb(120, 124, 126);
}

@keyframes Wrong {
  from {
    color: black;
    background-color: #f4f4f4;
  }

  to {
    color: white;
    background-color: rgb(120, 124, 126);
  }
}

.WrongDone {
  color: white;
  background-color: rgb(120, 124, 126);
}

.Right {
  animation-duration: 1s;
  animation-name: Right;
  color: white;
  background-color: rgb(106, 170, 100);
}

@keyframes Right {
  from {
    color: black;
    background-color: #f4f4f4;
  }

  to {
    color: white;
    background-color: rgb(106, 170, 100);
  }
}

.RightDone {
  animation-name: Right;
  color: white;
  background-color: rgb(106, 170, 100);
}

.Near {
  animation-duration: 1s;
  animation-name: Near;
  color: white;
  background-color: rgb(201, 180, 88);
}

@keyframes Near {
  from {
    color: black;
    background-color: #f4f4f4;
  }

  to {
    color: white;
    background-color: rgb(201, 180, 88);
  }
}

.Near {
  animation-duration: 1s;
  animation-name: Near;
  color: white;
  background-color: rgb(201, 180, 88);
}
@import ("styles.css");

.Error {
  color: white;
  background-color: red;
}

.Selected {
  border: 1px red solid;
}

#ShareText {
  display: none;
}

#MastCog {
  font-size: 24pt;
}

.SettingsArea {
  display: none;
}

.SettingText {
  width: 240px;
}

.EnterCell {
  width: 305px;
  color: white;
  background-color: rgb(100, 106, 170);
}

#MainEnter {
  display: none;
}

input {
  width: 240px;
  background: transparent;
  border: none;
  height: 50px;
  font-size: 16pt;
}

:root {
  --numDays: 1;
  --numHours: 68;
  --timeHeight: 15px;
  --calBgColor: #fff1f8;
  --eventBorderColor: #f2d3d8;
  --eventColor1: #e2f8ff;
  --eventColor2: #fafaa3;
  --eventColor3: #ffd6d1;
  --eventColor4: #d1ffe6;
}

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

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

.days {
  display: grid;
  grid-column: 2;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

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

// Place on Timeline
.start-900 {
  grid-row-start: 1;
}
.start-915 {
  grid-row-start: 2;
}
.start-930 {
  grid-row-start: 3;
}
.start-945 {
  grid-row-start: 4;
}
.start-1000 {
  grid-row-start: 5;
}
.start-1015 {
  grid-row-start: 6;
}
.start-1030 {
  grid-row-start: 7;
}
.start-1045 {
  grid-row-start: 8;
}
.start-1100 {
  grid-row-start: 9;
}
.start-1115 {
  grid-row-start: 10;
}
.start-1130 {
  grid-row-start: 11;
}
.start-1145 {
  grid-row-start: 12;
}
.start-1200 {
  grid-row-start: 13;
}
.start-1215 {
  grid-row-start: 14;
}
.start-1230 {
  grid-row-start: 15;
}
.start-1245 {
  grid-row-start: 16;
}
.start-1300 {
  grid-row-start: 17;
}
.start-1315 {
  grid-row-start: 18;
}
.start-1330 {
  grid-row-start: 19;
}
.start-1345 {
  grid-row-start: 20;
}
.start-1400 {
  grid-row-start: 21;
}
.start-1415 {
  grid-row-start: 22;
}
.start-1430 {
  grid-row-start: 23;
}
.start-1445 {
  grid-row-start: 24;
}
.start-1500 {
  grid-row-start: 25;
}
.start-1515 {
  grid-row-start: 26;
}
.start-1530 {
  grid-row-start: 27;
}
.start-1545 {
  grid-row-start: 28;
}
.start-1600 {
  grid-row-start: 29;
}
.start-1615 {
  grid-row-start: 30;
}
.start-1630 {
  grid-row-start: 31;
}
.start-1645 {
  grid-row-start: 32;
}
.start-1700 {
  grid-row-start: 33;
}
.start-1715 {
  grid-row-start: 34;
}
.start-1730 {
  grid-row-start: 35;
}
.start-1745 {
  grid-row-start: 36;
}
.start-1800 {
  grid-row-start: 37;
}
.start-1815 {
  grid-row-start: 38;
}
.start-1830 {
  grid-row-start: 39;
}
.start-1845 {
  grid-row-start: 40;
}
.start-1900 {
  grid-row-start: 41;
}
.start-1915 {
  grid-row-start: 42;
}
.start-1930 {
  grid-row-start: 43;
}
.start-1945 {
  grid-row-start: 44;
}
.start-2000 {
  grid-row-start: 45;
}
.start-2015 {
  grid-row-start: 46;
}
.start-2030 {
  grid-row-start: 47;
}
.start-2045 {
  grid-row-start: 48;
}
.start-2100 {
  grid-row-start: 49;
}
.start-2115 {
  grid-row-start: 50;
}
.start-2130 {
  grid-row-start: 51;
}
.start-2145 {
  grid-row-start: 52;
}
.start-2200 {
  grid-row-start: 53;
}
.start-2215 {
  grid-row-start: 54;
}
.start-2230 {
  grid-row-start: 55;
}
.start-2245 {
  grid-row-start: 56;
}
.start-2300 {
  grid-row-start: 57;
}
.start-2315 {
  grid-row-start: 58;
}
.start-2330 {
  grid-row-start: 59;
}
.start-2345 {
  grid-row-start: 60;
}
.start-2400 {
  grid-row-start: 61;
}
.start-2415 {
  grid-row-start: 62;
}
.start-2430 {
  grid-row-start: 63;
}
.start-2445 {
  grid-row-start: 64;
}

.end-900 {
  grid-row-end: 1;
}
.end-915 {
  grid-row-end: 2;
}
.end-930 {
  grid-row-end: 3;
}
.end-945 {
  grid-row-end: 4;
}
.end-1000 {
  grid-row-end: 5;
}
.end-1015 {
  grid-row-end: 6;
}
.end-1030 {
  grid-row-end: 7;
}
.end-1045 {
  grid-row-end: 8;
}
.end-1100 {
  grid-row-end: 9;
}
.end-1115 {
  grid-row-end: 10;
}
.end-1130 {
  grid-row-end: 11;
}
.end-1145 {
  grid-row-end: 12;
}
.end-1200 {
  grid-row-end: 13;
}
.end-1215 {
  grid-row-end: 14;
}
.end-1230 {
  grid-row-end: 15;
}
.end-1245 {
  grid-row-end: 16;
}
.end-1300 {
  grid-row-end: 17;
}
.end-1315 {
  grid-row-end: 18;
}
.end-1330 {
  grid-row-end: 19;
}
.end-1345 {
  grid-row-end: 20;
}
.end-1400 {
  grid-row-end: 21;
}
.end-1415 {
  grid-row-end: 22;
}
.end-1430 {
  grid-row-end: 23;
}
.end-1445 {
  grid-row-end: 24;
}
.end-1500 {
  grid-row-end: 25;
}
.end-1515 {
  grid-row-end: 26;
}
.end-1530 {
  grid-row-end: 27;
}
.end-1545 {
  grid-row-end: 28;
}
.end-1600 {
  grid-row-end: 29;
}
.end-1615 {
  grid-row-end: 30;
}
.end-1630 {
  grid-row-end: 31;
}
.end-1645 {
  grid-row-end: 32;
}
.end-1700 {
  grid-row-end: 33;
}
.end-1715 {
  grid-row-end: 34;
}
.end-1730 {
  grid-row-end: 35;
}
.end-1745 {
  grid-row-end: 36;
}
.end-1800 {
  grid-row-end: 37;
}
.end-1815 {
  grid-row-end: 38;
}
.end-1830 {
  grid-row-end: 39;
}
.end-1845 {
  grid-row-end: 40;
}
.end-1900 {
  grid-row-end: 41;
}
.end-1915 {
  grid-row-end: 42;
}
.end-1930 {
  grid-row-end: 43;
}
.end-1945 {
  grid-row-end: 44;
}
.end-2000 {
  grid-row-end: 45;
}
.end-2015 {
  grid-row-end: 46;
}
.end-2030 {
  grid-row-end: 47;
}
.end-2045 {
  grid-row-end: 48;
}
.end-2100 {
  grid-row-end: 49;
}
.end-2115 {
  grid-row-end: 50;
}
.end-2130 {
  grid-row-end: 51;
}
.end-2145 {
  grid-row-end: 52;
}
.end-2200 {
  grid-row-end: 53;
}
.end-2215 {
  grid-row-end: 54;
}
.end-2230 {
  grid-row-end: 55;
}
.end-2245 {
  grid-row-end: 56;
}
.end-2300 {
  grid-row-end: 57;
}
.end-2315 {
  grid-row-end: 58;
}
.end-2330 {
  grid-row-end: 59;
}
.end-2345 {
  grid-row-end: 60;
}
.end-2400 {
  grid-row-end: 61;
}
.end-2415 {
  grid-row-end: 62;
}
.end-2430 {
  grid-row-end: 63;
}
.end-2445 {
  grid-row-end: 64;
}

// Event

.title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0.5rem;
  background: white;
}

.space,
.date {
  height: 60px;
}

// Global / Etc

body {
  font-family: system-ui, sans-serif;
}

.cinema1 {
  background: var(--eventColor1);
}

.cinema2 {
  background: var(--eventColor2);
}

.cinema3 {
  background: var(--eventColor3);
}

.cinema4 {
  background: var(--eventColor4);
}

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

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

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