/* Assignment: Style the h1 element in the header differently from the one in the main section - think about how you can do this. This could be something as simple as changing the color and font-size. (use a CSS comment to specify what this change is and what type of selector you used to make the change) */

/* Style the h1 element in the header, header h1 is a descendant selector. It targets an h1 element that is a descendant of a header element. This means it will apply styles to any h1 element that is nested within a header element in the HTML structure.*/
header h1 {
    color: darkred; /* Change the color to blue */
    font-size: 36px; /* Change the font size to 24 pixels */
}

/* Style the h1 element in the main section, this will style only the h1 element that is a decedent of main */
main h1 {
    color: green; /* Change the color to green */
    font-size: 30px; /* Change the font size to 36 pixels */
}

ul {
  list-style-type:circle;
}

h2{
    color:darkgreen;
}
/* Assignment: at least additional 3 sectors below */
body {
    background-color: aliceblue;
    font-family: Georgia, sans-serif;
    margin: 0;
}


main {
    margin: 20px;
}

.vertical-align {

    align-items: center;
    /* Vertically center the content */

}
nav {
    
    font-family: sans-serif;
    text-align: center;
}
.nav-container {
    padding-bottom: 20px; /* Adjust the value as needed */
}
.mainHeading {
    background-image: url('../images/LaGaude-village.jpg');
    background-position: center;
    background-size: cover;
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align items to the top */
    align-items: center; /* Center items horizontally */
    text-align: center;

    border: solid 3px black;
    padding: 20px;
}

.link-space {
    margin-left: 10px;
    /* Adjust the margin as needed */
}
.description {
    width:50%;
}
.ContactInfo {
    font-family: sans-serif;
    font-size: 12px;
    text-align: center;
    color:darkcyan;
}
footer {
    margin:20px;
}