body {
    background-color: #9DACEA;
    background-image: url(../passion-site2/images/sky.gif);
    background-size: cover;
}


@font-face {
    font-family: 'RetroGaming';
    src: url('../passion-site2/retro_gaming-webfont.woff2') format('woff2'), 
         url('../passion-site2/RetroGaming.ttf format') format('ttf');}
@font-face {
    font-family: 'Daydream';
    src: url('../passion-site2/daydream-webfont.woff2') format('woff2'), 
        url('../passion-site2/Daydream.ttf format') format('ttf');}
        


.home-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; 
    font-family: RetroGaming;
    text-decoration: none;
}

.title {
    font-family: Daydream;
    color:fuchsia;
}

#home-title {
    font-family: Daydream;
    color: fuchsia;
}

p {
    font-family: RetroGaming;
}

.home-ham {
    width: 150px;
    height: 150px;
}

.home-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: auto;
    text-align: center;
    padding: 50px;
    border: 5px dashed;

}

.pop {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0px 30px 0px;
}

.residents {
    width: 200px;
    height: 200px;
}

#duo {
    width: 330px;
    height: 180px;
    position: relative;
    right: 15px;
}

h3 {
    font-family: Daydream;
}

h2 {
    font-family: RetroGaming;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    padding: 50px;
}

.home-button {
    position: sticky;
    padding: 2px;
    top: 0;
    text-align: right;
    z-index: 1;
}

.reflect-ham{
   position: sticky;
   top: 50%;
   left: 50%;
   height: 700px;
   width: 700px;
   padding: 50px 300px 50px;
}

.question {
    text-align: right;
}

.collapsible {
    display: none;
  }

  .collapsible-label {
    cursor: pointer;
    font-family: RetroGaming;
  }

  .collapsible-label::after {
    content: " [+]"; /* Default label text */
  }

  .collapsible:checked + .collapsible-label + .collapsible-content {
    display: block;
  }

  .collapsible:checked + .collapsible-label::after {
    content: " [-]"; /* Text to display when content is expanded */
  }

  .collapsible-content {
    display: none;
  }

  .sign {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .mayor {
    position: absolute;
    bottom: 0;
    padding: 0px 100px 0px;
  }

  .image-container {
    display: flex;
    justify-content: space-between; /* Spread images evenly */
    align-items: center; /* Center vertically */
    width: 100%; /* Make the container as wide as the screen */
    overflow-x: auto; /* Enable horizontal scrolling if needed */
  }
  
  .image-container img {
    max-width: 100%; /* Ensure images don't exceed their original width */
    height: auto; /* Maintain image aspect ratio */
  }

a:visited {
    color: black; /* Replace with your desired color code */
    text-decoration: none;
}

/* Change the color of links when hovered */
a:hover {
    color: fuchsia; /* Replace with your desired color code */
    text-decoration: none;
}

#no-underline1 {
  text-decoration: none;
}

#no-underline2 {
  text-decoration: none;
}

#no-underline3 {
  text-decoration: none;
}