/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    body {
      margin: 0;
      font-family: 'Trebuchet MS', sans-serif;
      background-image: url('/img/thousand_sunny_bckgrd.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center top;
      background-attachment: scroll;
      color: white;
    }
 
    .container {
      max-width: 900px;
      margin: auto;
      padding: 20px;
    }
 
    .section {
      background-color: rgba(0, 0, 0, 0.7);
      padding: 20px;
      margin-bottom: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
 
    h1, h2 {
      text-align: center;
      color: #FFD700;
    }
 
    a {
      color: #00BFFF;
      text-decoration: none;
    }
 
    a:hover {
      text-decoration: underline;
    }
 
    ul {
      list-style-type: none;
      padding: 0;
    }
 
    li {
      margin: 10px 0;
    }
 
    @media (max-width: 600px) {
      .container {
        padding: 15px;
      }
 
      h1 {
        font-size: 1.8em;
      }
 
      h2 {
        font-size: 1.4em;
      }
    }
    
    /* Additional styles for the episode tracker */
form {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #FFD700;
}

input[type="text"], input[type="number"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #00BFFF;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

button[type="submit"] {
    background-color: #00BFFF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #0080FF;
}

.logbook-entry {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    animation: fadeIn 1s ease-in-out;
}

.logbook-entry p {
    margin: 0;
    line-height: 1.5;
}

/* Optional animation for new entries */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

 .section ul {
    list-style: none;
    padding: 0;
  }

  /* ... other CSS rules ... */

.section ul {
  list-style: none;
  padding: 0;
}


/* Add a new, more specific rule for the character list */
.character-list li {
  display: inline-block;
  margin-right: 20px;
  text-align: center;
}