.hero-image{ 
height:300px; 
background-image:url("images/heroimage-34ed022f-5765-447d-bd4a-19f058aa7018.jpg"); 
background-size:cover; 
background-position:center; 
display:flex; 
justify-content:center; 
align-items:center; 
border:2px solid rgb(240, 118, 118); 
color:white; 
font-size: 30px;
color: rgb(255, 255, 255);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
text-shadow: 10px 8px 4px rgba(0,0,0,1);
}
.h1 {
    font-size: 60px;
}

.main-layout{ 
border:2px solid black; 
display:flex; 
flex-direction:column; 
gap:20px; 
background-color: beige;
padding: 20px;
} 

.navigation-add{ 
justify-content: center;
align-items: center;
 width:100%; 
 order:1;
} 


.navigation-view{ 
justify-content: center;
align-items: center;
 width:100%; 
order:2;
} 
.navigation-add a{ 
background-color:#f77a7a; 
background-size:cover; 
background-position:center; 
display:flex; 
justify-content:center; 
align-items:center; 
border:2px solid rgb(240, 118, 118); 
color:white; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color:white; 
text-decoration:none; 
padding:8px; 
border-radius:8px; 
text-align:center; 
width:50%; 
} 

.navigation-add a:hover{ 
 background-color:#ff8a8a; 
} 

.navigation-add nav, 
.navigation-view nav{
 display:flex; 
flex-direction:stacked; 
gap:10px; 

} 

.content{ 
color: black;
justify-content: center;
align-items: center;
 width:100%; 
order:3;
background-color: #f77a7a;
border-radius:5px; 


} 

input, 
select, 
textarea{ 
padding:10px; 
width:80%; 
border:1px solid gray; 
border-radius:6px; 
} 

input[type="submit"]{ 
background-color: #faaaaa; 
color:white; 
padding:12px; 
border:none; 
border-radius:8px; 
cursor:pointer; 
} 

input[type="submit"]:hover{ 
background-color:#ffc7c7; 
color:black; 
} 

table{ 
width:100%; 
border-collapse:collapse; 
background-color:white; 
} 

th{ 
background-color: #faaaaa; 
color:white; 
} 

th, 
td{ 
border:1px solid ; 
padding:10px; 
text-align:left; 
} 

.navigation-view a{ 
background-color:#f77a7a; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
color:white; 
text-decoration:none; 
padding:8px; 
border-radius:8px; 
text-align:center; 
width:50%; 

} 

.navigation-view a:hover{ 
 background-color:#ffc7c7; 
} 

.navigation-view nav, 
.navigation-view nav{ display:flex; 
flex-direction:stacked; 
gap:10px; 
} 

@media (max-width:900px){ 
}

.home {
font-size: 70px;
background-image:url("images/home.jpg"); 
background-size:cover; 
background-position:center; 
display:flex; 
justify-content:center; 
align-items:center; 
border:2px solid rgb(240, 118, 118); 
color:black;
}

.section{
background-color: #f39898;
border-radius:20px; 
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 10px;
padding: 2px;
}

* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left {
  width:33.33%;
background-image:url("images/hair.jpg"); 
background-size:cover;

text-align:center; 
}
  .right{
 width:33.33%;
background-image:url("images/spa.jpg"); 
background-size:cover;

text-align:center; 

  }
.middle {
  width: 33.33%;
   width:33.33%;
background-image:url("images/nails.jpg"); 
background-size:cover;

text-align:center; 
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}