@charset 'UTF-8';
html,body{margin:0;padding:0;height:100%;color:#000;font-family:Arial,Helvetica,sans-serif;scrollbar-gutter:stable;background:#080010}
body{overflow-x:hidden}
::-webkit-scrollbar{width:0.8rem}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#999;border-radius:0.25rem}
body.error::before,body.error::after{content:'☹'}
a,a:visited{color:inherit;white-space:nowrap}
a:hover,a:active{color:#7902AA;text-decoration:underline}
a.active{pointer-events:none}
.hide,hr{display:none}
*>p:last-child{margin-bottom:0}
sup{font-size:0.5em}
.fadeout{animation:fadeout 0.2s linear 0s 1 normal forwards}
.fadein{animation:fadeout 0.2s linear 0s 1 reverse forwards}
.loading{width:3rem;height:3rem;border:0.5rem dotted #7902AA;border-radius:100%;animation:spin 2s linear 0s infinite}
#outer{z-index:1;min-height:100%;width:100%;position:absolute;background:linear-gradient(105deg,#FFD80088 0,transparent 30rem,transparent),linear-gradient(165deg,#FFD80088 0,transparent 30rem,transparent),linear-gradient(270deg,#000E,2em,transparent 12%,transparent) no-repeat fixed right center}
#inner{display:grid;grid-template-columns:16rem auto;grid-template-rows:auto auto 1fr;grid-template-areas:'g b' 'g m' 'p m';grid-column-gap:2rem;padding:0 6rem 5rem 0}
#inner>header{grid-area:g}
#logohead,#logo,#logobg{width:13rem;height:13rem}
#logohead,#logo{display:block !important}
#logo{padding:1rem 2rem 0 2rem}
#logobg{display:none}
nav ul,h1,h2,h3{list-style:none;margin:0;padding:0;font-weight:bold;text-shadow:0.12em 0.12em 0 #000A, 0.25rem 0.25rem 0 #000A, -0.1rem -0.1rem 0 #000A, 0.1rem -0.1rem 0 #000A, -0.1rem 0.1rem 0 #000A, 0.1rem 0.1rem 0 #000A}
h1{padding-top:3rem;font-size:2.8rem}
h1 sup{font-size:0.5rem;vertical-align:text-bottom}
nav ul,h2{font-size:1.5rem}
h3{font-size:1.3rem}
h2,h3{color:#FFFE}
h2 em,h3 em{font-style:oblique}
h2 a,h2 a:visited,h3 a,h3 a:visited{text-decoration:none}
h2 a:hover,h2 a:active,h3 a:hover,h3 a:active{color:#FFD60D;text-decoration:none}
nav.main ul li,h1{padding-left:3rem;line-height:1.5em}
nav a.active,h1 a,h1 a:visited,nav a,nav a:visited{text-decoration:none;color:#FFD60D}
nav a.active,h1 a:hover,nav a:hover,h1 a:active,nav a:active{text-decoration:none;color:#FF9E0D}
nav a:hover{transition:color 0.1s ease-in-out}
nav.main li{display:block;width:100%}
nav.links{grid-area:b;text-align:right;margin:0}
nav.links ul,.article .links{list-style:none;padding:0;display:flex;flex-flow:row wrap}
nav.links ul,.list .article .links{justify-content:flex-end}
nav.links li{display:inline-block;margin:1.5rem 1rem}
nav.links svg{height:1em;fill:#FFFE}
nav.links a:hover svg{transform:scale(1.2);transition:transform 0.15s ease-in-out}
#main{grid-area:m;display:flex;flex-flow:row wrap;align-items:center;align-content:center;justify-content:center;margin-top:1rem}
.article{background:#FFFA;margin:1.25rem;padding:1.5rem 2rem;border-radius:2.25rem;min-width:18rem;max-width:75%}
.article.music{background:#FEDA}
.article.music:has(iframe.ytvid[data-yts="1"]){background:#FEDD}
.article figure{margin:0}
.article footer,.article .meta{text-align:right;font-style:italic;font-size:0.8rem;opacity:0.7}
.article picture{filter:brightness(0.8) contrast(1.2);display:grid;margin:0.5rem 0}
.article picture img{max-width:34rem;max-height:34rem;margin:0 auto}
.article picture *{width:100%;border-radius:1em}
.article picture>*{grid-area:1 / 1}
.article picture div{display:none}
div.ytvid{display:block !important;width:100%;height:100%;cursor:pointer}
div.ytvid:hover{background:#FED3 url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9IiNGRUQiIGQ9Ik0yNTYsMEMxMTQuNTExLDAsMCwxMTQuNDk3LDAsMjU2YzAsMTQxLjQ5LDExNC40OTUsMjU2LDI1NiwyNTZjMTQxLjQ5LDAsMjU2LTExNC40OTcsMjU2LTI1NkM1MTIsMTE0LjUxLDM5Ny41MDMsMCwyNTYsMCB6IE0zNDguMjM4LDI4NC40MThsLTEyMC4yOTQsNjkuNTA3Yy0xMC4xNDgsNS44NjQtMjIuNjYxLDUuODc0LTMyLjgyNiwwLjAwOWMtMTAuMTU4LTUuODYyLTE2LjQxNS0xNi42OTktMTYuNDE1LTI4LjQyNlYxODYuNDkzIGMwLTExLjcyOCw2LjI1OC0yMi41NjQsMTYuNDE1LTI4LjQyNmM1LjA3Ni0yLjkzLDEwLjc0MS00LjM5NSwxNi40MDYtNC4zOTVjNS42NywwLDExLjM0MSwxLjQ2OCwxNi40Miw0LjQwMmwxMjAuMjk1LDY5LjUwNyBjMTAuMTQ5LDUuODY0LDE2LjQsMTYuNjk2LDE2LjQsMjguNDE4QzM2NC42MzksMjY3LjcyMiwzNTguMzg3LDI3OC41NTMsMzQ4LjIzOCwyODQuNDE4eiIvPjwvc3ZnPg==") 50% 50%/33% 33% no-repeat}
.article footer>*,.article .meta>*,.excerpt>*{margin:0.5rem}
.article .release{text-align:center}
.article .meta{width:100%}
.article .meta ul{list-style:none;padding:0}
.article .meta li{display:inline}
.article .meta ul.release li:not(:last-child)::after{content:', '}
.article .links{justify-content:center}
.article .links svg{height:1.2rem;opacity:0.7}
.article .links a:hover svg{fill:#000;opacity:1}
.article .links li{display:inline-block;margin-left:0.5rem}
.list .article .release{text-align:right}
.continue {text-align:right;font-style:italic;font-size:0.9rem;opacity:0.9}
.continue span::after{content:'…'}
.error .article{background:#FAAA}
.list .article{max-width:32rem}
.list .article.music{max-width:20rem}
#sidePlayer{grid-area:p}
#footer{position:absolute;left:0;bottom:0;height:2em;color:#996;text-align:center;width:100%;font-weight:lighter;letter-spacing:0.1em;font-size:0.7em;background:linear-gradient(to bottom,#0009,#08001099);box-shadow:0 -0.7em 1em #08001099}
#footer a{color:#996;text-decoration:none}
#footer a:active,#footer a:hover{color:#AA6;text-decoration:underline}
#footer>div{position:absolute;bottom:0;width:100%}
#footer ul{list-style:none;display:inline-flex;margin:0.5em}
#footer li{white-space:nowrap}
#footer li:not(:first-child):before{content:' ♯ ';padding-left:0.33em;color:#747;font-size:1.1em}

@media(max-width:1280px){
.article picture img{max-width:29rem;max-height:29rem}
}

@media(max-width:1024px){
#inner{grid-template-areas:'g m' 'p m' 'b m';padding:0 1rem 5rem 0}
nav.links ul{padding:1.8rem}
nav.links li{margin:0.5rem}
.article picture img{max-width:21rem;max-height:21rem}
}

@media(max-width:768px){
html{font-size:0.6rem}
#inner{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:'g' 'b' 'p' 'm';padding:0 0 3rem 0}
#inner>header{text-align:right;padding-right:2rem}
#logohead{float:left;margin-right:3rem}
h1{font-size:5rem;padding-top:0}
nav.main ul li{display:inline;font-size:2.5rem}
nav.links{font-size:1.6rem}
#main{font-size:1.55rem}
.article.music img{width:192px;height:192px}
}

@media(max-width:480px){
html{font-size:0.5rem}
.article.music img{width:160px;height:160px}
}

/* TO REWORK */
@media screen and (min-width:1024px){
head::before,head::after,body::before,body::after{position:fixed;display:block;font-size:36px;color:transparent;top:50%;left:50%;width:3em;height:3em;content:'♩';mix-blend-mode:screen}
#logo,#logobg{position:relative;left:-0.5rem;top:-1.2rem;display:block;text-align:left}
#logo{padding:5rem 5rem 0 0;top:-19.2rem;animation:logosplash 0.5s ease-in-out 0s 1 normal,spin 30s linear 0.5s infinite normal}
#logobg{padding:2.5rem;opacity:0.7;animation:logosplashbg 1.1s ease-in-out 0s 1 normal}
#logobg>div{box-sizing:border-box;width:100%;height:100%;border:1.6rem solid #7902AA;border-radius:100%;filter:drop-shadow(-0.1rem -0.1rem 0 #0004) drop-shadow(0.15rem -0.1rem 0 #0004) drop-shadow(-0.1rem 0.15rem 0 #0004) drop-shadow(0.15rem 0.15rem 0 #0004)}
#logo svg{width:50%;height:50%;filter:blur(0.02rem) drop-shadow(0 -2.5rem 2rem #FFD80044) drop-shadow(0 2.5rem 2rem #FFD80044) drop-shadow(-0.1rem -0.1rem 0 #0004) drop-shadow(0.15rem -0.1rem 0 #0004) drop-shadow(-0.1rem 0.15rem 0 #0004) drop-shadow(0.15rem 0.15rem 0 #0004)}
#logowings{animation:logowingflap 0.5s ease-in-out 0s infinite alternate}
body.error::before{
text-shadow: 2.364302006em 1.8943202315em 2.0881702748px rgba(255, 197, 0, 0.3), 1.7143730987em 0.2144046595em 5.4908248175px rgba(255, 0, 62, 0.3), 0.9861855447em 1.5180869127em 5.3634797479px rgba(255, 90, 0, 0.3), -0.0152429042em 0.4998915399em 4.2470540535px rgba(255, 141, 0, 0.3), 1.1024010117em 1.2508171383em 2.0016761123px rgba(255, 18, 0, 0.3), 1.8738651385em 2.0100831887em 5.0513516478px rgba(255, 195, 0, 0.3), -0.5782997164em 1.3658479838em 3.9107423905px rgba(255, 90, 0, 0.3), 1.9650556671em 0.4840811203em 4.9626804674px rgba(255, 0, 36, 0.3), 1.8161449153em -0.3129931451em 6.4053639282px rgba(255, 0, 205, 0.3), 0.0839851016em 1.6419189203em 6.7454342057px rgba(255, 0, 30, 0.3), 1.5489789837em 1.612486823em 5.1848994846px rgba(255, 0, 120, 0.3), 0.0823835691em -0.1041967814em 5.3373390014px rgba(255, 0, 104, 0.3);
animation:450s -100s bgrotate infinite ease-in-out alternate}
body.error::after{
text-shadow: 0.0414468024em 0.3161759808em 2.5813636755px rgba(255, 85, 0, 0.3), -0.3701075749em 2.0450851685em 5.1229629689px rgba(255, 137, 0, 0.3), 1.1661852203em 1.2156852157em 6.5599120231px rgba(255, 177, 0, 0.3), -0.3685435868em 0.319585589em 2.8216061994px rgba(255, 0, 146, 0.3), 2.1612997593em -0.3003919877em 3.8451813895px rgba(255, 135, 0, 0.3), 1.4724510703em 1.7808619838em 2.0993296478px rgba(255, 101, 0, 0.3), 1.1476552786em 0.0490425186em 6.7288252794px rgba(255, 0, 141, 0.3), 1.3082934074em -0.0566589281em 4.275589686px rgba(255, 167, 0, 0.3), 1.9554897567em 1.6045964781em 3.9440329208px rgba(255, 0, 185, 0.3), -0.4886735346em 2.1532281281em 6.5151877511px rgba(255, 0, 141, 0.3), 0.1496668994em 0.5674011003em 6.9288950121px rgba(255, 0, 206, 0.3), 0.6617174629em 0.0669332375em 5.4653019211px rgba(255, 196, 0, 0.3), 2.3268188592em -0.1190677049em 4.3752347597px rgba(255, 0, 75, 0.3), 1.8784697669em -0.3207632049em 6.9864025319px rgba(255, 0, 47, 0.3);
animation:500s -20s bgrotate infinite ease-in-out alternate}
}

@keyframes fadeout{0%{}to{opacity:0}}
@keyframes logosplash{0%{transform:scale(0.4,0.4) rotate(33deg) translate(-6rem,10rem);opacity:0}to{}}
@keyframes logosplashbg{0%{opacity:0}20%{opacity:0}to{}}
@keyframes logowingflap{0%{}to{transform:scale(0.7,0.9) translate(20%, 5%)}}
@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes bgrotate{0%{transform:rotate(0deg) scale(10) translate(-30px,-30px)}25%{transform:rotate(-180deg) scale(15) translate(-30px,30px) translateY(15px)}75%{transform:rotate(0deg) scale(12) translate(30px,30px)}to{transform:rotate(180deg) scale(15) translate(30px,-30px)}}