* {
  box-sizing: border-box;
}


body {
  background-image: url(/assets/background/sea_\(loop\).jpg);
  background-color: #47546e;
  min-height: 100vh;
  font-family: georgia, serif;
  color: lightgray;
  margin: 0;
}


header {
  height: 200px;
  display:flex;
  justify-content: center;
  align-items: center;
}
header span {
  display: inline-block;
}
#title {
  color: lightgray;
  text-align: center;
}
/* #region TITLE ANIMATION */
  @keyframes rainbow {
    0%   { color: blue; }
    20%  { color: green; }
    40%  { color: yellow; }
    60%  { color: orange; }
    80%  { color: red; }
    100% { color: purple; } 
  }
  .letter {
    animation: rainbow 2.1s infinite; 
  }
  .letter:nth-child(1) { 
    animation-delay: 0.1s;
  }
  .letter:nth-child(3) {
    animation-delay: 0.2s;
  }
  .letter:nth-child(4) {
    animation-delay: 0.3s;
  }
  .letter:nth-child(5) {
    animation-delay: 0.4s;
  }
  .letter:nth-child(6) {
    animation-delay: 0.5s;
  }
  .letter:nth-child(7) {
    animation-delay: 0.6s;
  }
  .letter:nth-child(8) {
    animation-delay: 0.7s;
  }
  .letter:nth-child(9) {
    animation-delay: 0.8s;
  }
  .letter:nth-child(11) {
    animation-delay: 0.9s;
  }
  .letter:nth-child(12) {
    animation-delay: 1s;
  }
  .letter:nth-child(13) {
    animation-delay: 1.1s;
  }
  .letter:nth-child(14) {
    animation-delay: 1.2s;
  }
  .letter:nth-child(15) {
    animation-delay: 1.3s;
  }
  .letter:nth-child(17) {
    animation-delay: 1.4s;
  }
  .letter:nth-child(18) {
    animation-delay: 1.5s;
  }
  .letter:nth-child(19) {
    animation-delay: 1.6s;
  }
  .letter:nth-child(20) {
    animation-delay: 1.7s;
  }
  .letter:nth-child(21) {
    animation-delay: 1.8s;
  }
  .letter:nth-child(22) {
    animation-delay: 1.9s;
  }
  .letter:nth-child(23) {
    animation-delay: 2s;
  }
  .letter:nth-child(25) {
    animation-delay: 2.1s;
  }
/* #endregion */


nav ul {
  display: flex;
  list-style: none;
  background-color:#646e9c;
  border-top: 4px solid #8d94b5;
  border-bottom: 4px solid #8d94b5;
  margin: 0;
  padding:0;
  max-width: 100%;
  height: 60px;
  align-items: center;
  justify-content: center;
}
nav li a {
  padding:18px 20px;
  text-decoration: none;
  color: lightgray;
  font-size: 1em;
}
nav li a:hover {
  background-color: #8d94b5;
}