/* colors */
:root {
    --big: #854c6e;
    --doom: #49303f;
    --blaze: #e1aeca;
    --amy: #fcadac;
    --amy-50: rgba(252,173,172,.5);
    --cream: #ffe5e5;
    --infinite: #fff5f9;
    --infinite-50: rgba(255,245,249,.5);
    --grounder: #70d5d6;
    --knuckles: #b24260;
}

/* 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("../fonts/AtkinsonHyperlegible-Regular.ttf");}
@font-face{font-family: "Atkinson-Hyperlegible-Bold";src: url("../fonts/AtkinsonHyperlegible-Bold.ttf");}
@font-face{font-family: "Atkinson-Hyperlegible-Italic";src: url("../fonts/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:0px;}
.abs {position: absolute;}
.rel{position: relative}
html{overflow-x: hidden;}
article{padding:0px;max-width:1000px;margin:auto;}
.rel a {text-decoration: none;}
@media (min-width:1030px){section{position: absolute;}}
@media (max-width:1029px){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: 100%;}
}
/* 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:1030px){
    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-20250330.png");background-position: calc(50% + 10px) calc(50% + 20px);background-repeat: no-repeat;background-size: 930px;padding-left: 28px;}
    }
    /* sm */
    @media (max-width:1029px){
    .rel{width:300px !important;margin-left: auto;margin-right: auto;display: block;padding-bottom: 30px;}
    .img-link{width:100% !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: .85rem;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;background: var(--amy-50);border-radius: 4px;padding: 0 4px;font-size: .9em}
.number{font-family: var(--mono);}
.colon{letter-spacing: .2rem;vertical-align: 1px}

/* hover */
@media (min-width:1030px){
    section{transition: all 0.4s ease;}
    .no-follow:hover, .blog:hover, .graphics:hover, .old-web:hover, .link:hover{rotate:5deg;}
    .my-art:hover, .reviews:hover, .who:hover, .shrines:hover{rotate:-5deg;}
    }
    @media screen and (prefers-reduced-motion: reduce) {
    .no-follow:hover, .blog:hover, .graphics:hover, .link:hover, 
    .my-art:hover, .reviews:hover, .old-web:hover, .who:hover, .shrines: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(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%);background-attachment: fixed;} */
html{
background: 
   url(../images/bgTop.png) 0 0 no-repeat,  /* On top,    like z-index: 4; */
   url(../images/bgMid.png) 0 50% repeat,   /*            like z-index: 3; */
   url(../images/bgBot.png) 0 150% no-repeat;  
background-size: 100%;
}


/* 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 */
.logo-button{width:320px;}
@media (min-width:1030px){.logo-button{top:50px;left:0px;width:460px;}}

/* accueil */
.accueil-button{width:280px;}
@media (min-width:1030px){.accueil-button{top:170px;left:180px;width:190px;}}

/* personnages */
.persos-button{width:280px;}
@media (min-width:1030px){.persos-button{top:170px;left:380px;width:190px;}}

/* galerie */
.galerie-button{width:290px;}
@media (min-width:1030px){.galerie-button{top:170px;left:580px;width:190px;}}

/* brikabrak */
.brikabrak-button{width:280px;}
@media (min-width:1030px){.brikabrak-button{top:170px;left:780px;width:230px;}}


body {
    font-family: var(--hyperlegible);
    font-size: 1rem;
    letter-spacing: .05rem;
    color: var(--doom);

    margin-top: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1075px) {
    body {
        height: 100%;
    }

}