/* Constants */

:root {
  --color-header: #333333;
  --color-button: #333333;

  --spacing-mouse: 0.25rem;
  --spacing-cat: 0.5rem;
  --spacing-dog: 1rem;
  --spacing-horse: 2rem;
  --spacing-elephant: 4rem;
  --spacing-whale: 12.8rem;
  --spacing-godzilla: 25.6rem;

  --font-size-cat: 0.75rem;
  --font-size-dog: 1rem;
  --font-size-lion: 1.25rem;
  --font-size-bear: 1.5rem;
  --font-size-cow: 1.75rem;
  --font-size-horse: 2rem;
  --font-size-elephant: 4rem;
  --font-size-whale: 8rem;

  --border-radius-mouse: 0.4rem;
  --border-radius-cat: 0.8rem;

  --border-width-ant: 0.1rem;
  --border-width-beetle: 0.2rem;
  --border-width-mouse: 0.4rem;

  --header-height: var(--spacing-elephant);

  --shift-delay: 0.3s;
}

/* Reset */

ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

input {
  margin: 0;
  font-size: inherit;
  cursor: pointer;
}

/* Box sizing */

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

/* Fix full width on small screens on chrome */
body, .g-Form, .g-Play {
  min-width: fit-content; 
}

/* Fonts */

@font-face {
  font-family: chords;
  src: url(fonts/chords.otf);
}

/* Common */

body {
  font-family: sans-serif;
  margin: 0;
  font-size: var(--font-size-bear);
  overflow-x: hidden;
  position: relative;
}

header {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding-left: var(--spacing-dog);
  background-color: var(--color-header);
  color: white;
  font-size: var(--font-size-cow);
  cursor: pointer;
}

/* Form */

.g-Form {
  display: flex;
  margin-top: var(--spacing-elephant);
  margin-bottom: var(--spacing-dog);
  flex-direction: column;
  row-gap: var(--spacing-horse);
  align-items: center;
}

.g-Form label {
  display: flex;
  align-items: baseline;
  cursor: pointer;
  width: fit-content;
}

.g-ChordLabel {
  font-family: chords;
}

.g-Form input[type="number"] {
  width: var(--spacing-whale);
}

.g-Form input[type="checkbox"], .g-Form input[type="number"] {
  margin-right: var(--spacing-dog);
}

.g-Form input[type="submit"] {
  background-color: var(--color-button);
  color: white;
  border: none;
  padding: var(--spacing-cat);
}

/* Play */

.g-Play {
  display: flex;
  align-items: center;
  height: calc(100vh - var(--header-height));
  position: relative;
  font-family: chords;
  font-size: 15vw;
  overflow-x: visible;
}

.g-Play--Shift {
  animation: Shift var(--shift-delay) ease-in-out;
}

/* Keep it sync with distance between chords */
@keyframes Shift {
  0%   {transform: translateX(50%);}
  100% {transform: translateX(0);}
}

.g-Chord {
  position: absolute;
  margin-top: -10px; /* Move a bit higher for a better rendering */
  transform: translateX(-50%);
  transition: opacity var(--shift-delay) ease-in-out;
}

.g-Chord:nth-child(1) { left:-25%; }
.g-Chord:nth-child(2) { left:25%; }
.g-Chord:nth-child(3) { left:75%; }

.g-Chord:nth-child(1) {
  opacity: 0;
}

.g-Chord--Beat {
  animation: Beat 0.2s linear var(--shift-delay);
}

@keyframes Beat {
  0%   {transform: translateX(-50%) scale(100%);}
  30%  {transform: translateX(-50%) scale(120%);}
  100% {transform: translateX(-50%) scale(100%);}
}