@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* 
Color Pallate
Black - #000
Charcoal - #40434E
wine - #702632
Cordovan - #912F40
White - #fff 
*/

#menuIcon {
    position: absolute;
    top: 0;
    right: 0;
}

#menu {
    text-align: right;
    display: none;
}

#menuIcon a,
#menuIcon a:hover,
#menuIcon a:visited,
#menuIcon a:active {
    text-decoration: none;
    color: inherit;
}

.map {grid-area: map;}
.side {grid-area: s;}
.side2 {grid-area: s2;}
.h {grid-area: header;}
.f {grid-area: footer;}
.nav {grid-area: navbar;}
.middle {grid-area: mid;}
.un1 {grid-area: Unordered_list_1;}
.un2 {grid-area: Unordered_list_2;}
.un3 {grid-area: Unordered_list_3;}
.un4 {grid-area: Unordered_list_4;}
.un5 {grid-area: Unordered_list_5;}
.un6 {grid-area: Unordered_list_6;}
.image_5 {grid-area: image_5;}
.image_4 {grid-area: image_4;}
.image_3 {grid-area: image_3;}
.image_2 {grid-area: image_2;}
.image_ {grid-area: image_1;}
.p1 {grid-area: paragraph_1;}
.p2 {grid-area: paragraph_2;}
.p3 {grid-area: paragraph_3;}
.p4 {grid-area: paragraph_4;}
.p5 {grid-area: paragraph_5;}
.p6 {grid-area: paragraph_6;}

.grid_container {
    display: grid;
    background-color: rgba(120, 86, 86, 0.1);
    padding: 10px;
    padding-left: 20px;
    gap: 10px;
}

.grid_container_home {
    grid-template-areas:
    's image_1 paragraph_1 s2'
    's image_1 paragraph_2 s2'
    's map map s2'
    's footer footer s2';
}

.grid_container_History {
    grid-template-areas:
    's image_1 paragraph_1 s2'
    's paragraph_2 paragraph_2 s2'
    's paragraph_3 paragraph_3 s2'
    's image_2 image_3 s2'
    's paragraph_4 paragraph_4 s2'
    's paragraph_5 paragraph_5 s2'
    's footer footer s2';
}

.grid_container_RoomsAndRates {
    grid-template-areas: 
    's image_1 paragraph_1 s2'
    's paragraph_2 image_2 s2'
    's image_3 paragraph_3 s2'
    's paragraph_4 image_4 s2'
    's image_5 paragraph_5 s2'
    's footer footer s2';
}

.grid_container_AccommodationsAndAttractions {
    grid-template-areas: 
    's image_1 Unordered_list_1 s2'
    's image_2 Unordered_list_2 s2'
    's footer footer s2';
}

.grid_container_Contact_Form {
    grid-template-areas: 
    's mid s2'
    's footer s2';
}

.grid_container_Contact_Form_inside {
    grid-template-areas: 
    's p1 s2'
    's p2 s2'
    's p3 s2'
    's p4 s2'
    's p5 s2';
}

.h,.img,.p,.f,.list {
    background-color: #702632;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 30px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.f {
    font-size: medium;
}

.list {
    list-style-type: disc;
    padding: 40px;
}

.nav {
    padding: 20px;
    color: #000;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-content: center;
    justify-content: center;
    justify-content: space-around;
}

.sticky {
    position: sticky;
    top: 0;
}

.side2,.side {
    width: 100px;
}

.logo {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.map {
    width: 1300px; 
    height: 500px;
    border: 0;
}

.header_1 {
    text-align: center;
    font-size: xx-large;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 15px;
}

body {
    background-color: #fff;
}

a {
    text-decoration: none;
    color: #000;
}

footer {
    background: #702632;
}

a:hover {
    text-decoration: underline;
}

textarea, input {
    background-color: #fff;
    border: none;
    resize: none;
}

img {
    width: 600px;
    height: 440px;
}