@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poller+One&display=swap');

@keyframes subtitle {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body {
  margin: 0;
  background-color: white;
  background-image: url(/images/students.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
}

h1 {
  position: fixed;
  bottom: 20vh;
  font-family: 'Poller One';
  color: #fff;
  margin: 0;
  width: 100vw;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 10px #000;
  font-size: 10vw;
  text-align: center;
}

h1 .sub {
  margin-top: -1.5vw;
  display: block;
  font-size: 2.5vw;
  font-family: 'Oswald';
  animation-name: subtitle;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

@media (orientation: portrait) {
  h1 {
    font-size: 10vh;
    bottom: 30vh;
  }

  h1 .sub {
    margin-top: -1.5vh;
    font-size: 2.5vh;
  }
}

.kern {
  letter-spacing: -0.3rem;
}