:root {
  --celadon: #afe3c0ff;
  --wisteria: #b79cedff;
  --princeton-orange: #ff8600ff;
  --baltic-blue: #32639aff;
  --deep-navy: #0b1d51ff;
}
.row {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
}
p,
strong,
h1,
div {
  color: var(--princeton-orange);
}
hr {
  background-color: var(--wisteria);
}
a {
  color: var(--celadon);
  &:hover {
    color: color-mix(
      in oklab,
      var(--celadon) 80%,
      var(--deep-navy) 20%
    );
  }
}
smart-time {
  a {
    color: var(--wisteria);
  }
  .dt-range {
    color: var(--wisteria);
  }
  .dt-duration {
    color: var(--wisteria);
  }
  .dt-separator {
    color: var(--celadon);
  }
  .dt-relative {
    color: var(--wisteria);
  }
}

body {
  .event {
    border: 2px solid var(--wisteria);
    padding: 4px;
    .title {
      font-weight: bold;
      color: var(--celadon);
    }
    .desc {
    }
    .location {
    }
  }
  padding: 0;
  .full {
    width: 100%;
    height: 100%;
  }
  .fullw {
    width: 100%;
  }
  .fullh {
    height: 100%;
  }
  .main1 {
    .side {
      background-color: var(--baltic-blue);
      width: max-content;
    }
    .center {
      background-color: var(--deep-navy);
      border-left: 10px solid;
      border-right: 10px solid;
      border-color: color-mix(
        in oklab,
        var(--baltic-blue) 50%,
        var(--deep-navy) 50%
      );
    }
    .center,
    .side {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  .navContainer {
    .nav {
      a {
        font-weight: bold;
        padding: 10px;
        font-size: xx-large;
      }
      align-self: center;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
    padding-bottom: 10px;
    background-color: color-mix(
      in oklab,
      var(--baltic-blue) 50%,
      var(--deep-navy) 50%
    );
    width: 100vw;
  }
}