* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}


Body{
    
font-family: "lato",sans-serif;

}

.container {
    width: 90%;
    max-width: 720px;
    min-height: 100vh;
    background-color:rgb(255,226,168);
    margin:auto;
}

header {
    background-color: rgb(255,226,168);    
    padding:50px;
    padding-bottom: 20px;
}  

h1 {
    text-align:center;
    font-size: 50px;
    font-family: "Quicksand",sans-serif;
    color: rgb(255,162,84);
    font-weight:750;
}
/* Navigation styling starts here */
 nav 
 ul{
list-style-type:none;
display: flex;
align-content:  center;
justify-content: center;
margin: 40px;
} 

nav ul a {
text-decoration: none;
color: black;
margin: auto;
text-align: center;
border: 1px solid rgb(255,162,84);
padding: 20px;
width: 100px;
background-color: lemonchiffon;
margin: 10px;
}
  
nav a:hover{
color: rgb(243, 198, 130);

}
/* Navagation styling ends here */

main {
    background-color: rgb(254,240,169);
    width:100%;
    padding: 8px;
}

p {
    margin-bottom: 16px;
}

.colourSwatch {
width: 50%;
padding:10px;
margin:auto ;
text-align: center;
}

.colourSwatch {
 border: 5px solid black;
}

#color1{
    background-color: rgb(255,162,84);
}

#color2{
background-color: rgb(255,226,168);
}

#color3{
    background-color: rgb(254,240,169);
}

img {
    width:100%;
}