* {
        box-sizing:border-box;
      }
      
      body {
        background-image: url(/stuff/third-party/sea.jpg);
        background-color: #47546e;
        min-height: 100vh;
        font-family: georgia, serif;
        color: lightgray;
        margin: 0px;
      }

      #title {
        color: lightgray;
        text-align: center;
      }

      #constructionText {
        font-size:30px;
        color: white;
        text-align: center;
        border: 4px solid #ffdd00;
        margin: 0 auto;
        max-width: 550px;
        padding: 5px;
      }

      #melonBadge:hover {
        width: 110px; 
      }

      /* #region ANIMATED TITLE */
      
      
      @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 */

      header {
        height: 200px;
        display:flex;
        justify-content: center;
        align-items: center;
      }
      header span {
        display: inline-block;
      }

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

      section {
        display: flex;
      }

      article {
        background-color: #425090;
        color:  lightgray;
        border: 5px solid #243065;
        border-radius: 12px;
        padding: 20px 20px;
        box-shadow:10px 10px 10px rgba(0,0,0,0.2);
        max-width: 600px;
        margin: 20px auto;
      }

      #checklist {
        background-color: #425090;
        border: 4px solid #243065;
        border-radius: 7px; 
        align-items: center;
        color: lightgray;
        padding: 5px;
        padding-left: 30px;
        margin: 0;
        width: 200px;
        font-family: candara,sans-serif;
      }
      #checklist h3 {
        position: relative;
        left:-20px;
        margin-bottom: 10px;
        margin-top: 5px;
        color: #9eaded;
        font-family:georgia, serif;;
      }
      #checklist li { 
        margin-bottom: 5px;
        font-size: 12px;
      }

      h2 {
        color: #2f3966;
        margin: 0;
        margin-bottom: 30px;
      }

      h3{
        margin: 0;
        margin-bottom: 20px;
        color: #9eaded;
      }