/* reset css */
* {
  margin: 0px;
  padding: 0px;
}
html {
scroll-behavior: smooth;
}
/* organisation générale de la page */
body {
  color: #222;
  background-color: #ffffe6;
  display: flex;
  flex-direction: column;
}

main {
  padding: 10%;
}

a {
  color: inherit;
  text-decoration: none;
}

img, p {
  margin: 1em;
}

/* organisation du bandeau du haut */
nav {
  background-color: cornflowerblue;
  color: white;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 1em;

  text-transform: uppercase;

  position: sticky;
  top: 0;
}

#logo {
  flex-grow: 1;
}

.nav_link:hover {
  text-shadow: 2px 2px 5px black;
  transition: text-shadow 0.5s;
}


/* organisation des bandeaux du bas */
footer {
  color: white;
  text-align: center;
}

.footer_top {
  background-color: lightskyblue;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.footer_bottom {
  background-color: cornflowerblue;
}

.footer_top, .footer_bottom {
  padding: 2em;
  padding-left: 25%;
  padding-right: 25%;
}

.contact {
  width: 50%;
  font-weight: bold;
  text-transform: uppercase;
  word-wrap: break-word;
  padding: 10px;
  border: 2px solid white;
  border-radius: 2px;
}

.contact:hover {
  box-shadow: 0px 0px 5px 3px;
}

/*
icônes Facebook et Twitter par PixelPerfect
icône Instagram par FreePik
*/

.icon {
  height: 1em;
}

.icon:hover {
  filter: drop-shadow(0px 0px 3px white);
}