:root {
  --yin-color: black;
  --yang-color: white;
  --bg-color: lightslategray;
}

body {
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: space-around;
  height: 100dvh;  /* Mobile support */
  background-color: var(--bg-color);
  font-size: 3rem;
}

body > .taiji-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;  /* Hide because the height of the taiji element changes as it rotates */
}

/* Settings */
.settings {
  margin: auto;
  display: flex;
  flex-direction: column;
}

.settings button {
  margin: 1rem 0 0 0;
}

.numeric-setting {
  display: flex;
  justify-content: space-between;
}

.numeric-setting input {
  width: 8rem;
  margin-left: 2rem;
}

.color-settings {
  display: flex;
  justify-content: space-between;
}

.color-setting {
  width: 33.333%;
}

.color-setting input {
  width: 90%;
  height: 3rem;
  margin: 0 5%;
}

input {
  margin-bottom: 1rem;
  font-size: 3rem;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

/* Items below Taiji */

.welcome, .timer {
  display: flex;
  flex-direction: row;
  margin: auto;
}

.welcome > *, .timer > * {
  width: 15rem;
}

.duration {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}

button {
  margin: 1rem;
  padding: 8px;
  font-size: 3rem;
}

/* Rotating ☯️ symbol */
/* Based on work by Ana Tudor:
<https://css-tricks.com/creating-yin-yang-loaders-web/> */
.taiji {
  margin: auto;
  display: flex;
  align-items: center;
  width: 90dvmin;
  height: 90dvmin;
  border-radius: 50%;
  background: linear-gradient(to top, var(--yin-color) 50%, var(--yang-color) 0);
  animation: r 1s linear infinite;
  /* Use transform to align vertically, not horizontally */
  transform: rotate(0.75turn);
}
.taiji:before, .taiji:after {
  --i: 0;
  flex: 1;
  border: solid 13.5dvmin var(--yang-color);
  height: 18dvmin;
  border-radius: 50%;
  transform-origin: calc(var(--i)*100%) 50%;
  transform: scale(0.001);
  background: var(--yin-color);
  /* Shorthand split up below for readability */
  /* animation: s 1s ease-in-out calc(var(--i)*-1s) infinite alternate paused; */
  animation-name: s;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  /* animation-delay: calc(var(--i)*-1s); */
  /* Use animation-delay to start half-full */
  animation-delay: -1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  content: '';
}
.taiji:after {
  --i: 1;
  border: solid 13.5dvmin var(--yin-color);
  background: var(--yang-color);
  /* Use animation-delay to start half-full */
  animation-delay: -0.5s;
}
@keyframes s {
  to {
    transform: scale(1.999);
  }
}
@keyframes r {
  to {
    /* Use transform to align vertically, not horizontally */
    transform: rotate(-0.25turn);
  }
}
@media (orientation: landscape) {
  body {
    font-size: 2rem;
  }

  body > .taiji-container {
    flex-direction: row;
  }

  .taiji {
    margin: auto;
  }

  .welcome, .timer {
    flex-direction: column;
    width: 15rem;
  }

  .welcome > *, .timer > * {
    width: auto;
    height: 5rem;
  }

  input {
    font-size: 2rem;
  }

  button {
    font-size: 2rem;
  }
}