h1 {
  text-align: center;
  font-size: 30pt;
  font-family: 'Encode Sans', sans-serif;
}

h2 {
  font-size: 20pt;
}

p {
  margin: 10px;
  font-size: 12pt;
  font-family: 'Open Sans', sans-serif;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
  80% {
    opacity: 0.75;
  }
}
.stats {
  text-transform: uppercase;
  color: rgb(175, 0, 0);
  text-align: center;
  /* animation: blink 4s linear infinite; */
}

span {
  font-size: 14pt;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 25vh;
  margin: 5vh;
  margin-left: 10vh;
  margin-right: 10vh;
}
.containerChild {
  width: 100%;
  padding-bottom: 5vh;
  background-color: #AAD8D7;
}

.containerChild h2, h3, p {
  padding-left: 10vh;
  padding-right: 10vh;
}

.containerChild h2, h3 {
  font-family: 'Encode Sans', sans-serif;
}

#containerChild2, #containerChild1 h2, #stats {
  text-align: center;
}

#selected-names p {
  margin: 16px;
}

#resContainer {
  padding: 5vh;
}

button {
  border: 3pt black solid;
  border-radius: 15px;
  padding: 14px 28px;
  font-size: 20pt;
  font-family: 'Encode Sans', sans-serif;
}

button:hover {
  border-color: #BF8308;
  color: #BF8308;
}

#graphic {
  height:100px;
  left: 62vh; /* play around with this */
  position:absolute;
  top: 25vh; /* and play around with this */
}
img {
  width: 80%;
}

@media only screen and (orientation: portrait) {
  html {
    scroll-padding-top: var(--scroll-padding, 100px);
    /* padding-top: 10vh; */
  }
  h1 {
    font-size: 36pt;
  }
  h2 {
    font-size: 24pt;
  }
  p {
    margin: 0;
    font-size: 14pt;
  }
  #stats {
    font-weight: normal;
    font-size: 15pt;
  }
  .container {
    grid-template-columns: 1fr;
    grid-gap: 2vh;
    margin: 1vh;
    margin-top: 2vh;
  }
  .containerChild {
    width: 100%;
    padding-bottom: 2vh;
  }
  .containerChild h2, h3, p {
    padding-left: 3vh;
    padding-right: 3vh;
  }
  #resContainer {
    padding: 2vh;
  }
  button {
    border-width: 2pt;
    padding: 14px 28px;
    font-size: 24pt;
  }
  #graphic {
    height:100px;
    left: 25vh; /* play around with this */
    position:absolute;
    top: 20vh; /* and play around with this */
  }
  img {
    width: 60%;
  }
}