/* colors */
:root {
--big: #510023;
--doom: #a31a3e;
--blaze: #d13c5f;
--amy: #000000;
--amy-50: rgba(72,25,49,.5);
--cream: #3d2f32;
--infinite: #fff5f9;
--infinite-50: rgba(255,245,249,.5);
--grounder: #fc0717;

}

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

/* fonts */
@font-face{font-family: "Atkinson-Hyperlegible-Regular";src: url("../font/AtkinsonHyperlegible-Regular.ttf");}
@font-face{font-family: "Atkinson-Hyperlegible-Bold";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;
    --hyperlegible-bold:'Atkinson-Hyperlegible-Bold',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(--hyperlegible-bold);font-weight: normal;color:var(--big)}
i,em{font-family: var(--hyperlegible-ita); font-style: normal;text-shadow: 1px 1px 2px var(--amy);}
article, article p, article a, section ul{letter-spacing: 0;}
h1,h2,h3{font-family:var(--hyperlegible-bold);font-weight: normal;margin-bottom: 15px;}
body,p{font-family:var(--hyperlegible);color:var(--doom);}
h1{font-size: 1.7rem; line-height:2.1rem;color:var(--big);margin-top: -10px;margin-bottom: 30px;}
h2{font-size: 1.5rem; color:var(--big);}
p{margin-bottom: 1.3rem;}
.date{vertical-align: 1px;font-family: var(--mono);background: var(--amy-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(--big);text-decoration:underline wavy;text-underline-position: under;font-family:'Atkinson-Hyperlegible-Bold',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(--infinite));
            filter: drop-shadow(0px 0px 15px var(--infinite));}
            
/* 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(--big);font-weight: normal;}
.campus a{color:var(--big);text-decoration: underline wavy;text-underline-position: under;}

/* Episode A */
.EpisodeA{height:40px !important}
@media (min-width:1000px){.EpisodeA{top:370px;left:35px;}}
.lumina{top:-22px; left:-44px;}
.luv{top:-6px; left:9px;}
.cherry{top:58px;left:135px;}
.sakura{top:-30px;left:400px;}

/* Episode B */
.EpisodeB{height:40px !important}
@media (min-width:1000px){.EpisodeB{top:520px;left:80px;}}
.tv{top:-20px;left:42px;}
.gba{top:100px;left:110px;}

/* Episode C */
.EpisodeC{height:40px !important}
@media (min-width:1000px){.EpisodeC{top:700px;left:210px;}}
.apple{top:-12px;left:109px;}

/* Episode D */
.EpisodeD{height:40px !important}
@media (min-width:1030px){.EpisodeD{top:780px;left:325px;}}
.win-btn{top:-9px;left:40px;}
.cpu{top:45px;left:-24px;
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);}

/* Episode E */
.EpisodeE{height:40px !important}
@media (min-width:1030px){.EpisodeE{top:730px;left:675px;}}
.ulala{top: 15px; left: 140px;}

/* Episode F */
.EpisodeF{height:40px !important}
@media (min-width:1000px){.EpisodeF{top:630px;left:720px;}}
.arrow{top:5px;left:-30px;}
.arrow source, .arrow img{width:25px;height:auto;}

/* Episode G */
.EpisodeG{height:40px !important}
@media (min-width:1000px){.EpisodeG{top:405px;left:711px;}}
.egg{top:16px;left:39px;}
.dance{top:105px;left:181px;}


            
/* footer */
footer nav a{color:var(--big);}
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(--cream)}
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(--cream);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;}
}