/*remove browser default padding & margins*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container { 
width: 90%;
max-width: 720px;
min-height: 100vh;
background-color: rgb(168, 74, 128);
margin: auto;
}
img{ width: 100%;
    padding: 4px 
}
header {
    background-color: rgb(201, 133, 171);
    padding: 1cm;
    text-align: center;
    font-size: 5vw;
}

h1 {
    background-color: rgb(173, 92, 138);
    color: white;
    padding: 1cm;
        font-family: "Permanent Marker", cursive;
        font-weight: 800;
        font-style: bold;
        font-style: italic;
      }
      
h2 { 
    text-align: center;
    padding: 4px;
        font-family: "Permanent Marker", cursive;
        font-weight: 600;
        font-style: normal;
      }
    
h3 { padding: 15px;}
main {
    background-color: #fcd5ed;
    padding: 1cm ;
}

body{
    background-color: rgb(255, 255, 255);
    text-align: center;
   color: rgb(63, 29, 48);
    font-family: "Indie Flower", cursive;
    font-weight: 500;
    font-style: bold; 
  }
  


.colorswatch {
    width: 50%;
    border: 2px solid rgb(255, 255, 255);
    padding: 15px;
    margin:auto;
   
}
#urple{
    background-color: #ad5c8a;
}
#urple2{
    background-color:#a84a80;
}
#urple3{background-color:#c985ab;
}
#urple4{ background-color:rgb(252, 213, 237);}

#urple5{background-color: #3f1d30;
color: white;}
p {
    padding: 10px;
}

nav ul {
    list-style-type: none;
    background-color:#ad5c8a;
    display: flex;
    justify-content: center;
    border: solid 10px rgb(252, 213, 237);
    
}
nav a {
background-color: rgb(252, 213, 237);
display: block;
text-decoration: none;
border: 2px solid #311325;
margin: 10px;
padding: 7px;
font-size: large;
height: fit-content;
color: black; 
;
}
footer {
    max-width: 100%;
    height: 30px;
    background-color:#6b2b50;

}
.currentpage {
    background-color:#6b2b50;
}
   
nav a:hover {
background-color:#a84a80;
}