* {
    list-style-type: none;
    box-sizing: border-box;
    text-decoration: none;
}


body {
    font-family: 'Amiamie', Arial Rounded MT Bold;
    line-height: 1.3em;
    background-color: lightgray;
    overflow-x: hidden;
}

@font-face {
    font-family: 'Amiamie';
    src: url(fonts/Amiamie-RegularRound.woff);
}

a {
    color: black;
}

h1 {
    font-size: 40px;
}

a h1:hover {
    text-shadow: 10px 10px 10px #ff6cdd;
}

h2 {
    font-size: 30px;
    margin-top: 29vh; 
}

h3 a:hover {
    text-shadow: 10px 10px 10px rgb(255, 108, 221);
}

h3 {
    font-size: 25px;
    line-height: 1.3em;
    margin-bottom: -7vh;
}

p {
    font-size: 14px;
    line-height: 1.3em;

}
.ordi{
    display: none;
}

/*bouton typo/edition */
button {
    border: none;
    background: none;
    font-family: 'Amiamie', Arial Rounded MT Bold;
    cursor: pointer;
}

button p {
    font-size: 25px;
}

/*infos à gauche*/
.infos {
    position: fixed;
    width: 24%;
    margin-left: 10px;

}

.navbar {
    z-index: 1;
    position: fixed;
    margin-left: 24%;
}

.navbar p {
    padding-left: 19vw;
}

.navbar p:hover {
    text-shadow: 10px 10px 10px rgb(255, 108, 221);
}

/* projets à droite Edition */
.container-projets {
    width: 73%;
    float: right;

}

.projet {
    margin-bottom: 200px;
}



.galerie-images {
    height: 700px;
    padding: 20px 0 20px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;

}

.galerie-groovy {
    height: 710px;
    padding: 20px 0 20px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;

}

.galerie-typote {
    height: 700px;
    padding: 10px 0 10px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;

}

.galerie-mouchoir {
    height: 520px;
    padding: 10px 0 10px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;

}

.galerie-foulard {
    height: 880px;
    padding: 10px 0 10px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;
}

.galerie-anni {
    height: 500px;
    padding: 10px 0 10px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;
}

.galerie-collection {
    height: 680px;
    padding: 20px 0 20px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;
}

.galerie-elisabeth {
    height: 600px;
    padding: 10px 0 10px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;
}

.galerie-orga-moula{
    height: 500px;
    padding: 10px 0 10px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;
}

.galerie-greenfabric{
    height: 500px;
    padding: 10px 0 10px 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    scroll-snap-type: x mandatory;
}

img {
    height: 100%;
    margin: auto;
    object-fit: contain;
    padding-right: 60px;
    filter: drop-shadow(5px 5px 5px darkgrey);
    pointer-events:none;
}

.sousligne{
    text-decoration: underline;
    cursor: pointer;
}

.petit{
    width: 70%
}

.cartel{
    width: 100%;
    columns: 2;
    column-gap: 30px;
    padding-right: 30px;
}
.cartel-typo p{
    text-align: left;

}

.cartel-typo{
    columns: 2;
    column-gap: 30px;
    width: 100%;
    margin-bottom: 100px;
    padding-right: 30px;
}


/* typos à droite */
@font-face {
    font-family: "Boulette";
    src: url(./fonts/Boulette-Regular.woff2);
}

@font-face {
    font-family: "Woven";
    src: url(./fonts/Woven.ttf);
}

@font-face {
    font-family: "Groovy-regular";
    src: url(./fonts/Groovy-Regular.woff2);
}

@font-face {
    font-family: "Groovy-bold";
    src: url(./fonts/Groovy-Bold.woff2);
}

@font-face {
    font-family: "Filature";
    src: url(./fonts/Filature-Regular.otf);
}


.container-typo {
    width: 73%;
    float: right;
    margin-bottom: 200px;

}

.abc p{
    font-size: 180px;

    
}

.texte p{
    font-size: 90px;

}

.texte{
    margin-top: 70px;
    text-align: center;
}



sup{
    line-height: 1em;
}

hr {
    box-sizing: border-box;
    border: 0 none transparent;
    border-top: 1px solid #000000;
    width: 97%;
    margin-left: 0;
  }

.boulette {
    font-family: "Boulette";
    line-height: 1.1em;
    margin: 20px 0 20px 0;
    text-align: center;
}


.woven {
    font-family: "Woven";
    text-align: center;
    font-size: 180px;
    line-height: 1em;
    font-variation-settings: 'weav'900;
    animation: 1.2s infinite alternate linear anim-index;
    animation-timing-function: ease-in-out;
    margin: 20px 0 20px 0;
}

.woven-hover p{
    font-family: "Woven";
    line-height: 1.2em;
    font-variation-settings: 'weav'900;
    cursor: default;
    font-size: 16px;
    text-align: left;
    margin: 100px 130px 70px 130px;
}

.woven-hover p:hover{
    font-variation-settings: 'weav'0;
}

@keyframes anim-index {
    from {
        font-variation-settings: 'weav'900;
    }

    to {
        font-variation-settings: 'weav'1;
    }
}


.filature {
    font-family: "Filature";
    font-size: 140px;
    line-height: 1.3em;
    text-align: center;
    margin: 20px 0 20px 0;
}


.chaloupee {
    font-family: "Groovy-regular";
    font-size: 180px;
    line-height: 1em;
    text-align: center;
    margin: 20px 0 20px 0;

}

.chaloupee-bold {
    font-family: "Groovy-bold";
    font-size: 180px;
    line-height: 1em;
    text-align: center;
}

.dropdown-btn1 {
    font-family: "Boulette";
    font-size: 180px;
    line-height: 1em;
    text-align: center;

    width: 100%;
    height: 251px;

}

.dropdown-btn1:hover{
    text-shadow: 1px 1px 20px rgb(255, 108, 221);
}

.dropdown-btn2 {
    font-family: "Woven";
    font-size: 180px;
    line-height: 1em;
    text-align: center;
    font-variation-settings: 'weav'200;
    width: 100%;
    height: 251px;

}

.dropdown-btn2:hover{
    text-shadow: 1px 1px 20px rgb(255, 108, 221);
}

.dropdown-btn3 {
    font-family: "Filature";
    font-size: 140px;
    line-height: 1em;
    text-align: center;
    width: 100%;
    height: 251px;

}
.dropdown-btn3:hover{
    text-shadow: 1px 1px 20px rgb(255, 108, 221);
}

.dropdown-btn4 {
    font-family: "Groovy-Regular";
    font-size: 180px;
    line-height: 1em;
    text-align: center;
    width: 100%;
    height: 251px;

}

.dropdown-btn4:hover{
    text-shadow: 1px 1px 20px rgb(255, 108, 221);
}

.dropdown-content1 {
    display: none;
    position: absolute;
    z-index: 1;
    min-width: 160px;
    background-color: lightgray;
    padding: 40px 0 200px 0;

}

.dropdown-content2 {
    display: none;
    position: absolute;
    z-index: 1;
    min-width: 160px;
    background-color: lightgray;
    padding: 40px 0 200px 0;
}

.dropdown-content3 {
    display: none;
    position: absolute;
    z-index: 1;
    min-width: 160px;
    background-color: lightgray;
    padding: 40px 0 200px 0;
    width: 100%;
    
}

.dropdown-content4 {
    display: none;
    position: absolute;
    z-index: 1;
    min-width: 160px;
    background-color: lightgray;
    width: 100%;
    padding: 40px 0 200px 0;
    margin-top: 30px;
}


.dropdown1 {
    position: relative;

}

.dropdown2 {
    position: relative;

}

.dropdown3 {
    position: relative;

}

.dropdown4 {
    position: relative;

}

.show {
    display: block;
}



/* animation dropdown */
/* Define the animation */
@keyframes dropdownAnimation {
    from {
      opacity: 1;
      transform: translateY(-30px); /* Move the dropdown content up slightly */
    }
    to {
      opacity: 1;
      transform: translateY(-30px); /* Move the dropdown content to its original position */
    }
  }
  
  /* Apply the animation to the dropdown content */
  .dropdown-content1, .dropdown-content2, .dropdown-content3, .dropdown-content4 {
    animation: dropdownAnimation 0.5s ease forwards; /* Apply the animation */
    opacity: 0; /* Initially set opacity to 0 */
  }

/* images liens vers sites */
a .img-sites {
    width: 50%;
    border-radius: 10px;
    padding-right: 0;
    margin-top: 100px;
    cursor: pointer;
    pointer-events:all;
    
}

a .img-sites:hover {
    box-shadow: 1px 1px 20px rgb(255, 108, 221);
}
.img-sites{
    text-align: center;
}

/* footer secret door */
footer {
    width: 79%;
    float: right;
    margin-top: 200px;
}

.figure {
    pointer-events:all;
}

.figure .image-main {
    width: 20%;
    pointer-events:all;
    margin: 0;
    padding-right: 0;
}

.figure .image-hover {
    width: 20%;
    margin: 0;
    padding-right: 0;
    opacity: 0;
    transition: opacity;
    pointer-events:all;

}

.figure:hover .image-hover {
    opacity: 1;
}

.figure:hover .image-main {
    opacity: 0;
}

video{
    width: 44%;
    margin-top: 70px;
}

.plotter{
    width: 50%;
    margin-top: 70px;
}

/* page secret door */
.container-door img {
    width: 20%;
}

#mydiv {
    position: absolute;
    z-index: 9;
}

#mydivheader {
    cursor: move;
    z-index: 10;
}

/* scrollbar */
/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(255, 108, 221);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: blue;
}

/*responsive*/
@media screen and (max-width: 600px) {

}