html {
    position: relative; /*allows nav and header to be sticky*/
    background-image: radial-gradient(white 40%,#f18786); /*gradient background for visual interest*/
    background-repeat: no-repeat; /*prevents background from repeating*/
    background-size: cover; /*ensures background covers entire page*/
    font-family: 'Times New Roman', Times, serif;
}
nav {
    position: sticky; /*keeps nav bar at top of page*/
    top: 10px; /*10px from top of page*/
}

header {
    background: linear-gradient(#fdead3 0%, white); /*gradient background to provide visual interest*/
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold; /*bold header for emphasis*/
    border-bottom: 2px solid darkgray;
    position: sticky; /*keeps header at top of page*/
    top: 0;
    border: 5px solid black; /*border for definition*/
}
header h1 {
    text-decoration: underline; /*underline header for clarity*/
}
nav a {
    margin: 0 15px; /*spacing between links*/
    text-decoration: underline; /*underline links for clarity*/
    color: darkblue;
    font-weight: bold; /*bold links for emphasis*/
}
nav a:hover {
    color: darkred; /*hover effect for interactivity*/
}

.index-section-images1, .index-section-images2, .index-section-images3 { /*class for image sections*/
    display: flex; /*flex for responsive image layout*/
    justify-content: center;
    gap: 10px; /*spacing between images*/
    margin-top: 20px;
}
.lugrasimo-regular { /*font to provide a unique style for titles*/
  font-family: "Lugrasimo", cursive;
  font-weight: 400;
  font-style: normal;
}

.container {
  margin:auto; /*centers the container*/
  width:70%; /*sets width to 70% of parent*/
  background-color: #eeeeee;
  padding:25px; /*padding for spacing*/
  border: 2px solid darkgray; /*border for definition*/
  border-radius: 5px;
  margin-bottom: 10px;
}

fieldset {
    border: 2px solid darkgray; /*border for definition*/
    border-radius: 5px; /*rounded corners for visual appeal*/
    padding: 10px;
    margin-bottom: 20px;
    background-color: #f9f9f9; /*light background for readability*/
}
legend {
    font-weight: bold; /*bold legend for emphasis*/
    font-size: 1.2em;
    padding: 0 10px; /*padding for spacing*/
}
label {
    display: block; /*block display for better layout*/
    margin-bottom: 10px;
    font-weight: bold; /*bold labels for emphasis*/
}
input, select, textarea {
    width: 100%; /*full width for better usability*/
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc; /*border for definition*/
    border-radius: 4px; /*rounded corners for visual appeal*/
    box-sizing: border-box; /*ensures padding and border are included in total width*/
}

#centering {
    text-align: center; /*centers text*/
}


#rooms-table {
    width: 90%;
    margin: 20px auto;
    border-collapse: collapse; /*ensure cell borders join cleanly*/
    border: 3px solid black; /*outer table border*/
    background-color: #ffffff;
}

#rooms-table th, #rooms-table td {
    border: 1px solid black; /*cell borders*/
    padding: 10px 12px;
    text-align: left;
}

#rooms-table th {
    background-color: #f2f2f2; /*light background for header*/
    font-weight: bold; /*bold header for emphasis*/
    text-align: center; /*center header text*/
    text-decoration: underline; /*underline header for clarity*/
}

#rooms-table caption {
    font-weight: bold; /*bold caption for emphasis*/
    padding: 8px 0; /*padding for spacing*/
}