:root {
  --bg-color: white;
  --fg-color: black;
  --cara-bg-color: green;
  --cara-fg-color: white;
  --coroa-bg-color: yellow;
  --coroa-fg-color: black;
}

html[data-theme='dark'] {
  --bg-color: #222224;
  --fg-color: white;
  --cara-bg-color: rgb(22, 197, 22);
  --cara-fg-color: black;
  --coroa-bg-color: yellow;
  --coroa-fg-color: black;
}

html[data-theme='dark'] a {
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 48px;

  background-color: var(--bg-color);
  color: var(--fg-color);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#result {
  padding: 2px 6px;
}

.cara {
  background-color: var(--cara-bg-color);
  color: var(--cara-fg-color);
}

.coroa {
  padding: 2px;
  background-color: var(--coroa-bg-color);
  color: var(--coroa-fg-color);
}

@keyframes flip {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    /* 4 voltas */
    transform: rotateX(1440deg);
  }
}

.flip-animation {
  animation: flip 1s ease-in-out;
}