@font-face {

    font-family: "spiro";
    src: url(./font/AX28ScriptSpiro.otf);
}

@font-face {

    font-family: "rascal";
    src: url(./font/RASCAL__.TTF);
}

@font-face {

    font-family: "meta-old-french";
    src: url(./font/meta-old-french.ttf);
}

@font-face {

    font-family: "laclede";
    src: url(./font/Laclede_CAT.ttf);
}


@font-face {

    font-family: "quando";
    src: url(./font/Quando-Regular.ttf);
}

@font-face {

    font-family: "sono-medium";
    src: url(./font/SonoSans-Medium.otf);
}

@font-face {

    font-family: "sono-regular";
    src: url(./font/SonoSans-Regular.otf);
}

@font-face {

    font-family: "sono-bold";
    src: url(./font/SonoSans-SemiBold.otf);
}

@font-face {

    font-family: "director";
    src: url(./font/Director-Variable.ttf);
}


@font-face {

    font-family: "duperresans";
    src: url(./font/duperresans-courrier.otf);
}


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


body {
    height: 100vh;
    min-width: 100vw;
    overflow-y: hidden;
    overflow-x: auto;

    background:
        /* On "top" */
        repeating-linear-gradient(90deg,
            transparent,
            transparent 10px,
            hsl(163, 100%, 79%) 10px,
            #f6ff55 20px),
        /* on "bottom" */
        linear-gradient(to bottom,
            #ff56a2,
            hsl(163, 100%, 79%));

   /* background-size: 100vw;*/
}

main{
    width: max-content;
    height: 100%;
    position: relative;
    /**/
    display: flex;
    align-items: center;
    gap: 10vw;
    flex-wrap: nowrap;
    flex-direction: row;

    padding: 0 100px;
}

section {

    display: inline-block;
}

.histoire {
    justify-self: center;
    align-self: center;

    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: content;
}

.histoire#louvelo {
    width: 610px;
    height: 650px;
    
}

.histoire#adrea {
    width: 580px;
    height: 550px;
  
}

.histoire#titelilou {
    width: 540px;
    height: 500px;

}

.histoire#leila {
    width: 520px;
    height: 500px;

}
.histoire#oneday {
    width: 560px;
    height: 500px;

}

.histoire#mursienne {
    width: 500px;
    height: 500px;
   
}

.histoire#chamauteure {
    width: 570px;
    height: 500px;
   
}

.histoire#ailesdange {
    width: 560px;
    height: 500px;

}

.histoire#myona {
    width: 520px;
    height: 500px;

}

.histoire#lapinblanc {
    width: 520px;
    height: 500px;

}
.histoire#enfantsdesmers {
    width: 520px;
    height: 500px;

}

.histoire#petitspoints {
    width: 530px;
    height: 600px;

}

.histoire#inimaginable {
    width: 520px;
    height: 500px;

}

.histoire#lisadoremi {
    width: 520px;
    height: 500px;

}

.histoire#laneige {
    width: 510px;
    height: 500px;

}

#about-wrapper {
    width: 590px;
    height: 500px;

}


.histoire_wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.about-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.boite {
    border-style: solid;
    border-color: rgba(23, 3, 26, 0.802);
    width: 500px;
    height: fit-content;
    /*transform: skew(-3deg);*/
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    user-select: none;
    cursor: pointer;

    position: absolute;

    transition: all 4s ease;
}
.boite:nth-child(1){
    top: 0;
    right: 0;
    z-index: 50;
}
.boite:nth-child(2){
    top: 10px;
    right: 10px;
     z-index: 49;
}
.boite:nth-child(3){
    top: 20px;
    right: 20px;
     z-index: 48;
}
.boite:nth-child(4){
    top: 30px;
    right: 30px;
     z-index: 47;
}

.boite:nth-child(5){
    top: 40px;
    right: 40px;
     z-index: 46;
}

.boite:nth-child(6){
    top: 50px;
    right: 50px;
     z-index: 45;
}
.boite:nth-child(7){
    top: 60px;
    right: 60px;
     z-index: 44;
}

.boite:nth-child(8){
    top: 70px;
    right: 70px;
     z-index: 43;
}

.boite:nth-child(9){
    top: 80px;
    right: 80px;
     z-index: 42;
}

.boite:nth-child(10){
    top: 90px;
    right: 90px;
     z-index: 41;
}

.boite:nth-child(11){
    top: 100px;
    right: 100px;
     z-index: 40;
}






footer{
   
}

figure {

    width: 100%;

}


img {

    width: 70px;
   margin-top: -10px;
   float:left; 
   margin-right: 3pt; 
}



/*div:hover {

    background-color: rgb(255, 255, 130);
}*/


.didascalie {

    border-style: dotted;
    width: 85%;
    padding: 5pt;

    font-family: duperresans;
    font-size: 9pt;
    line-height: 10pt;
    margin: 10pt;
    margin-top: -4pt;
    z-index: 3;
}

/*.avatar {

    width : 60px; 
    margin-right: 10px;
}*/



@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(0deg);
    }

    85% {
        transform: rotate(15deg);
    }

    95% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

nav {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
    position: relative;
    font-family: rascal;
    text-align: center;
    /* letter-spacing: -1px;*/
    /* border-bottom: solid black;*/
    padding-bottom: 10px;
    border-width: 0.3px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    z-index: 1000;
    /*text-align: center;*/
    line-height: 20pt;
    width: 100%;
    margin: 10pt;
    margin-top: 20pt;
    margin-left: 0pt;
    margin-bottom: 10pt;

    font-size: 30pt;
    line-height: 25pt;
}

.undernav {

grid-column: 3/3;
font-size: 20pt; 
line-height: 20pt;
margin-top:-5pt; 
margin-left:15pt; 
margin-right: 10pt;


}

.name {

    grid-column: 1/2;
    font-size: 50pt;
    margin-left: 10pt;
}


.little-name {

grid-column: 1/2;
font-size: 17pt;
margin-left: 10pt;
line-height: 17pt;
margin-top: -7pt;
text-align: center;

}

.undernav-little {

grid-column: 3/3;
font-size: 17pt; 
text-align: center;
line-height: 20pt;
margin-top: -7pt; 
margin-left:15pt; 
margin-right: 10pt;


}
.infobox {

    position: relative;
    font-family: rascal;
    font-size: 40pt;
    text-align: center;
    /* letter-spacing: -1px;*/
    /* border-bottom: solid black;*/
    padding-bottom: 10px;
    border-width: 0.3px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    z-index: 1000;
    /*text-align: center;*/
    line-height: 40pt;
    width: 100%;
  /*  margin: 10pt;*/
    margin-top: -10pt;
    margin-left: 0pt;
    margin-bottom: 0pt;
}

.number {


    margin-left: 20pt;
}

nav:hover {

    -webkit-text-stroke-width: 12px;
    color: #f6ff55;
    -webkit-text-stroke-color:  hsl(163, 100%, 79%);
}

.motcle:hover {


    -webkit-text-stroke-width: 12px;

    color: #f6ff55;
    -webkit-text-stroke-color:#ff56a2;

}


p {
    font-family: sono-regular;
    font-size: 12pt;
    line-height: 13pt;
    width: 95%;
    margin-left: 10pt;
    margin-right: 10pt;
    margin-top: 3pt;
    margin-bottom: 15pt;
}


p>.motcle {

    font-family: rascal;
    font-size: 20pt;
    text-decoration: none;
    color: rgb(247, 242, 245);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;


}


.poptext {


    display: none;
    /* margin-left: 500px; */

}


/*.visible {

    display : block;
    margin-left: 600;
    z-index: 1000;
}*/


button {

    background-color: transparent;
    /* Green */
    border: none;
    color: black;
    padding: 10px 10px;
    font-family: sono-regular;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12pt;

     position: fixed;
    bottom: 10px;
    left: 10px;
    
    border-style: solid;
    border-color: rgba(23, 3, 26, 0.802);
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;


}


.image-size-up {

width: 100px; 

}

nav > info-little {

    font-family: duperresans; 
    font-size : 9pt; 
        -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: none;

}

/* ABOUT */

.boite-about {

    border-style: solid;
    border-color: rgba(23, 3, 26, 0.802);
    width: 600px;
    height: fit-content;
    /*transform: skew(-3deg);*/
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    user-select: none;
    cursor: pointer;
    padding: 5pt;
    position: fixed;

    transition: all 4s ease;

}

.about-figure {



}

.boite-about > .about-img  {


width : fit-content; 



}

.about>p>.motcle {


    font-size: 15pt;

}


button:hover {


    
    -webkit-text-stroke-width: 12px;
    cursor: pointer;

    -webkit-text-stroke-color:#f6ff55 ;
}


.about>p {

    font-family: sono-regular;
    font-size: 10pt;
    line-height: 11pt;


}


.hidden-element {

    display: none;



}

.visible {

    display: block;
    bottom: 500px;
}

#boite-about1{
    top: 30px;
    left: 50%;
    z-index: 120;
    transform: translateX(-50%);
    left: calc(50% - 10px);
}
#boite-about2{
    top: 40px;
    left: 50%;
    z-index: 119;
    transform: translateX(-50%);
    left: calc(50% - 20px);
}
#boite-about3{
    top: 50px;
    left: 50%;
     z-index: 118;
    transform: translateX(-50%);
    left: calc(50% - 30px);
}
#boite-about4{
    top: 60px;
    left: 50%;
    z-index: 117;
    transform: translateX(-50%);
    left: calc(50% - 40px);
}

#boite-about5{
    top: 70px;
    left: 50%;
     z-index: 116;
    transform: translateX(-50%);
    left: calc(50% - 50px);

}

#boite-about6{
    top: 80px;
    left: 50%;
     z-index: 115;
    transform: translateX(-50%);
    left: calc(50% - 60px);
}
#boite-about7{
    top: 90px;
    left: 50%;
     z-index: 114;
    transform: translateX(-50%);
    left: calc(50% - 70px);
}

#boite-about8{
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    left: calc(50% - 80px);
    z-index: 113;
}

#boite-about9{
    top: 110px;
    left: 50%;
     z-index: 112;
    transform: translateX(-50%);
    left: calc(50% - 90px);
}

#boite-about10{
    top: 120px;
    left: 50%;
    z-index: 111; 
    transform: translateX(-50%);
    left: calc(50% - 100px);
}

.about-img {

width : 100%; 

}



.description {

    display: inline-block;
    position: fixed;
    bottom: 60px;
    left: 25px;
    padding:3pt; 

  /*  font-family: sono-regular;*/
    
    border-style: solid;
    border-color: rgba(23, 3, 26, 0.802);
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

}