@font-face {
  font-family: 'Avara Black';
  src: url('fonts/Avara-Black.eot') format('embedded-opentype'),
       url('fonts/Avara-Black.woff2') format('woff2'),
       url('fonts/Avara-Black.woff') format('woff'),
       url('fonts/Avara-Black.ttf')  format('truetype'),
       url('fonts/Avara-Black.otf') format('otf');
}

html {
  font-family: 'Inter', sans-serif;
  color: black;
}

.logo {
  text-align: center;
  padding-top: 3vh;
}

.logo img {
  width: 150px;
}

.menu {
  padding: 3vw 5vw 0 5vw;
  padding: 3vh 5vh 0 5vh;
  padding: 3vmin 5vmin 0 5vmin;
  padding: 3vmax 5vmax 0 5vmax;
  font-size: 7em;
  font-family: Avara Black, serif;
  line-height: 1.1em;
}

.menu a {
  color: black;
  text-decoration: none;
}

.menu a:hover {
  color: white;
  text-decoration: none;
  text-shadow: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue;
}

.menu a:active {
  color: white;
  text-decoration: none;
  text-shadow: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue;
}

.open-page {
  color: white !important;
  text-decoration: none;
  text-shadow: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue;
}

.body-text {
  padding: 0 5vw 10vw 5vw;
  padding: 0 5vh 10vh 5vh;
  padding: 0 5vmin 10vmin 5vmin;
  padding: 0 5vmax 10vmax 5vmax;
  line-height: 1.25;
  font-size: 1.7em;
  word-break: break-word;
}

.body-text a {
  color: black;
}

.body-text a:hover {
  color: blue;
}

.body-text a:active {
  color: blue;
}

.footer {
  height: 50px;
  overflow: hidden;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: yellow;
  white-space: nowrap;
}

.footer h3 {
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.25;
  position: absolute;
  height: 100%;
  margin: 0;
  padding-left: 100%;
  line-height: 50px;
  text-align: center;
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);	
  transform:translateX(100%);	
  -moz-animation: footer 15s linear infinite;
  -webkit-animation: footer 15s linear infinite;
  animation: footer 30s linear infinite;
}

.footer h3:hover {
  animation-play-state: paused;
}

.footer h3 a {
  color: black;
}

.footer h3 a:hover {
  color: blue !important;
}

.footer h3 a:active {
  color: blue;
}

@-moz-keyframes footer {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes footer {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes footer {
  0% { 
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(0%); 		
  }
  100% { 
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); 
  }
}

@media (min-width: 2000px) {
  .logo img {
    width: 200px;
  }
  .menu {
    font-size: 9em;
  }
}

@media (max-width: 1200px) {
  .menu {
    font-size: 5.5em;
  }
}

@media (max-width: 768px) {
  .logo img {
    width: 115px;
  }
  .menu {
    font-size: 3.5em;
  }
}

@media (max-width: 480px) {
  .menu {
    font-size: 3em;
  }
  .body-text {
    font-size: 1.5em;
  }
  .footer h3 {
    font-size: 1.5em;
  }
}

@media (max-width: 240px) {
  .logo img {
    width: 75px;
  }
  .menu {
    font-size: 2em;
  }
  .body-text {
    font-size: 1.3em;
  }
  .footer h3 {
    font-size: 1.3em;
  }
}