:root {
  --dark: #191919;
  --light: #f0f0f0;
  --accent: #2273ff;

  --h1-size: clamp(5rem, 15vw, 60rem);
  --h1-weight: 800;

  --h2-size: clamp(2rem, 4.5vw, 3rem);
  --h2-weight: 800;

  --body-size: clamp(1rem, 1.2vw, 1.125rem);
  --body-weight: 300;

  --lyrics-size: clamp(0.9rem, 1.2vw, 0.9rem);
  --lyrics-weight: 300;
}

h1 { 
  font-size: var(--h1-size); 
  font-weight: var(--h1-weight);
}

h2 { 
  font-size: var(--h2-size); 
  font-weight: var(--h2-weight);
}

p, a { 
  font-size: var(--body-size); 
  font-weight: var(--body-weight);
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--accent);
  min-height: 100vh;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Bold", Arial, sans-serif;
}

.wrap {
  max-width: 700px;
  margin-inline: auto;
  padding-inline: 1rem; 
  padding-top: clamp(1rem, 5vw, 5rem);
  padding-bottom: clamp(1rem, 5vw, 5rem);
}

a {
    color: var(--dark);
}

a:hover {
    color: var(--accent);
    transition: 300ms;
}