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

body{
    background: "Kaushan Script", cursive;
    font-synthesis-weight: 400;
}

.container {
    width: 90%;
    max-width: 720px;
    min-height: 100vh;
     background-color: #698ba6;
    margin: auto;
    padding-left: 0.5%;
    padding-right: 0.5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
}

header {
    background-color: hsl(105, 139, 166);
    color: #698ba6;
}

h1 {
    color: #424e5a;
    font-size: 60px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
}

/*navigation styling starts here*/
nav ul{
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #698ba6;
    height: 25px;
    margin: 10px;
}

nav ul li a{ 
display: block;
text-decoration: none;
color: black;
text-align: center;
border: 1px solid black;
padding: 10px;
background-color: #7d909e;
margin: 10px;
}
/*navigation styling ends here*/

nav a:hover{
    background-color:#424e5a;
}

.currentpage{
    background-color: #7d909e;
}

main {
    background-color: #7d909e;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 15px;
}


h2{
    padding: 45px;
    font-size: 30px;
    color: #424e5a; 
}


p{
    padding: 5px;
    font-size: 20px;
    color: black;
}


img{
    width: 100%;
}

.colourSwatch{
border: 1px solid black;
text-align: center;
padding:10px;
margin:1em auto;

}

#mainColor{
    background-color: rgb(105, 139, 166);
}

#secondColor{
    background-color: rgb(125, 144, 158)
}

#thirdColor{
    background-color: rgb(66, 78, 90);
}

footer{
  height: auto;  
  width: auto;
    background-color: rgb(125, 144, 158);
}