@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
@media screen and (min-width: 40em) { 
  body {
    padding:0;
    margin:0;
    display: grid;
    grid-template:
      "sidebar h2" auto 
      "speaker . " auto 
      "p       p " auto 
      / 30% 1fr;
    column-gap: 1em;
  }
}

header {
  background:maroon;
  padding: 1em;
  color:white;
}

p {
  grid-area: p;
}

h1 {
  color: white;
  text-shadow: -1px 1px 1px black;
  
 font-family: Andika;
}

p {
  display: grid;
  margin-bottom: 4em;
}


p em {
  display: grid;
  margin-left: 5em;
}

p:hover {
  cursor: pointer;
}

p strong:before {
  content: "";
  width: 2em;
  display: inline-block;
}

p:hover strong:before {
  content: "▶️";
  width: 2em;
}

/* 
p:before {
  content: "▶️";
} */

p strong {
  font-family: Gentium Plus;
  color: maroon;
  font-size: x-large;
}


p em {
  font-family: Gentium Plus;
  font-size: large;
}


audio {
  display: none;
}

p [lang]:before {
  font-size: small;
  background: #333;
  border-radius: 4px;
  color: whitesmoke;
  font-style: normal;
  font-family: sans-serif;
  font-size: small;
  text-transform: uppercase;
  content: attr(lang);
  margin: 0 1em;
  padding: .2em;
}


footer {
  display: grid;
  grid-column: span 2;
  place-content: center;
  border-top: 1px solid maroon;
  background: #333;
}

footer a {
  color:white;
}