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

:root {
  --text-fonts: 'Assistant', sans-serif; 

  --light-color: #f6f5eb;
  --dark-color: #1e1e1e;
  
  /* Text color */
  --text-color: #333;
  
  /* Navbar parameters */
  --logo-width: 300px;
  --navbar-text-color: #333; /* Can be set to var(--text-color) */
  --hover-color: #a7a7a7;
  --navbar-gap: 10px; /* note that there is a 10px padding between items already*/
  --navbar-color: #fff;
  --navbar-padding-top: 40px;
  --navbar-padding-bottom: 35px;
  --navbar-padding-left : 12px;
  --navbar-padding-right: 8px;
  --navbar-logo-menu-space: 10px;

  /* Index and Category */
  --figure-width : 240px;
  --aspect-ratio : 1/1;
  --image-per-row-percent: 33.33333%;         /*(1/number-images-per-row)%, 33% = 3 images, 25% = 4 images, etc.*/
  --gallery-figure-padding: 0 15px 15px 15px; /*top, right, bottom, left */
  --gallery-background-color: #000000;
  --image-zoom-hover: 1.01;                   /* 1.0 for no zoom, 1.05 looks nice*/
  --image-opacity-hover: 0.5;                 /* between 0 and 1, 0 = transparent, 1 = no change */
  --image-brightness-hover: 1;                /* between 0 and 1 to darken */
  --gallery-figcaption-align: left;           /* left, center, right */ 

  /* Oeuvre */
  --art-grid-template-columns: 45% 55%; /* left : image, right: text*/
  --art-padding-image-text: 20px;       /* space between image and text columns*/

  /* Images on art page */
  --image-art-per-row-percent: 25%;
  --image-art-aspect-ratio: 1/1;
  --image-art-row-gap: 20px; 
  --image-art-padding-top: 30px;

  /* Bio */ 
  --bio-grid-template-columns: 50% 50%;
  --bio-column-gap: 10px;

  /* Footer text color */
  --footer-padding-top: 5px;
  --footer-padding-bottom: 5px;
  --footer-text-color: rgb(124, 124, 124);
  --footer-background-color: #fff;
  --copyright-padding-right: 15px;
  --footer-img-padding-left: 10px;
}

body {
  font-family: var(--text-fonts);
  font-size: 16px;
  color: var(--text-color);
  line-height: 1.5;
  background: #000000;
  margin: 0;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: var(--navbar-text-color);
}

ul {
  list-style: none;
  list-style-type: none;
}








img {
  max-width: 100%;
}

figcaption {
  font-size: 14px;
  margin-top: 8px;
}

/* *************** */
/* Utility Calsses */
/* *************** */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding-right: 10px;
  padding-left: 10px;
}

.text-xxl {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 40px 0 40px;
}

.text-xl {
  font-size: 2.2rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 20px 0 20px;
}

.text-lg {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 0px 0 0px;
}

.text-md {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: normal;
  margin: 10px 0 10px;
}

.text-sm {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 5px 0 5px;
  text-align: justify;
}

/*no justify for dimensions and material*/
.text-sm-2 {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 10px 0 5px;
}

/* *************** */
/*      Navbar     */
/* *************** */
.navbar {
  background: var(--navbar-color);
  padding-top: var(--navbar-padding-top);
  padding-bottom: var(--navbar-padding-bottom);
}

/* Navbar 1 (logo and items on same line) */

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Navbar 2 (logo on top, centered, and items under logo)*/

/* .navbar .container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--navbar-logo-menu-space);
} */

.navbar .logo {
  display: flex;
  justify-content: center;
}

.navbar .logo img {
  padding-left: var(--navbar-padding-left);
  width: var(--logo-width);
  height: auto;
}

.navbar .main-menu {
  padding-right: var(--navbar-padding-right);
}

.navbar .main-menu ul {
  display: flex;
  gap: var(--navbar-gap);
  justify-content: center;
}

/* Padding left only and centering right so that the last item is flush with the container */
.navbar .main-menu ul li a {
  padding: 0 10px;
  display: block;
  transition: 0.5s;
}

/* Color change on hover */
.navbar ul li a:hover {
  color: var(--hover-color); /* Change the hover color to something better */
}

/* *************** */
/* Dropdown Button */
/* *************** */
.dropbtn {
  /*font-family: 'Lekton', sans-serif;*/
  display: flex;
  font-family: 'Assistant', sans-serif;
  color: var(--navbar-text-color);
  padding: 10px 10px;
  /*text-align: center;*/
  font-size: 16px;
 
  border: none;
  /*background-color: #fff;*/
  background-color: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
/* Change the width of dropdown to adjust if bigger than screen*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
/* Margins are for the spacing between elements in dropdown*/
.dropdown-content a {
  color: var(--text-color);
  text-decoration: none;
  text-align: left;
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 10px 0;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #fff;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: var(--hover-color); color: var(--light-color);}

/* **************** */
/*      footer      */
/* **************** */
/* Trick: */
body {
  position: relative;
}

  /* Set same as footer's height */
/* body::after {
  content: '';
  display: block;
  height: 50px;
} */

.footer .container {
  display: grid;
  top: 100vh;
  grid-template-columns: 50% 50%;
}

.footer {
  /* position: absolute; */
  width: 100%;
  height: 50px;
  background: var(--footer-background-color);
  padding-top: var(--footer-padding-top);
  padding-bottom: var(--footer-padding-bottom);
  align-content: center;
}

.footer p{
  color: var(--footer-text-color);
  text-align: right;
  align-content: center;
  font-size: 0.7rem;
  line-height: 1.4;
  font-weight: normal;
  padding-right: var(--copyright-padding-right);
}

/* .footer .container a img {
  display: grid;
  width: 40px;
  padding-left: var(--footer-img-padding-left);
} */

.footer .container a img {
  /* display: grid; */
  width: 40px;
  padding-left: var(--footer-img-padding-left);
}


/* **************** */
/* main body images */
/* **************** */
.gallery{
  background: var(--gallery-background-color);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ******************** */
/* Gallery on main page */
/* ******************** */
.gallery .container {
  display: flex;
  flex-flow: row wrap;
}

.gallery .container::after {
  content: " ";
  flex: auto;
}

.gallery .image {
  flex-basis: var(--image-per-row-percent);
  min-width: 0;
  text-align: center;
} 

.gallery .image:hover{
  animation: squiggly-anim 0.64s linear infinite;
}

/* align caption box under figure*/
.gallery figure{
  display: inline-block;
  padding: var(--gallery-figure-padding);
}

/* make sure that the max-width matches the width of the figure from .gallery figure img {} */
.gallery figure figcaption { 
  margin-top: 0px;
  max-width: var(--figure-width);
}

.gallery figure figcaption p {  
  text-align: var(--gallery-figcaption-align);
  word-wrap: break-word;
  text-align: center;
}

.gallery figure img {
  width: var(--figure-width);
  aspect-ratio: var(--aspect-ratio);
  object-fit:cover;
}

.gallery figure img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  /* filter: hue-rotate(360deg); */
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  opacity: var(--image-opacity-hover);
  transform: scale(var(--image-zoom-hover));
  filter:brightness(var(--image-brightness-hover));
}

/* ************** */
/*   oeuvre.php   */
/* ************** */

.container .grid-art  {
  display: grid;
  grid-template-columns: var(--art-grid-template-columns);
  padding: 10px;
  grid-template-areas:
  "image-0 description-oeuvre";
}

.gridart-item-0 {
  grid-area: image-0;
  width: 100%;
  height: auto;
  object-fit:cover;
  margin-top: 0;
  justify-self: center;
}

.gridart-item-text {
  grid-area: description-oeuvre;
  justify-items: left;
  padding-left: var(--art-padding-image-text);
}

.flexbox-art {
  display: flex;
  row-gap: var(--image-art-row-gap);
  flex-flow: row wrap;
  justify-content: space-between;
  text-align: center;
  padding-top: var(--image-art-padding-top);
}

/* format last line */
.flexbox-art::after {
  content: "";
  flex: auto;
}

.flexbox-art .image-art {
  flex-basis: var(--image-art-per-row-percent);
  min-width: 0
}

.flexbox-art .image-art img {
  width: 95%;
  aspect-ratio: var(--image-art-aspect-ratio);
  object-fit: cover;
}

.flexbox-art figure img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  opacity: 0.4;
}

/* *********** */
/*   bio.php   */
/* *********** */
.bio .container {
  display: grid;
  grid-template-columns: var(--bio-grid-template-columns);
  grid-template-rows: auto;
  grid-row-gap: 0;
  grid-column-gap: var(--bio-column-gap);
  grid-template-areas: 
    "image bio"
    "image pratique"
    "image cv";
}

.item-a {
  grid-area: image;
  filter: grayscale(100%);
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  align-content: top;
  z-index: -100;
}

.item-b {
  grid-area: bio;
  padding-right: 20px;
}

.item-c {
  grid-area: pratique;
  padding-right: 20px;
}

.item-d {
  grid-area: cv;
  padding-right: 20px;
}

.bio h1 {
  margin-bottom: 0px;
  margin-top: 0px;
}

/* petite roche aléatoire */
#logo1 {
  height: 75px;
  position: absolute;
}

#logo2 {
  height: 75px;
  position: absolute;
}

#logo_test {
  position: absolute;
}

/* ************** */
/*  contact form  */
/* ************** */
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  font-family: var(--text-fonts);
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: var(--hover-color);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: var(--dark-color);
}

/* Add a background color and some padding around the form */
.contact-form .container-contact {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.container-contact {
  max-width: 1000px;
  margin: 0 auto;
  padding-right: 10px;
  padding-left: 10px;
}

/* **************** */
/* hamburger button */
/* **************** */
.hamburger-button{
  display:none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
}

.hamburger-button .hamburger-line{
  width: 30px;
  height: 2px;
  background: var(--text-color);
  margin: 6px 0;
  z-index: 1000;
}

.hamburger-button .hamburger-image{
  width: 30px;
  height: 30px;
  background: none;
  /* margin: 6px 0; */
  z-index: 1000;
}


.mobile-menu{
  position: fixed;
  top: 0;
  right: -300px;
  width: 175px;
  height: 100%;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease-in-out;
}

.mobile-menu.active {
  right: 0px;
}

.mobile-menu ul {
  margin-top: 100px;
  padding-right: 10px;
  padding-left: 20px;
}
.mobile-menu ul li {
  margin: 10px 0;
}

.mobile-menu ul li a {
  font-size: 15px;
  transition: 0.3s;
}

/* ************* */
/* Media queries */
/* ************* */
@media screen and (max-width:800px) {
  .gallery .image {
    flex-basis: 50%;
    min-width: 0;
    text-align: center;
  } 
  
  .navbar .logo {
    width: 250px;
  }
  
  body {
    font-size: 12px; 
  }
  
  .dropbtn {
    font-size: 12px;    
  }
  
}

@media screen and (max-width:670px) {
  .navbar .logo {
    width: 250px;
  }

  .navbar .main-menu{
    display: none;
  }

  .hamburger-button{
    display: block;
  }

  .gallery .image {
    flex-basis: 100%;
  } 

  .bio .container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: 
    "image"
    "image"
    "image"
    "bio"
    "pratique"
    "cv";
    padding-left: 20px;
    padding-right: 20px;
  }

  .container .grid-art  {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
    "image-0"
    "description-oeuvre";
  }

  .gridart-item-text {
    padding-left: 0px;
  }

	.flexbox-art .image-art {
    width: 33.3333333%;
    padding: 5px;
    min-width: 0
  }

}

@media screen and (max-width:500px) {
	.flexbox-art .image-art {
    width: 50%;
    padding: 5px;
    min-width: 0
  }
}

.squiggly-class {
  animation: squiggly-anim 0.64s linear infinite;
}

/* FOR SQUIGGLY TEXT */
@keyframes squiggly-anim {
  0% {
    filter: url("#squiggly-0");
  }
  10% {
    filter: url("#squiggly-1");
  }
  20% {
    filter: url("#squiggly-2");
  }
  30% {
    filter: url("#squiggly-3");
  }
  40% {
    filter: url("#squiggly-4");
  }
  50% {
    filter: url("#squiggly-5");
  }
  60% {
    filter: url("#squiggly-6");
  }
  70% {
    filter: url("#squiggly-7");
  }
  80% {
    filter: url("#squiggly-8");
  }
  90% {
    filter: url("#squiggly-9");
  }
  100% {
    filter: url("#squiggly-10");
  }
}

/* landing page */

.center-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;

}

.center-img > div {
  width: 500px;
  display: flex;
  align-items: center;
  z-index: 10;  
}

.center-img > div > img {
  width: 100%;
}

.center-img > figcaption{
  margin-bottom: 20px;
}

.center-img figcaption p {  
  text-align: center;
  word-wrap: break-word;
  font-size: 40px;
  color: #000;
}

.center-img img:hover{
  animation: squiggly-anim 0.64s linear infinite;
}

.mascarade-menu {
  position: absolute;
  height: 100vh;
  top: 80%;
  right: 30px;
}

.mascarade-menu .container {
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.mascarade-menu p {
  color: #000000;
  text-align: right;
  font-size: 20px;
}

.mascarade-menu p:hover{
  animation: squiggly-anim 0.64s linear infinite;
}

/* paper background */
.container-paper{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}

svg {
  width: 100%;
  height: 100%;
}

.squiggly-svg svg {
  display: block;
  font-size: 0;
  width: 0;
  height: 0;
}


.main-container {
  max-width: 1100px;
  margin: 0 auto;
  padding-right: 10px;
  padding-left: 10px;
  display: grid;
  grid-template-columns: 33.333333% 33.333333% 33.333333%;
  grid-template-areas: 
  "left-img center-img right-img";
}

.left-img {
  grid-area: left-img;
  width: 100%;
  height: auto;
  object-fit:cover;
  margin-top: 0;
  justify-self: center;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.center-img {
  grid-area: center-img;
  width: 100%;
  height: auto;
  object-fit:cover;
  margin-top: 0;
  justify-self: center;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.right-img {
  grid-area: right-img;
  width: 100%;
  height: auto;
  object-fit:cover;
  margin-top: 0;

}



.left-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;

}

.left-img > div {
  width: 200px;
  display: flex;
  align-items: center;
  z-index: 10;  
}

.left-img > div > img {
  width: 100%;
}

.left-img > figcaption{
  margin-bottom: 20px;
}

.left-img figcaption p {  
  text-align: center;
  word-wrap: break-word;
  font-size: 40px;
  color: #000;
}

.left-img img:hover{
  animation: squiggly-anim 0.64s linear infinite;
}


.right-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;

}

.right-img > div {
  width: 200px;
  display: flex;
  align-items: center;
  z-index: 10;  
}

.right-img > div > img {
  width: 100%;
}

.right-img > figcaption{
  margin-bottom: 20px;
}

.right-img figcaption p {  
  text-align: center;
  word-wrap: break-word;
  font-size: 40px;
  color: #000;
}

.right-img img:hover{
  animation: squiggly-anim 0.64s linear infinite;
}