@font-face { 
  font-family: GreatVibes;
  src: url('fonts/GreatVibes-Regular.ttf') format('truetype');
}

:root {
  --shadow-color: #222222;
}

body {
  background-color: black;
  background: url('img/pothos-large.jpg') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

h1 {
  font-family: GreatVibes;
  font-size: 80px;
  font-weight: 500;
  letter-spacing: 6px;
  text-align: center;
  text-shadow: 2px 2px var(--shadow-color);
  text-rendering: optimizeLegibility;
  color: white;
  margin: 30px;
}

p {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 20px;
  color: white;
  text-align: center;
  text-shadow: 1.2px 1.2px var(--shadow-color);;
}

.container {
  max-width: 600px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.player {
  max-width: 100%;
}

@media only screen and (max-device-width: 667px) {
  h1 {
    font-size: 10vw;
    letter-spacing: 3px;
    text-shadow: 1px 1px var(--shadow-color);;
  }

  p {
    font-size: 4vw;
  }
}