body, html {
height:100%;
}

.main {
  display:flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}

#welcome-message {
 width:60%;
 position: relative;
 text-align: center;
}


h1 {
  font-family: 'Bangers', cursive;
  font-size: 5rem;
  text-align: center;
  color: #94cdd3;
  margin: 10px 0px 0px 0px;

}

.welcome {
  color: #000000;
}



.enter {
  opacity: 100%;
  font-family: 'Cuprum', sans-serif;
  color: #000;
  position: absolute;
  top: 30%;
  left:45%;

}

#welcome-message a:hover~.enter {
  opacity:100%;
}

.hidden {
  display: none;
  color: black;
  font-family: 'Cuprum', sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 1rem;
}

@media screen and (max-width: 1200px) {
  h1 { font-size: 6rem; width:100%; margin-top: 2rem; }
  #welcome-message { width:100%; margin-top: 8rem; }
}

@media screen and (max-width: 600px) {
  h1 { font-size: 4rem; width:100%; margin: 4rem; }
  #welcome-message { width:100%; margin-top: 6rem; }
  .enter {display: none;}
  .hidden {display: block;}
}

@media screen and (min-width: 2400px) {
  h1 { font-size: 6rem; width:100%; margin-top: 2rem; }
  #welcome-message { width:55%; margin-top: 3rem; }
}