body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    background-color: #f0f8ff;
    color: #2f0585;
  }
  
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
  }
  
  nav a {
    text-decoration: none;
    color: #ffffff;
  }
  
  .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    min-height: 400px;
  }
  
  .image-section {
    align-self: center; 
    max-width: 100%;
   
  }
  
  .image-section img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
  }
  
  .text-section {
    display: grid;
    align-content: center; 
  }

  header {
    text-align: center;
    background-color: #002343;
    padding: 2rem 1rem;
  }
  
  header .highlight {
    display: block;
    color: #2c9fd1;
    font-size: 1.5rem;
  }
  header {
    overflow: hidden;
}


header svg {
    width: 100vw;
    text-align: center;
  transform: scale(1.2);
    
}
h1{

    color: rgb(6, 2, 88);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: large;
    }
 
p{
  color: #ebe9f3;
  font-family: 'Times New Roman', Times, serif;
}



.st0{fill:#1214997e;}

.st1{fill:#0e0339;}

.st2{fill:hsl(222, 77%, 88%);}

.st3{fill:#155ec49e;}

.st4{fill:#03174b;}



#purple-pink-2{
    animation: wavemaker 10s ease-in-out infinite alternate-reverse;
}
  
#light-pink-2{
    animation: wavemaker 9s ease-in-out infinite alternate;
}
  
#red-pink-4{
    animation: wavemaker 17s ease-in-out infinite alternate-reverse;
}
  
#pastel-pink-5{
    animation: wavemaker 16s ease-in-out infinite alternate;
}
  
@keyframes wavemaker {  
0% {
    transform: translateX(-50px);
}
100% {
    transform: translateX(20px);
}
    
}
  
  .description {
    font-size: 1rem;
    color: #333;
  }
  
 
  
  .intro {
    padding: 2rem;
    background-color: #f8faff;
    text-align: center;
  }
  
  .aesthetic-img {
    border: 2px dashed #ccc;
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .logo {
    font-size: 2rem;
    font-weight: bold;
    color: #1d0e55;
  }
  
  .logo span {
    font-size: 1rem;
    color: #7da5a1;
  }
  
  .catchy {
    margin-top: 1rem;
    font-style: italic;
    color: #002343;
  }
  
  main {
    padding: 2rem;
  }
  
  main h2 {
    color: #1d0e55;
    font-size: 2rem;
    border-bottom: 2px solid #6092c0;
  }
  
  .place {
    margin-top: 2rem;
  }
  
  .place h3 {
    color: #167c7f;
  }
  
 
  
  .palette {
    padding: 1rem 2rem;
    background-color: #fff;
  }
  
  .palette h4 {
    color: #1d0e55;
  }
  
  .colors {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }
  
  .color {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }



  
  a {
      color: #d6e3ed;
      font-family: 'Times New Roman', Times, serif;
  }
  
  a:hover {
      color: #313648;
  }
 
  h2 {
      background-color: #313648;
      color: #eaeaea;
      padding: 1rem;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 25px;
  }
  
  main{
      background-color: #eaeaea;
  }
  


  #logo{
    animation-name: movingAround;
    animation-duration: 7s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes movingAround{
    0%{
        transform: translateX(-200px);
    }
    
    100%{
        transform: translateX(200px);
    }
}
 
   
h1{
        
        text-align: center;
        width: 100%;
        color: #f8f8f8;
        font-family: Georgia, 'Times New Roman', Times, serif;
        letter-spacing: 2px;
        word-spacing: 14px;
        text-shadow: 2px 2px 10px #d5d3d5;
        margin-top: 10px;
        font-size: 60px;
       
      }
      h3{
      
        color: #fff7f7;
      }
      /* Card Container */
      .card-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        max-width: 1000px;
        width: 100%;
        justify-content: center;
        margin: 0 auto;
      }
      
      
      .card {
        background: #1b0007;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s, box-shadow 0.3s;
      }
      
      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgb(254, 253, 253);
      }
      
      
      .card img {
        width: 200px;
        height: 200px;
        border-radius: 20%;
        object-fit: cover;
        margin-bottom: 10px;
        background-color: darkgray;
      
      }
      
      
      #cards figure{
        position: relative;
        height: 100%;
        border-radius: 2rem 2rem 0 0;
        overflow: hidden;
        background-color: #210a02;
      }
      
      #cards section{
       padding: 0.5rem;
       background-color: white;
       border-radius: 0 0 2rem 2rem;
      }
      
      #cards .top{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity, transform 0.25s;
        transform: translateY(1.7rem);
      }

 
      
  footer {
      color: #eaeaea;
      background-color: #35089d;
      padding: 1rem;
  }
  @media (max-width: 600px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
  }