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

body {
    background-color:#ffdfee ;
    color: #000000s;
      font-family: "Supermercado One", sans-serif;
      padding: 2em;
}

h1, h2, p {
  margin-top: .5em;
  margin-bottom: .5em;
}

/*LINKS*/
a {
    color: #000000;
 text-decoration: none;   
}
   a:hover {
        text-decoration: underline;
    background-color: #ff008c;
    border-radius:5px;
}                       
img{
    border: .7em dotted #ff00ba;

}



nav {
  display: flex;
  height: 4em; /* adjust the height of your menu as needed */
    align-items: stretch; /* this is what makes the logo & menu items stretch to the full nav height */
  justify-content: center;
  background-color: #ff00ba; /* adjust the background color of your menu */
}

.nav-link {
  display: flex;
  align-items: center; /* centers text vertically within the nav */
  padding: 0 3em; /* Adjust the second number to add more spacing between the menu items */
  color: #FFFFFF;  /* adjust the color of links in the menu */
  text-decoration: none;
  font-size: 1.4em;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: #455d7a; /* adjust the background color of the hover effect */
  color:  #FFFFFF; /* adjust the link color of the hover effect */
}




.logo {
  display: flex;
  align-items: center;
      width: 4em;
}

.logo img {
  height: 4.5em;  /* match height of the logo to the nav height */
      border: none;
    transition: .5s;
}

.logo img:hover {
    border: 1px solid #ff00ba;
    border-radius:50%;
    
}


main {
  padding: 1em;
  padding-top: 2em;  /* shift the 'main' element down, away from the menu bar (adjust as needed for your design) */
  width: 90%; /* adjust the width of the main element on the page */
  margin: auto; /* center the main element - this only works if you set the width */
}