:root {
  --blue: #a9d2ef;
  --green: #cbdfbd;
  --black: #2d3134;
  --gray: #a9aab1;
  --beige: #fdf5e6;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

::selection {
  background-color: #cbc1a8;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /* scaling down so that 1rem equals to 10px */
}

body {
  background-color: var(--beige);
  color: var(--black);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L",
    Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
    SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 135rem;
  width: 95%;
}

a {
  color: #6878a3;
  text-decoration: none;
}

h1 {
  font-size: 5.2rem;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: -0.025em;
}

ol,
ul {
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: square;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(5rem, 1fr));
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  width: 100%;
  max-width: 690px;
  margin: 1rem;
}

.grid-item {
  border: 0.25rem solid var(--gray);
  border-radius: 0.4rem;
  margin: 0.15rem;
  height: 4.5rem;
  width: 4.6rem;
  transition: all 0.5s ease-in;
}

/* homegrown functional CSS framework */

.flex {
  display: flex !important;
}
.flex-wrap {
  flex-wrap: wrap-reverse;
}

div.flex-wrap {
  flex-wrap: nowrap;
}

.items-center {
  align-items: center !important;
}
.justify-around {
  justify-content: space-around !important;
}

.bg-time-passed {
  background-color: var(--green) !important;
}

.bg-time-selected {
  background-color: var(--blue) !important;
}

.text-center {
  text-align: center;
}

.cursor-crosshair {
  cursor: crosshair;
}

.mb-0 {
  margin: 0 !important;
}
.m-1 {
  margin: 1rem !important;
}
.mt-1 {
  margin-top: 1rem !important;
}

.p-1 {
  padding: 1rem;
}
.p-2 {
  padding: 2rem;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.border-b-3 {
  border-bottom: 0.3rem solid !important;
}

.last-grid.bg-time-selected {
  background: transparent !important;
  background-color: var(--blue) !important;
}

.gaokao-countdown {
  padding: 0;
  margin: 0;
  text-align: center;
  color: var(--black);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L",
    Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
    SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
  font-size: 9rem;
}