@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

:root {
  --black: #161816;
  --grey: #323232;
  --white: #faf0e6;
  --pink: #ffcccc;
  --yellow: #ffd91c;
}

html {
  background-color: var(--pink);
  font-family: "Arial", sans-serif;
}

header {
  font-family: "Roboto", sans-serif;
  color: var(--grey);
  font-size: 4vh;
  font-weight: 900;
  font-style: italic;
}
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
}
.middle-gradient {
  background: linear-gradient(
    160deg,
    var(--pink) 25%,
    var(--yellow) 25% 75%,
    var(--pink) 25%
  );
}
.audio-footer {
  position: fixed;
  font-size: 30px;
  font-family: "Roboto", sans-serif;
  left: 0;
  bottom: 30px;
  width: 100%;
  text-align: center;
}
.audio-player {
  width: 80%;
  height: 80x;
}