body {
   font-family: Arial, sans-serif;
   margin: 20px;
   padding: 20px;
   background-image: url(../bgimages/8.png);
   line-height: normal;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers content */
  overflow-y: auto; /* Keeps main content scrollable */
}

.container {
   max-width: 96%; /* Makes it responsive */
   width: 100%;
   background-color:gainsboro;
   padding: 5%;
   border-radius: 20px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
   margin: 0 auto; /* Centers the container */
}

h1 {
   text-align: center;
}

ul {
   list-style-type: none;
   padding: 0px 10px 0px 0px;
}
#indented_list {
   list-style-type: square;
   padding-left: 15%;
}

li {
   margin: 20px 0;
}

a {
   color: blue;
}

.rsvp {
   text-align: center;
   margin-top: 20px;
   padding-left: 15%;
padding-right: 15%;
   font-size: large;
   font-weight: bold;
border-style: ridge;
border-radius: 10px;
border-width: 10px;
border-color:ghostwhite;
}

.oh { padding-left: 8px; }

img {
   max-width: 100%; /* Makes images responsive */
   height: auto; /* Maintains aspect ratio */
   object-fit: cover; /* Ensures image fills space properly */
}

/* Media Queries for Responsive Adjustments */

@media (min-width: 768px) {
   .container {
       max-width: 600px; /* Adjusts for tablets */
   }
}

@media (min-width: 1024px) {
   .container {
       max-width: 800px; /* Expands for larger screens */
   }
}

@media (max-width: 480px) {
   body {
       padding: 10px;
   }
   .container {
       padding: 10px; /* Adjust padding for smaller screens */
   }
   img {
       width: 100%; /* Ensures images scale down properly */
   }
}