:root {
  /* colors */
  --white: #f4f4f4;
  --cherry-blossom-pink: #edafb8ff;
  --champagne-pink: #f7e1d7ff;
  --timberwolf: #dedbd2ff;
  --ash-gray: #b0c4b1ff;
  --outer-space: #4a5759ff;
  --black: #2a2a2a;

  /* sizes */
  --sz-sm: .5em;
  --sz-md: 1em;
  --sz-lg: 1.5em;

  /* typography */
  font-size: calc(15px + .390625vw);
  font-family: Arial, sans-serif;

  --border-radius: .5rem;
}

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

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
}

button {
  padding-block: var(--sz-sm);
  padding-inline: var(--sz-md);
  border-radius: var(--border-radius);
  color: var(--timberwolf);
  background: var(--outer-space);
  font-weight: 700;
  border: none;
  font-size: var(--sz-lg);
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--sz-md);
}

.site-header__title {
  font-size: var(--sz-md);
  color: var(--cherry-blossom-pink);
  text-align: center;
  text-wrap: balance;
}

#reset {
  background: var(--cherry-blossom-pink);
  color: var(--outer-space);
  font-size: var(--sz-sm);
}

.site-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline: auto;
  width: min(100% - var(--sz-md) * 2, 120ch);
}

.select-mode {
  color: var(--champagne-pink);
  margin-block-end: 0;
}

.mode-select {
  display: flex;
  justify-content: space-around;
  gap: var(--sz-md);
  flex-wrap: wrap;
  padding-block: var(--sz-sm);
  padding-inline: var(--sz-md);
  margin-block-end: var(--sz-md);
}

.mode-select > button.active {
  background: var(--timberwolf);
  color: var(--outer-space);
}

#start, #alone-update {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sz-sm);
}

#start.hidden {
  display: none;
}

#song-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-block-start: var(--sz-md);
  padding: var(--sz-md);
  text-align: center;
  background: var(--champagne-pink);
  border-radius: var(--border-radius);
}

#song-info.hidden {
  display: none;
}

#song-info p {
  color: var(--outer-space);
}

#title {
  margin-block: 0;
  font-weight: 700;
  font-size: var(--sz-lg);
}

#tempo {
  font-weight: 600;
  margin-block-start: var(--sz-sm);
  margin-block-end: 0;
}

#audio-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sz-sm);
}

#audio-controls.hidden {
  display: none;
}

#audio-controls button {
  font-size: var(--sz-md);
}

#play-pause {
  margin-block-start: var(--sz-sm);
  width: 100%;
}

.secondary-controls {
  display: flex;
  justify-content: space-evenly;
  gap: var(--sz-md);
  width: 100%;
}

.time-display {
  display: flex;
  gap: var(--sz-md);
  width: 100%;
  justify-content: center;
  background: var(--ash-gray);
  border-radius: var(--border-radius);
  padding-block: var(--sz-sm);
  padding-inline: var(--sz-md);
}

.time-display p {
  margin: 0;
  color: var(--outer-space);
}

#alone-controls {
  display: flex;
  margin-block-start: var(--sz-sm);
}

#alone-controls.hidden {
  display: none;
}

#alone-update {
  width: 100%;
}

.hidden {
  display: none;
}