body {
  font-family: system-ui;
  background-color: oklch(0.2895 0.0111 300.87);
  color: oklch(0.9282 0 230.03);
}

#exam-header {
  position: sticky;
  top: 0;
  z-index: 999;
  text-align: center;
  background-color: oklch(0.2895 0.0111 300.87);
}

#timer {
  margin: 10px;
  letter-spacing: 0.2em;
}

#buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  height: 50px;
}

#index-body {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px;
  grid-template-areas:
    ". header header ."
    ". main main ."
    ". main main ."
}

#index-header {
  grid-area: header;
}

#index-main {
  grid-area: main;
}

#index-form {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

#index-form > input[type="number"] {
  background-color: oklch(0.4895 0.0111 300.87);
  color: oklch(0.9282 0 230.03);
  border-radius: 5px;
  height: 23px;
  width: 65px;
  border: none;
  text-align: right;
  padding-right: 10px;
}

.button {
  grid-area: submit;
  grid-row: 3;
  grid-column: 1 / 3;
  height: 30px;
  margin-top: 15px;
  background-color: oklch(0.35 0.1 140);
  color: oklch(0.9282 0 230.03);
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(0);
  box-shadow: none;
}

.control-button {
  flex: 1 100px;
  height: 50px;
}

.start {
  background: oklch(0.5036 0.1 139.59);
}

.pause {
  background: oklch(0.5036 0.1 76.05);
}

#end {
  background: oklch(0.5036 0.1 230.03);
}

#reset {
  background: oklch(0.5036 0.1 360);
}