index.css

/*

Animation inspired by Shark @ https://codepen.io/sharkers/full/jbEYgE

*/

html {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  height: 100%;
}

body {
  background: #242628;
  margin: 10%;
}

footer {
  margin: 10% 20%;
  text-align: center;
}

h1 {
  color: #fff;
  text-align: center;
}

p {
  color: #cecece;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  margin: 20px 0 0;
  text-align: center;
}

#box {
  color: #fff;
  font-size: 3em;
  height: 100%;
  letter-spacing: -0.045em;
  margin: 4% auto;
  text-align: center;
  transition: all 0.2s ease;
}

.map-selection {
  font-size: 1.5em;
  text-align: center;
}

.button {
  background-color: #E18000;
  border-radius: 10px;
  border: none;
  display: inline;
  font-size: 1.2rem;
  margin: 10px;
  padding: 5px 15px;
}


.city-box {
  padding: 20px 0;
}

.city-name {
  cursor: pointer;
  opacity: 1;
  padding: 5px;
  position: relative;
  transition: all 0.2s ease;
}

.animate {
  animation: mov 0.12s infinite;
  color: rgba(255, 255, 255, 0.2);
  text-shadow: 0 4px 4px rgba(255, 255, 255, 0.2),
    0 6px 6px rgba(255, 255, 255, 0.4), 0 8px 18px rgba(255, 255, 255, 0.8),
    0 22px 18px rgba(255, 255, 255, 0.5), 0 -4px 4px rgba(255, 255, 255, 0.2),
    0 -6px 6px rgba(255, 255, 255, 0.4), 0 -8px 18px rgba(255, 255, 255, 0.8),
    0 -22px 18px rgba(255, 255, 255, 0.5);
  top: 12px;
}

@keyframes in {
  0% {
    transform: translatey(-30px);
  }
  50% {
    transform: translatey(-15px);
  }
  100% {
    transform: translatey(0);
  }
}

@keyframes mov {
  0% {
    opacity: 0;
    transform: translatey(-30px);
  }
  50% {
    opacity: 1;
    transform: translatey(-15px);
  }
  100% {
    opacity: 0;
    transform: translatey(25px);
  }
}