body {
  background: #eddcff;
  font-family: Quicksand ;
  color: #6698cc;
  min-height: 100vh;
}

h1{
  color: #6698cc;
  text-align: center;
  padding: 25px;
}
h2{
    font-style:normal;
}
.wrap { max-width: 900px; margin: 0 auto; padding: 6vw 5vw 8vw; }

.navbar { display:flex; gap:1.2rem; font-family:'Helvetica Neue',Arial,sans-serif; font-size:2rex; margin-bottom: 3rem; }
.navbar a { color:#84b534; text-decoration:none; }
.navbar a.current { color:#fdfdfd; font-weight:bold; border-bottom:1.5px solid #ded7eb; border-radius: 10%; }

.banner { border:5px solid #b9f76d; background:#c9e8ea; padding:2rem; display:flex; align-items:center; gap:2rem; margin-bottom: 3rem;}
.banner svg { width:140px; flex-shrink:0; }
.banner h1 { font-style:italic; font-weight:400; font-size:2rem; margin-bottom:0.5rem; }
.banner p { font-size:0.95rem; line-height:1.6; color:#4a4038; }

.kicker { font-family:'Helvetica Neue',Arial,sans-serif; font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:#8a6f4f; margin-bottom:1rem; }


.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 photos side by side */
  gap: 0.2rem;
}

.photo-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* On smaller screens, stack them */
@media (max-width: 600px) {
  .photo-grid {
    grid-template-columns: 1fr; /* one column = stacked */
  }
}
.theatre-video {
  border: 1.5px solid #b8a4e8;
  background: #fdfbf6;
  padding: 0.5rem;
  margin-bottom: 3rem;
}

.theatre-video video,
.theatre-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;   /* keeps proportions responsive without JS */
  display: block;
  border: none;
}
img{
   border:5px solid #bb8fc9; 
   border-top-right-radius: 15%;
   background:#eef5fa; 
   padding:1rem; 
   display:flex; 
   align-items:center; 
   gap: 1rem; 
   margin-bottom: 1rem; 
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  
  border-radius: 5px;
  background-color: #c5f1aef6;
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

.icon{
  height: 145px;
  width: 145px;
}
@media (max-width: 600px) {
  .icon {
    width: 60px;
    height: 60px;
    padding: 10px;
  }
}
.centered{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.pointless{
  list-style-type:none;
  
}