body, html {
    font-family: 'kenney_rocketregular';
    height: 100%;
    background-color: black;
}

h1 {
    font-family: 'kenney_rocketregular';
    color: #02c4fa; 
    transform: translate(-50%, -50%);    
    text-align: center;
    position: absolute;
    top: 75%;
    left: 50%;
    font-size: 9em;
}

.hero-image {
  background-image: url("../images/watchfire-logo-hero-2.png");
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

@font-face {
    font-family: 'kenney_rocketregular';
    src: url('../css/fonts/kenney_rocket-webfont.woff2') format('woff2'),
         url('../css/fonts/kenney_rocket-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media only screen and (max-width: 1400px){
    h1 {
        font-size: 6.8em;
    }
}

@media only screen and (max-width: 920px){
    h1 {
        font-size: 5.1em;
    }
}

@media only screen and (max-width: 580px){
    h1 {
        font-size: 3.4em;
    }
}

@media only screen and (max-width: 412px){
    h1 {
        font-size: 2.4em;
    }
}

@media only screen and (max-width: 280px){
    h1 {
        font-size: 1.8em;
    }
}