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

body {
    background-color:rgb(239, 239, 241);
}

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


header {
    background-color:rgb(185, 197, 209);
    padding-top: 15px;

}


h1 {
    color:rgb(63, 63, 97);
    font-size: clamp(30px, 3vw, 40px);
    text-align: center;
    padding: 5px;
    font-family: "Libre Baskerville", serif;
    
}

/* Navigation styling starts here */
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
background-color: rgb(239, 239, 241);


}

nav a {
display: block;
text-decoration: none;
color:rgb(208, 208, 208);
text-align: center;
border: 1px solid rgba(229, 223, 223, 0.927);
width: 120px;
padding: 4px;
margin: 3px;
background-color:rgba(63, 63, 97, 0.797);
font-family: "Libre Baskerville", serif;


}

nav a:hover {
color: white;

}

.currentpage {
color:rgb(255, 255, 255);

}
/* Navigation styling ends here */


main {
    background-color: rgb(211, 219, 235);
    padding: 15px;

}

h2 {
    color: rgb(1, 57, 109);
    padding: 7px;
    font-size: clamp(17.5px, 1.5vw, 40px);
    font-family: "Libre Baskerville", serif;

    

}

p {
    font-size: clamp(15.5px, 1vw, 20px);
    font-family: "Times New Roman", serif;
    padding: 5px;
    font-weight: 300;



}

img {
    width:100% ;
    padding: 15px;
   
}

h3 {
    font-size: clamp(14.5px, 1vw, 18px);
    font-family: "Libre Baskerville", serif;
    color: rgb(0,0,0);
    padding: 10px;
}

.colourswatch {
    border: 1px solid rgba(229, 223, 223, 0.797);
    text-align: center;
    padding: 4px;
    width: 40%;
    height: 30%;
    margin: auto;
}

#colour1 {
    background: rgb(63, 63, 97);
    color: white;
    

}

#colour2 {
    background: rgb(1, 57, 109);
    color: white;

}

#colour3 {
    background: rgb(185, 197, 209);
    
}

#colour4 {
    background: rgb(211, 219, 235);
    border: 1px solid rgba(63, 63, 97, 0.797);
}

.Font {
    color:rgb(44, 44, 44);
}

#LibreBaskerville {
    font-family: "Libre Baskerville", serif;
    font-size: clamp(14.5px, 1vw, 18px);
    text-align: center;
}

#TimesNewRoman {
    font-family: "Times New Roman", serif;
    font-size: clamp(16px, 1.5vw, 21px);
    text-align: center;
    
}