body{
    
    height: 100vh;
    background-image: url("/Images/background.png");
    background-size: cover
}

/* grid container */
.containerMain {
  display: grid;
justify-content: center;
  align-items: center;
 width: 900px;
  grid-template-columns:  1fr 1fr 1fr;
  padding: 10px;
grid-template-rows: 30px 160px;
    
gap:1px;
    grid-template-areas:
"ItemNavigation ItemNavigation ItemNavigation"
"ComfortRoomIntroduction ComfortRoomIntroduction ComfortRoomIntroduction"
"containerComfortClick containerComfortClick containerComfortClick"
"containerComfortClick containerComfortClick containerComfortClick";

margin: 0 auto;
}
/* grid container */

/* list of items */
.ItemNavigation {
 
    grid-area: ItemNavigation;}

.ComfortRoomIntroduction {
 grid-area:ComfortRoomIntroduction;}

.containerComfortClick {
    grid-area: containerComfortClick;}

/* list of items */

.FlexcontainterNavigation {
display: flex;
align-items: center;
justify-content: center;
height: 25px;
gap: 30px;
background-color: hsl(298.6,89.6%,89.7%, 0.2);
}

a{
color: #ffb4d9;
text-decoration: none;
font-family: 'Trebuchet MS', sans-serif;
  line-height: 1.5;
  letter-spacing: 1px;
  font-style: italic;  
}

.Navigation:hover{
background-color: rgba(200, 255, 255, 0.1);
    color: white;
    text-shadow: 1px 1px 5px white;
    transition: background-color 0.5s, color 0.5s, text-shadow 0.5s;}


.ComfortRoomIntroduction{
background-color: hsl(298.6,89.6%,89.7%, 0.8);

padding-left: 2%;
color: hsl(265,73.3%,20.6%);
font-family: 'Trebuchet MS', sans-serif;
  line-height: 1.5;
  letter-spacing: 1px;
  font-style: italic;  
    font-size: 15px;}

.containerComfortClick{
display: flex;
width: 900px;
justify-content: center;
flex-wrap:wrap;
align-items: center;
row-gap: 10%;
gap: 5%;
}

.DivIcon{
margin: 5%
}

.ClickImage{
height: 110px;
width: 110pxpx;

}

.description{
background-color: hsl(298.6,89.6%,89.7%, 0.3);
text-align: center;
color: #ffedff}