/*CSS reset */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.3;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
    padding: 50px;

}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* Fonts */

.roboto-annie {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.padyakke-expanded-one-regular {
  font-family: "Padyakke Expanded One", serif;
  font-weight: 400;
  font-style: normal;
}


h2, h3, h4, p, li {
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.03em;
}

p {
  font-weight: 300;
  font-size: 1.2em;
}

li {
  font-weight: 300;
  font-size: 1.2em;
}

h1 {
  font-family: "Padyakke Expanded One";  
  font-size: 4em;
  font-weight: 100;
  line-height: 0.65em;
  padding-bottom: 0.5em;
}

h3 {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 900;
  color: #9C7394;
}

h4 {
  font-weight: 300;
  font-style: italic;    
}

h5 {
  display: inline-block;
  margin-top: 0.2em;
  font-size: 1em;
  font-weight: 300;
  font-family: "Roboto";
}



/* Couleurs */
body {
  background-color: #E8E3E0;
}

a:link {
  color: #EA3E7E;    
}

a:hover {
  color: #aa0476;    
}

a:visited {
  color: #A75C2E;
}

/* Naviguation */
#naviguation {
    font-family: "Roboto";
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 50px 50px 0px;
}

#naviguation li {
  display: inline;
  padding-left: 30px;
  font-weight: 600;
  font-size: 1em;
}

#naviguation a:link {
  color: black;
  text-decoration: none;
}

#naviguation a:hover {
  color: #EA3E7E;
  text-decoration: none;
}

#naviguation a:visited {
  color: black;
  text-decoration: none;
}

#logo {
  padding-left: 20px;
  margin-top: -30px;
}
/* Header */
#header {
    text-align: center;
    padding: 80px 45px;
}

#header h2 {
  font-weight: 200;
  font-size: 2em;
  padding-bottom: 30px;
}

#header input {
  background-color: #9C7394;
  border: none;
  color: #E8E3E0;
  font-family: "Roboto";
  padding: 8px 11px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
}

#header input:hover {
  background-color: #EA3E7E;
}


/* Portfolio */

#portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0px 25px;
}

#portfolio img {
    max-height: 540px;
}

#border-line {
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 1px #acacac;

}

.piece h3{
  border-top: solid 1px #acacac;
  margin-top: 1em;
  padding-bottom: 0.7em;
}

.piece h5 span {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 900;
    color: #9C7394;
}

.piece {
    padding: 20px 10px;
}

#pantoute-img {
  background-image: url('images/sac-pantoute.png');
  background-size: 100% auto;
  width: 420px;
  height: 540px;
  
}

#pantoute-img:hover {
  background-image: url('images/sac-pantoute-hover.png');
}

#canettes-img {
  background-image: url('images/canettes.png');
  background-size: 100% auto;
  width: 800px;
  height: 540px;
  
}

#canettes-img:hover {
  background-image: url('images/canettes-hover.gif');
}

#rook-img {
  background-image: url('images/rook.png');
  background-size: 100% auto;
  width: 420px;
  height: 540px;
  
}

#milad-img {
  background-image: url('images/milad.png');
  background-size: 100% auto;
  width: 420px;
  height: 540px;
  
}

#feu-img {
  background-image: url('images/feu.png');
  background-size: 100% auto;
  width: 420px;
  height: 540px;
  
}


/* Services */

#services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 50px 45px;
}

#services img {
  max-height: 400px;
}

#services-text {
  max-width: 400px;
}

#services-text ul {
  margin-left: -38px;
}

#services-text li {
  border-bottom: solid 1px #acacac;
  padding-bottom: 8px;
  margin-bottom: 1em;
  list-style: none;
}

/* Bibliographie */

#biblio {
  background-color: #E8928C;
  padding: 50px 45px;
  color: #E8E3E0;
  position: relative;
}

#biblio li {
  list-style: none;
  margin-left: -38px;
  border-bottom: solid 1px #E8E3E0;
  padding-bottom: 8px;
  margin-bottom: 1em;
}

#biblio span {
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  padding-left: 0.3em;
}


/* Footer */

#footer {
    text-align: right;
    background-color: #FFEC8E;
    padding: 50px 50px;
    position: relative;
}

/* REUNIR LES DEUX EVENTUELLEMENT */

 #footer:before {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  transform: scaleY(-1);
  top: -10px;
  left: 0;
  right: 0;
  background: linear-gradient( 45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%);
  background-size: 28px 60px;
  background-position: 30px 12px;
}


#footer:after {
  content: "";
  position: absolute;
  display: block;
  height: 10px;
  bottom: -10px;
  left: 0;
  right: 0;
  background: linear-gradient( 45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #FFEC8E 33.333%, #FFEC8E 66.667%, transparent 66.667%);
  background-size: 28px 60px;
  background-position: 30px 12px;
}

/* A propos */

#presentation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 50px 45px;
}

#presentation-texte {
  max-width: 600px;
}

#presentation-texte li {
  list-style: none;
  margin-left: -38px;
  border-bottom: solid 1px #E8E3E0;
  padding-bottom: 8px;
  margin-bottom: 1em;
}

/* Blog */

#blog {
  padding: 50px 100px;
}

.post {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.blog-img {
  padding: 35px ;
}

.blog-text {
  max-width: 650px;
}

.b-date {
  padding-bottom: 16px;
}


/* Copyright */

#copyright {
  padding: 30px 30px;
  text-align: center;
}

#copyright p {
  font-size: 0.8em;
}

/* Inscription infolettre */

#inscription {
  display: block;
  text-align: center;
  font-family: "Roboto";
}

#inscription input[type="submit"] {
  background-color: #9C7394;
  border: none;
  color: #E8E3E0;
  font-family: "Roboto";
  padding: 8px 11px;
}

#inscription input[type="submit"]:hover {
  background-color: #EA3E7E;
}


/* Motion */

body {
    animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}


/* Fade in */

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* Responsive */

@media (max-width: 600px) {
      /* Styles applied when viewport width is 600px or less */
      body {
            padding: 10px;
      }

      h1 {
        font-size: 2.2em;
      }

      .piece {
          padding: 15px 5px;
      }

      #pantoute-img {
        background-size: 100% auto;
        width: 350px;
        height: 425px; 
      }

      #canettes-img {
        background-size: 100% auto;
        width: 350px;
        height: 225px;
        
      }

      #presentation {
        padding: 0px;
      }

      #presentation-texte {
        padding: 45px 25px 25px 25px;

      }

      #blog {
        padding: 25px 25px;
      }
    }