h1{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1em;
  font-weight: 300;
}
.gradient{
  height: 95vh;
  margin: 2.5vh 2.5vh 2.5vh 2.5vh;
}


.gradient {
    background: linear-gradient(321deg, #f16364, #026972);
    background-size: 200% 200%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}
@keyframes AnimationName {
    0%{background-position:14% 0%}
    50%{background-position:87% 100%}
    100%{background-position:14% 0%}
}


.container{
  padding: 2vh;
}




.titreArticle{
  font: normal normal 600 4.5em/normal 'IBM Plex Mono', monospace;
  color: #026972; /* bleu */
  height: 1.1em;
}
.sousTitreArticle{
  font: normal normal 500 3em/normal 'IBM Plex Mono', monospace;
  color: #f16364;/* rose */
}





.text {
  font: normal normal 400 2.5em/normal 'IBM Plex Mono', monospace;
  color: #026972; /* bleu */
}



b{
  font: normal normal 400 1em/normal 'IBM Plex Mono', monospace;
  color: #026972; /* bleu */
}

.textBox{
  font: normal normal 400 1.1em/normal 'IBM Plex Mono', monospace;
  color: #f16364;/* rose */
}


#hilariteGeneraleContainer{
  height: 96vh;
  display: grid;
  grid-template-columns: auto ;
  grid-template-rows: 5.5em 8em 15vh auto auto ;
  grid-template-areas:
    "tArticleHilarite"
    "sTArticleHilarite"
    "holderSound"
    "swiper"
    "scroll ";
}

.titreArticleHilarite{grid-area: tArticleHilarite;}
.sousTitreArticleHilarite{grid-area: sTArticleHilarite;}
.holder{grid-area: holderSound;}
.swiper{grid-area: swiper;}
/* .PhotosHilarite01{grid-area: PhotosHilarite01;}
.PhotosHilarite02{grid-area: PhotosHilarite02;}
.PhotosHilarite03{grid-area: PhotosHilarite03;}
.PhotosHilarite04{grid-area: PhotosHilarite04;}
.PhotosHilarite05{grid-area: PhotosHilarite05;}
.PhotosHilarite06{grid-area: PhotosHilarite06;}
.PhotosHilarite07{grid-area: PhotosHilarite07;}
.PhotosHilarite08{grid-area: PhotosHilarite08;}
.PhotosHilarite09{grid-area: PhotosHilarite09;}
.PhotosHilarite10{grid-area: PhotosHilarite10;} */


/* .holder{
  min-height: 20vh;
  width: 100%;
} */
.photosHilarite {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* padding: 3px; */
}

.photosEdito {
    object-fit: cover;
    max-width: 100%;
    max-height: 70vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* padding: 3px; */
}

.photosEditoHorizontal{
position: relative;
top: 50%;
transform: translateY(50%);

}

#tempContainer{
  display: grid;
  height: 96vh;
  grid-template-columns: auto ;
  grid-template-rows: 5.5em 8em auto auto auto;
  grid-template-areas:
    "titreArticleTemp"
    "sousTitreArticleTemp"
    "descriptionArticle"
    "imageTemperatureContainer"
    "scroll";
}

.titreArticleTemp{grid-area: titreArticleTemp;}
.sousTitreArticleTemp{grid-area: sousTitreArticleTemp;}
.descriptionArticle{grid-area: descriptionArticle;}
.imageTemperatureContainer{grid-area: imageTemperatureContainer;}

.imageTemperatureContainer{
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  /* padding: 15vh 0vh 0vh 0vh; */
}
.descriptionArticle{
  align-self: end;
}

.imageTemperature{
  display: block;
  margin-right: 0%;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: 0%;
  width: 100%;
  max-height: 100%;
}


#editoPage{
  display: grid;
  grid-template-columns: 100% ;
  grid-template-rows: auto auto auto auto auto  ;
  grid-template-areas:
    "deformeNo3 "
    "compilation "
    "textEdito0 "
    "editoImageContainer"
    "textEdito1 "
    "scroll ";
}

.deformeNo3{grid-area: deformeNo3;}
.compilation{grid-area: compilation;}
.textEdito0{grid-area: textEdito0;}
.textEdito1{grid-area: textEdito1;}
.editoImageContainer{grid-area: editoImageContainer;}
.scroll{grid-area: scroll;}



.deformeNo3{color: #f16364;/* rose */}
.compilation{color: #026972; /* bleu */}

/* .compilation{text-align: right;} */

.editoImageContainer{
  max-width: 100%;
  max-height: 100%;
}
.editoImage{
  display: block;
  width: 100%;
  padding-bottom: 3vh;
}
.scroll{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 4em;
    font-weight: 400;
    height: 1.1em;
    text-align: center;
    color: #f16364;/* rose */
    padding-top: 1em;
    padding-bottom: 1em;
    align-self: end;
    bottom: 0px;
}


.title{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 6em;
  font-weight: 600;
  height: 1.1em;
}
.compilation{
  margin-bottom: 1em;
}


#credit {
  height: 96vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: minmax(100px, max-content) minmax(100px, max-content) auto minmax(100px, max-content);
  grid-template-areas:
    "intro"
    "swiperCredit"
    "prix"
    "liens";
}

.textBox{
  font: normal normal 400 2.5em/normal 'IBM Plex Mono', monospace;
  padding: 5px;
}

.intro {grid-area: intro;}
.swiperCredit{grid-area: swiperCredit;}
.prix {grid-area: prix;}
.liens {grid-area: liens;}


.prix {
  align-self: end;
  vertical-align: bottom;
  bottom: 0px;
}

.swiper-button-prev, .swiper-button-next {
  display: none;

}

.lien{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;

}

#ensci{
  order:1;
  padding-right: 1vh;
  height: 7vh;
}

#faceB{
  order:2;
}

#insta{
  order:2;
}

.iconLien{
  height: 5vh;
  padding-top: 1vh;
}

/* unvisited link */
a:link {
  color: #f16364;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #f16364;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #f16364;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #f16364;
  text-decoration: none;
}

.swiperEdito{
  overflow: hidden;
}


@media screen
  and (min-device-width: 700px)
  /* and (max-device-width: 1600px) */
  and (-webkit-min-device-pixel-ratio: 1) {

    .container{
      /* width:500px; */
      max-width: 50vw;
      min-width: 720px;
      padding: 5vh;
      margin-left: auto;
      margin-right: auto;
    }

    .text, .textBox{
      font: normal normal 400 1.4em/normal 'IBM Plex Mono', monospace;
    }
    .title{
      font: normal normal 600 5em/normal 'IBM Plex Mono', monospace;
      height: 1.1em;
    }
    .titreArticle{
      font: normal normal 600 3em/normal 'IBM Plex Mono', monospace;
      height: 1.1em;
    }
    .sousTitreArticle{
      font: normal normal 500 2em/normal 'IBM Plex Mono', monospace;
    }

    #hilariteGeneraleContainer{
      height: 90vh;
      display: grid;
      grid-template-columns: auto ;
      grid-template-rows: 3.5em 8em 15vh auto minmax(100px, max-content) ;
      grid-template-areas:
        "tArticleHilarite"
        "sTArticleHilarite"
        "holderSound"
        "swiper"
        "scroll ";
    }
    #tempContainer{
      display: grid;
      height: 90vh;
      grid-template-columns: auto ;
      grid-template-rows: 3.5em 8em auto auto minmax(100px, max-content);
      grid-template-areas:
        "titreArticleTemp"
        "sousTitreArticleTemp"
        "descriptionArticle"
        "imageTemperatureContainer"
        "scroll";
    }

    .scroll{
        font-family: 'IBM Plex Mono', monospace;
        font-size: 3em;
        font-weight: 300;
        height: auto;
        text-align: center;
        color: #f16364;/* rose */
        padding-top: 1em;
        padding-bottom: 0px;
        align-self: end;
        bottom: 0px;
    }

    iframe{
      height: 50vh;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    .swiper-button-prev, .swiper-button-next {
        color: #f16364 !important;
        display: block;
    }
    .swiper-button-next {
        right: -5vw;
    }
    .swiper-button-prev {
        left: -5vw;
    }
    .swiperEdito{
      overflow: hidden;
    }


    .photosEdito {
        object-fit: cover;
        max-width: 100%;
        max-height: 70vh;
        display: block;
        margin-left: auto;
        margin-right: auto;
        /* padding: 3px; */
    }

    .photosEditoHorizontal{
    position: relative;
    top: 0;
    transform: none;

    }


    .swiperEdito, .swiperCredit, .swiper{
      width: 100% !important;
      height: auto;
    }
    .swiper-slide{
      max-width: 100%;
      /* max-height: 80vh; */
      background-color: var(--transparent);
    }
    #credit{
      height: 90vh;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: minmax(100px, max-content) minmax(100px, max-content) auto minmax(100px, max-content);
      grid-template-areas:
        "intro"
        "swiperCredit"
        "prix"
        "liens";
    }



}

/* @media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {


} */