/* MOBILE FIRST */
@font-face
{
   font-family: Chaumont Script;
   src : url('font/ChaumontScript-Regular.otf') format("opentype"),  url('font/ChaumontScript-Regular.woff') format("woff"),  url('font/ChaumontScript-Regular.woff2') format("woff2");
}

@media all and (min-width: 550px)
{
   /* Vos règles CSS pour les écrans plus grand que 550px ici */
   .global
   {
      max-width : 550px;
   }
}

/* reset général de margesbody, h1, h2, h3, h4, h5, ul
{
   margin: 0;
   padding: 0;
}

*/

a:hover
{
   border-bottom-color: #666;
   color: black;
}
.intro{
  font-weight: 400;
  text-justify: inter-character;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;

}
#portfolio
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  padding-left: 0 !important;
  }

.scroll{
  font-family: 'chaumont script';
  background-color: blue;
  transition-duration: 0.4s;
  color: white;
  border-radius: 100%;
  opacity: 800%;
  border: 8px solid blue;
  margin-left: 165px;
}

#button:hover {
  background-color: blue;
  opacity: 100%;
}

li{
   list-style:none;
}
.arrowgauche
{
   margin-left: 15px;
   object-fit: cover;
   width: 10px;
   height: 10px;
}

.arrowdroite
{
   object-fit: cover;
   width: 10px;
   height: 10px;
}

.precedent
{
   text-decoration: none;
   text-align: left;
   color: black;
}

.suivant
{
   text-decoration: none;
   text-align: right;
   color: black;
   padding-left: 175px;
}

.spaceb4footer
{
   margin-bottom: 30px;
}

.gif
{

   object-fit: contain;
   margin-left: 60px;
   width: 200px;
   height: 200px;
   padding: 15px;
} 


.titre
{
   margin-bottom: 25px;
   position: sticky;
   top: 0;
   height: 90px;
   background-color: #edebeb;
   z-index: 99999;  
   box-shadow: 0 4px 8px -4px #DEDBDA;
}

/*.shadow--bottom {
  bottom: 0;
  background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent);
}*/

input
{
   font-family: 'Chaumont script';
   width: 91%;
   margin-left: 15px;
   font-size: 14px;
   box-sizing: border-box;
   margin-bottom: 40px;
   border: 1px solid blue;
}

nav
{
   padding-top: 20px;
   font-size: 13px;
   font-weight: 400;
   font-family: 'Hanken Grotesk', sans-serif;
   text-transform: uppercase ;
   text-decoration: none;
}

.img
{
   padding: 15px;
   width: 91%;

}

.gallery
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   padding: 15px;
   width: 150px;
}

.precedentsuivant
{
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 13px;
   font-weight: 400;
   font-family: 'Hanken Grotesk', sans-serif;
   text-transform: uppercase ;
   text-decoration: none;
}

.auteur_utulisatrice{
   display: inline-block;
   color: red;
   font-size: 10px;
   padding-left: 15px;
   padding-right: 15px;
   font-weight: 400;
}

h1
{
   color: blue;
   padding-left: 15px;
   padding-right: 15px;
   font-family: 'chaumont script';
   font-size: 52px;
   width: auto;
   /* border: 3px solid black;
   border-radius: 30px;
   margin: 60px;
   */
}

body
{
   background-color: #edebeb;
   font-family: 'Hanken Grotesk', sans-serif;
   font-weight: 200;
   line-height: 1.7;
   font-size: 12px;
   margin: 0;
}

/*.précédent
{
   border: 2px solid black;
   border-radius: 20px;
   width: auto;
}

.suivant
{
   border: 2px solid black;
   border-radius: 20px;
   width: auto;
}

*/
hr
{
   border-top: 1px solid #8c8b8b;
}

footer
{
   height: 250px;
   background-color: #dbd9d9;
   width: auto;
}

.global
{
   max-width : 550px;
}

.suivant
{
   margin-left: 0;
}

/*h2
{
   text-transform: uppercase ;
   font-family: 'Montserrat';
   font-family: 'chaumont script';
}

*/
h3
{
   margin-top: 60px;
   font-family: 'Montserrat';
   font-weight: bold;
}

img
{
   align-items: center;
   width: 100%;
   object-fit : cover

}

blockquote
{
   color: red;
   font-size: 40px;
   text-align: center;
   font-family: Chaumont Script;
   padding-bottom: 30px;
}

h2
{
   font-family: Chaumont Script;
   color: blue;
   font-size: 20px;
   padding-left: 15px;
   text-transform: uppercase ;
}

h4
{
   color: blue;
   font-size: 10px;
   padding-left: 15px;
   padding-right: 15px;
}

h3
{
   color: black;
   font-family: Chaumont Script;
   font-size: 20px;
   padding-left: 15px;
}

p
{
   margin-top: 30PX;
   margin-bottom: 65px;
   font-size: 14px;
   line-height: 22px;
   text-align: left;
   padding-left: 15px;
   padding-right: 15px;
}

.marginbottomtop{
   margin-top:30px;
}

.merci{
   font-family: 'chaumont script';
   color: red;
   text-align: center;
   font-size: 20px;
}
.copyright
{
   margin-bottom: 0;
   text-align: center;
   font-weight: 400;
   font-size: 10px;
}

}