/* colors */
:root {
--dark-pink: #510023;
--medium-pink: #a31a3e;
--pink: #d13c5f;
--dark: #000000;
--dark-50: rgba(72,25,49,.5);
--gred: #3d2f32;
--light-pink: #fff5f9;
--light-pink-50: rgba(255,245,249,.5);
--passion-red: #fc0717;

}
/*index*/

.index {
  width: 1000px;
  max-width: 98%;
  margin: auto;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row;
  justify-content:center;

}

.entete {
}

.campus {
  margin-top:10px;
}

.logo{
  margin-top: 10px;
  max-width: 400px;
  position: sticky;
}

.episode {
  margin:5%;
  background-color: #E8E8E840;
  border: none;
  padding: 5px 10px;
  min-width: 210px;
  max-width:400px;
  cursor: pointer;
  border-radius:60px;
  margin:7px;
}

.gif {
  margin: 10px;
  max-width: 100px;
  max-height: 90px;
  margin-top:10%;
  margin-bottom:10%;
}

.episode p, h {
}

/*pages*/
.Page {
  width: 1000px;
  max-width: 98%;
  background-color: #ffffff;
  outline: 4px solid #291727;
  margin: auto;
  margin-bottom: 10px;}


  /*Retour index button*/
  .back-home {
    cursor: pointer;
    border: none;
    background: var(--medium-pink);
    color: white;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: grid;
    place-content: center;
    transition:
    background 300ms,
    transform 200ms;
    font-weight: 600;
  }

  .back-home {
    position: absolute;
    inset: 0;
    animation: text-rotation 8s linear infinite;

    > span {
      position: absolute;
      transform: rotate(calc(19deg * var(--index)));
      inset: 7px;
    }
  }

  .back-home {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: #fff;
    color: #7808d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .back-home {
    position: absolute;
    transform: translate(-150%, 150%);
  }

  .back-home:hover {
    background: #000;
    transform: scale(1.05);
  }

  .back-home:hover .back-home__icon {
    color: #000;
  }

  .back-home:hover .back-home__icon:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
  }

  .back-home:hover .back-home__icon--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
  }

  @keyframes text-rotation {
    to {
      rotate: 360deg;
    }
  }



/* scroll */
/* ff */
  * {
    scrollbar-width: auto;
    scrollbar-color: var(--dark-pink) var(--gred);
  }
/* chro, ow the edge, saf */
  *::-webkit-scrollbar {width: 16px;}
  *::-webkit-scrollbar-track {background: var(--gred);}
  *::-webkit-scrollbar-thumb {
    background-color: var(--dark-pink);
    border-radius: 10px;
    border: 3px solid var(--gred);
  }
/* text select */
::-moz-selection {background: var(--dark-50);}
::selection {background: var(--dark-50);}

/* fonts */
@font-face{font-family: "Atkinson-Hyperlegible-Regular";src: url("./font/AtkinsonHyperlegible-Regular.ttf");}
@font-face{font-family: "RubikGlitch";src: url("./font/RubikGlitch.ttf");}
@font-face{font-family: "Atkinson-Hyperlegible-Italic";src: url("./font/AtkinsonHyperlegible-Italic.ttf");}
@font-face{font-family: "Sometype-Mono-Regular";src: url("./fonts/sometype-mono-regular.ttf");}
:root {
    --hyperlegible: 'Atkinson-Hyperlegible-Regular',Helvetica, Arial, sans-serif;
    --RubikGlitch:'RubikGlitch',Helvetica, Arial, sans-serif;
    --hyperlegible-ita:'Atkinson-Hyperlegible-Italic',Helvetica, Arial, sans-serif;
    --mono:'Sometype-Mono-Regular',Helvetica, Arial, sans-serif;
}


/* resets */
html{background-attachment: fixed;background-image:radial-gradient(50% 50% at 50% 50%, #FFE5E5FF 7%, #073AFF00 100%),radial-gradient(70% 70% at 100% 1%, #FCADACFF 7%, #073AFF00 100%),radial-gradient(70% 70% at 1% 1%, #E1AECAFF 7%, #073AFF00 100%),radial-gradient(70% 70% at 1% 100%, #FCADACFF 7%, #073AFF00 100%),radial-gradient(70% 70% at 100% 100%, #E1AECAFF 7%, #073AFF00 100%),linear-gradient(125deg, #FFE5E5FF 0%, #FFE5E5FF 100%);}
body{margin:0;padding:0;}
.abs {position: absolute;}
.rel{position: relative}
html{overflow-x: hidden;}
article{padding:0;max-width:1000px;margin:auto;}
.rel a {text-decoration: none;}
@media (min-width:1000px){section{position: absolute;}}
@media (max-width:999px){section{position: relative;margin-top:60px;margin-bottom:60px;margin-left: auto;margin-right: auto;}}

/* footer always bottom, mobile nav always top */
body{display: flex; flex-direction: column;}
main{flex: 1 0 auto;}
footer{flex-shrink: 0;}
/* mobile nav disappears */ @media (min-width:1075px){
html, body{height: 50px}
}
/* mobile footer appears */ @media (max-width:519px){
main{min-height: calc(100vh - 257px);}
}
/* normal nav and footer */ @media (min-width:520px) and (max-width:1074px){
main{min-height: calc(100vh - 252px);}
}

/* md lg */
@media (min-width:1000px){
article{min-height:1020px;width:100%;}
.article-container{min-height:calc(100vh - 192px);display: flex;justify-content: center;align-items: center;background-image: url("../img/bg-splash-2025.png");background-position: calc(50% - 6px) calc(50% + 20px);background-repeat: no-repeat;background-size: 930px;}
}
/* sm */
@media (max-width:999px){
.rel{width:300px !important;margin-left: auto;margin-right: auto;display: block;padding-bottom: 30px;}
.img-link{width:120% !important;}
}

/* text */
@media (min-width:520px){html{font-size:20px;}footer{font-size: .8rem;}}
@media (max-width:519px){html{font-size:18px;}footer{font-size: .9rem;}}
html{line-height:1.7rem;}
body,p{letter-spacing:.05rem;}
body{font-size: 1rem;}
p{font-size: 1rem;line-height: 1.2rem;}
body,p,h1,h2,h3{margin-top:0;}
b,strong{font-family: var(--RubikGlitch);font-weight: normal;color:var(--dark-pink)}
i,em{font-family: var(--hyperlegible-ita); font-style: normal;text-shadow: 1px 1px 2px var(--dark);}
article, article p, article a, section ul{letter-spacing: 0;}
h1,h2,h3{font-family:var(--RubikGlitch);font-weight: normal;margin-bottom: 15px;}
body,p{font-family:var(--hyperlegible);color:var(--medium-pink);}
h1{font-size: 1.7rem; line-height:2.1rem;color:var(--dark-pink);margin-top: -10px;margin-bottom: 30px;}
h2{font-size: 1.5rem; color:var(--dark-pink);}
p{margin-bottom: 1.3rem;}
.date{vertical-align: 1px;font-family: var(--mono);background: var(--dark-50);border-radius: 4px;padding: 0 4px;}
.number{font-family: var(--mono);}
.colon{letter-spacing: .2rem;vertical-align: 1px}

/* hover */
@media (min-width:1000px){
section{transition: all 0.4s ease;}
.erotopia:hover, .EpisodeA:hover, .EpisodeB:hover, .EpisodeC:hover, .EpisodeD:hover, .EpisodeE:hover, .EpisodeF:hover, .EpisodeG:hover{rotate:-7deg;}
}
@media screen and (prefers-reduced-motion: reduce) {
.erotopia:hover, .EpisodeA:hover, .EpisodeB:hover, .EpisodeC:hover, .EpisodeD:hover, .EpisodeE:hover, .EpisodeF:hover, .EpisodeG:hover{rotate:0deg;}
}

/* imgs */
.imgPixel{image-rendering: pixelated;image-rendering: -moz-crisp-edges;image-rendering: crisp-edges;}
.logo{width:100%; height:auto;}

/* bgs */
html{background-image:radial-gradient(50% 50% at 50% 50%, #FFE5E5FF 7%, #073AFF00 100%),radial-gradient(rgba(168,114,137,1) 0%, rgba(150,91,123,1) 44%, rgba(81,35,66,1) 98%);background-attachment: fixed;}

/* links */
a, a:active{color:var(--dark-pink);text-decoration:underline wavy;text-underline-position: under;font-family:'RubikGlitch',Helvetica, Arial, sans-serif;}
a:hover,a:focus{opacity:85%;}
a, .glow .img-link{transition: all 0.4s ease;}
.block-link::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;}
.glow a:hover{opacity:100%;}
.glow:hover .img-link{
    -webkit-filter: drop-shadow(0px 0px 15px var(--light-pink));
            filter: drop-shadow(0px 0px 15px var(--light-pink));}

/* Logo Erotopia */
.erotopia{width:auto,left:15px;}
@media (min-width:1000px){.erotopia{width:600px;top:100px;left:190px;}}

/* radio campus */
.campus{width:80px}
@media (min-width:1000px){.campus{top:428px;left:250px;right:200px}}
.campus p {width: 400px;text-align: center;margin-top:10px;margin-left: auto;  margin-right: auto;}
.campus .logo{width: 400px;margin-left: auto;margin-right: auto;display: block;}
.campus .imgPixel{display: block;margin-left: auto;margin-right: auto;}
.campus strong{color:var(--dark-pink);font-weight: normal;}
.campus a{color:var(--dark-pink);text-decoration: underline wavy;text-underline-position: under;}



/* footer */
footer nav a{color:var(--dark-pink);}
footer ul{list-style: none;padding-left: 0;}
footer ul li {position: relative;}
footer nav ul{margin: 0;position: relative;}
footer nav li:nth-child(1):before{background-image: url('../img/control-tri.png');}
footer nav li:nth-child(2):before{background-image: url('../img/control-o.png');}
footer nav li:nth-child(3):before{background-image: url('../img/control-x.png');}
footer nav ul li {padding-left: 40px;display: inline-block;letter-spacing: .03rem;}
footer nav ul li:before {content: '';position: absolute;background-size: cover;width: 26px;height: 26px;left: 0;top: 5px;}
@media (min-width:520px){
footer{height:192px;bottom:0;position: relative;background:url("../img/bg-wiggle-2025.png") repeat-x bottom center;background-size: 160px;}
footer nav ul {text-align: center;top: 135px;padding-bottom: 0px;}
footer nav ul li{margin-left:30px;}
footer nav li:nth-child(1){margin-left:0px;}
}
@media (max-width:519px){
footer nav{background: var(--gred)}
footer:before{height:40px;background: url("../img/bg-wiggle-2025.png") repeat-x bottom center;display: block;content: "";background-size: 50px auto;}
footer div{background: var(--gred);padding-top:30px;padding-bottom:15px;}
footer ul{width:160px;margin-left: auto !important;margin-right: auto !important;padding-top: 10px;}
footer nav ul li{display: block;padding-bottom:30px;}
}