html, body {
  background-color: #202124;
  font-family: 'Quicksand', sans-serif;
  color: #FFFFFF;
  overflow: hidden; }

.Moospeak {
  text-align: center; }

#Moospeak-Header {
  font-size: 5em;
  margin: 2em 0 -0.01em 0; }

.Moospeak-Languages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 100px;
  max-width: 100%;
  flex-wrap: wrap; }

  .Moospeak-Languages a {
    text-decoration: none;
    color: #8ab4f8; }

footer {
    width: 100%;
    text-align: center;
    bottom: 20px;
    position: absolute; }

@media (min-width: 401px) and (max-width: 500px) {
  #Moospeak-Header {
    font-size: 4.5em; }
}

@media (min-width: 340px) and (max-width: 401px) {
  #Moospeak-Header {
    font-size: 4em; }
}

@media (max-width: 340px) {
  #Moospeak-Header {
    font-size: 3.5em; }

  footer {
    bottom: 250px; }
}

@media (min-height: 601px) and (max-height: 700px) {
  div {
    transform: translateY(-75px);
  }
  footer {
    top: 600px;
  }
}

@media (min-height: 501px) and (max-height: 600px) {
  div {
    transform: translateY(-75px);
  }
  footer {
    top: 550px;
  }
}

@media (min-height: 401px) and (max-height: 500px) {
  div {
    transform: translateY(-75px);
  }
  .Moospeak-Languages {
    transform: translateY(-150px);
  }
  footer {
    top: 425px;
  }
}

@media (max-height: 400px) {
  div {
    transform: translateY(-120px);
  }
  .Moospeak-Languages {
    transform: translateY(-200px);
  }
  footer {
    top: 400px;
  }
}

/* @media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
} */