:root {
  --monospace-font-stack: 
    font-family: system-ui, 
    -apple-system, BlinkMacSystemFont, 
    "Segoe UI", 
    "Roboto", 
    "Oxygen", 
    "Ubuntu", 
    "Cantarell", 
    "Fira Sans", 
    "Droid Sans", 
    "Helvetica Neue", 
    Arial, sans-serif;
}

body {
  box-sizing: border-box;
  font-size: 1.6rem;
  margin: 0;
  min-height: 100vh;
}

body.faunaGradient {
  background: conic-gradient(at 50% -3%, #382417 90deg, #2d634c, #B19470 270deg);
}

body.floraGradient {
  background: conic-gradient(at 50% -3%, #2da5ad 120deg, #169761, #463594 240deg);
}

body.fungiGradient {
  background: conic-gradient(at 50% -1%, #35858B, #072227, #AEFEFF);
}

button:hover {
  background-color: #fff;
  cursor: pointer;
}

button[id="resetBtn"] {
  align-items: center;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
}

button, div.statsDisplay {
  font-size: 3.2rem;
}

div.back {
  background: url("../images/cards/cardBack.svg") center/contain no-repeat;
}

div.back, div.front {
  backface-visibility: hidden;
  height: 100%;
  /* Position front and back out of the normal flow, where they are superimposed on the other. */
  position: absolute; 
  width: 100%;
}

div.backFauna {
  background-color: #70b173;
}

div.backFlora {
  background-color: #bd68a6;
}

div.backFungi {
  background-color: #359475 ;
}

div.card {
  height: 100%;
  position: relative;
  transition: transform .8s;
  transform-style: preserve-3d;
  width: 100%;
}

div.front {
  transform: rotateY(180deg);
}

div[id="statsContainer"] {
  display: flex;
  margin: 0.7rem;
  justify-content: space-evenly;
}
/* !What is info block? */
div.infoBlock {
  flex: 1 2 20%;
}

div.infoBlock, div.timerBlock {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div > p {
  font-family: system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell;
  font-size: 3.3rem;
  margin: 0 0 1rem 0;
  width: fit-content;
}

div.scene {
  border: .5rem dashed #000;
  height: 100%;
  max-width: 250px;
  perspective: 1250px;
  width: 100%;
}

div.statsDisplay {
  align-items: center;
  display: flex;
  flex: 1 1 20%;
  font-family: var(--monospace-font-stack);
  font-size: 3.5rem;
  justify-content: center;
  padding: 0 .3rem;
  text-align: center;
  width: 100%;
}

div.timerBlock {
  flex: 1 1 15%;
}

header {
  max-height: 10%;
}

html {
  font-size: 62.5%;
}

img.match-image {
  height: 100%;
  width: 100%;
}

.isRotated {
  transform: rotateY(-180deg);
}

main {
  align-items: center;
  display: grid;
  font-size: 3rem;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 1rem;
  height: 70vh;
  justify-items: center;
  margin: 1.5rem auto; 
  width: 87%;
}

p.faunaColor {
  color: #F8FAE5;
}

p.floraColor {
  color: #F8FF95;
}

p.fungiColor {
  color: #78e6e2;
}

optgroup {
  font-size: 2.30rem;
  font-weight: bold;
}

option {
  font-size: 2.25rem;
}

#optionHeader {
  font-size: 2.5rem;
}

select {
  font-family: "Playfair Display", serif;
  font-size: 2.75rem;
  margin: 1% 0 1.5rem 1%;
  padding: .45rem;
}

@media screen and (min-width: 200px) and (max-width: 1000px) and (orientation: portrait) {
  div[id="timerDisplay"] {
    font-size: calc(2.4rem + 9 * ((100vw - 20rem) / 800)); /*range: 24-33*/
  }

  div > p {
    font-size: calc(2rem + 12 * ((100vw - 20rem) / 800)); /*range: 20-32*/
  }

  div.statsDisplay {
    font-size: calc(2.5rem + 8 * ((100vw - 20rem) / 800)); /*range: 25-33*/
  }

  header > div, option {
    font-size: calc(1.3rem + 8 * ((100vw - 20rem) / 800)); /*range: 13-21*/;
  }

  optgroup {
    font-size: calc(1.4rem + 8 * ((100vw - 20rem) / 800)); /*range: 14-22*/;
  }

  #optionHeader {
    font-size: calc(1.5rem + 8 * ((100vw - 20rem) / 800)); /*range: 15-23*/;
  }

  select {
    max-width: 90%;
    font-size: calc(2.2rem + 8 * ((100vw - 20rem) / 800)); /*range: 22-30*/
  }
}

@media screen and (orientation:portrait) and (max-width: 600px) {
  main {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 2rem;
  }
}

@media screen and (min-width: 600.01px) and (max-width: 1000px) {
  main {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 1.75rem;
    padding: 1.7rem;
  }
}

@media screen and (min-width: 1000.01px) {
  main {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 2.5rem;
    padding: 2rem;
  }
}