@charset "utf-8";
/* CSS Document */

    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* Header and Footer full width */
    header, footer {
      background-color: #66cccc;
      color: white;
      padding: 20px;
      text-align: center;
      width: 100%;
    }

    /* Navigation */
    nav {
      margin-top: 10px;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 10px;
      font-weight: bold;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Playfair Display', serif;
      color: #333333;
      -webkit-text-stroke: 0.3px aqua;
       /*text-shadow: */
       /* -1px -1px 2px #333333,  */
        /* 1px -1px 2px #333333,*/
        /*-1px  1px 2px #333333,*/
        /* 1px  1px 2px #333333;*/
      letter-spacing: 1px; /* Adjust as needed: try 1px–2px */
    }

    /* Main layout container */
    .main-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 10px;
    }

    .content {
      background-color: #f4f4f4;
      padding: 20px;
    }

    .sidebar {
      background-color: #e0e0e0;
      padding: 20px;
      margin-top: 10px;
    }
.dropcap {
  float: left;
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  line-height: 1;
  padding-right: 6px;
  color: #2c6777;
}

    /* Responsive for wider screens */
    @media (min-width: 600px) {
      .main-container {
        flex-direction: row;
        width: 80%;
        margin: 0 auto;
        gap: 20px;
      }

      .content {
        width: 80%;
        margin: 0;
      }

      .sidebar {
        width: 20%;
        margin: 0;
      }
    }
   @media (max-width: 600px) {
  header h1 {
    display: none;
  }
}