@font-face {
    font-family: 'Magnisa';
    src:url('fonts/magnisa.ttf') format('truetype');
    font-display: swap;
}


/* General */

body { background:black; color:#BABABA; }
h1 span { display:none; }
a { color:#934dc2; text-decoration:none; outline:0; }
a:hover { color:#c86cec; text-decoration:none;}
::selection { color:white; background:#5e3775; }
strong { color:white; }


#scrollToTop { color:#55A2AD; text-shadow: 2px 2px 2px #000000; }


/* background elements */

#bg {
    /* background: black url("img/blog/bg.png") repeat-x top center; */
    background: linear-gradient(to bottom, #060a0c 0%, #1d2429 30%, #000000 100%);
    border:2px solid #222a30;
    opacity:.8;
    background-size: contain;
    width:100vw; height:100vh;
    position:fixed; top:0; left:50%; transform:translate(-50%); z-index:-2;
}
.curtain {
    background: url("img/blog/curtain.png") no-repeat top right; background-size: contain;
    position:fixed; top:0; width:50vw; height:100vh;
    z-index:-1; opacity:.65;
}
#curtainLeft  { left:0; transform: scaleX(-1); }
#curtainRight { right:0; }


/* Content elements */

main{
    display:block; margin:0 auto; width:810px; min-height:100vh;
    background: url("img/blog/frame.png") no-repeat top center; background-size:100%;
}
h1{
    margin:0;padding:0;
    display:block; width:750px; height:475px;
    position:absolute; top:0; left:50%; transform:translate(-50%);
}
h1 a { display:block; width:100%; height:80%; }

#posts { width:800px; margin: 0 auto; padding:375px 0 75px 0; }

.post {
    text-align:justify; font-size:1.3rem;
    margin-bottom:2.5rem;
    box-sizing:border-box;
    border-radius:1.5rem;
    padding:4px;
    background: linear-gradient(to right, #180E23 0%, #29183a 5%, #51296E 33%, #7B5897 50%, #51296E 66%, #29183a 95%, #180E23 100%);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 1); 
}
.sticky {
    background: linear-gradient(to right, #06131b 0%, #1e3747 5%, #3d5e74 33%, #587e97 50%, #3d5e74 66%, #1e3747 95%, #06131b 100%);
}
.post-content {
    box-sizing:border-box;
    background: linear-gradient(to right, #0f1214 0%, #121619 5%, #1b2125 50%, #121619 95%, #0a0c0e 100%);
    border-radius:1.4rem; padding:1.5rem;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .75);
    padding:1rem 2rem 1rem 1.5rem;
    min-height:165px;
    text-shadow:1px 1px 2px black;
}
.post-thumb {
    display:block; float:left;
    width:125px; height:125px;
    margin: 1rem 1rem 1rem 0;
    border-radius:1.75rem;
    padding:4px;
    background:linear-gradient( to right, #243d4d 0%, #315569 5%, #406981 33%, #76A4BE 50%, #406981 66%, #315569 95%, #243d4d 100% );
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .75);
}
.sticky .post-thumb {
    background: linear-gradient(to right, #51296E 0%, #77459b 33%, #946db4 50%, #77459b 66%, #51296E 100%);
}
.post-thumb img   { border:1px solid black; box-sizing: border-box; border-radius:1.5rem; background:rgb(32, 32, 32); }
.excerpt          { margin:0; }
.more             { text-align:right; font-size:1.1em; }
#posts h2         { color:#854ea5; display:block; font-weight:normal; text-align:center; width:100%; font-size:2.5rem;  margin:0 0 65px 0;  }
#posts h3         { color:#397A9B; font-family:"Euphorigenic"; font-weight:normal; font-size:2rem; margin:1rem 0 0 0; }
.postInfo         { color:#4a8399; font-size:1rem; }
.postInfo a       { color:#93b6c4; }
.postInfo a:hover { text-decoration:underline; }
.post-list:hover  { background: linear-gradient(to right, #0f1214 0%, #121619 5%, #21292e 50%, #121619 95%, #0a0c0e 100%); }

#pagination { font-size:1.2rem; text-align:center; margin-bottom:3rem; }
#pagination #next { padding-left:.5rem; }
#pagination #prev { padding-right:.5rem; }


/* Single post */

.post-content hr, .separator {
    border:none; padding:0;
    margin:0 auto;
    aspect-ratio:3.5/1;
    background:url("img/blog/barre.png") no-repeat center center;
}
.separator { width:45%; background-size:100%; }
.post-content hr { width:80%; background-size:110%; }

.post-content code {
    font-size:1.4rem; font-family:"Evy";
    font-style:italic; color:rgb(93, 144, 173);
}
.post-content blockquote {
    margin:1.25rem; padding:.5rem 2rem .5rem 2rem;
    color:rgb(116, 161, 187); font-size:1.3rem; font-family:"Evy";
    border-radius:2rem; border:1px solid black; box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
    background:linear-gradient( to right, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .25) 100% );
}
.post-content blockquote::before { content: "« ... »"; color:#404f58; font-size:1.25em; }
.post-content table td { border:1px solid #26313a; padding:.5rem; }

.wp-caption-text { margin:0; padding:.5rem; text-align:center; font-size:1rem; color:#c89be2; border-top:1px solid #0f151a; }
.wp-caption img { margin-left:50%; transform:translateX(-50%); }
.alignleft img, .alignright img, .aligncenter img { border-radius:1rem; }
.post-content .alignright { transform:translateY(.4rem); margin: 0 0 .5rem 1rem;  float:right; }
.post-content .alignleft  { transform:translateY(.4rem); margin: 0 1rem .5rem 0;  float:left;  }
.post-content .aligncenter  { position:relative;left:50%; transform:translateX(-50%); }
.post-content .alignleft,.post-content .alignright,.post-content .aligncenter {
    max-width:100%; border:2px solid #212c33; border-radius:1rem; background:black; box-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);
}

.singlePostBanner { width:100%; border-radius:2rem 2rem 0 0; border:2px solid black; margin:1.75rem 0 2rem 0; height:200px; }
.singlePostContent{ width:90%; margin:0 auto; }
.aligncenter.transparent, .alignleft.transparent, .alignright.transparent { border:0; background:0; border-radius:0; box-shadow:none; }

.singlePostContent h1, .singlePostContent h2 { display:none; }
.singlePostContent h3, .singlePostContent h4, .singlePostContent h5 { text-align:center; }
.singlePostContent h3 { padding:4rem 0 1.5rem 0; }
.singlePostContent h4 { padding:0; font-size:1.5rem; margin:3.5rem 0 .5rem 0; color:#5799bb; }
.singlePostContent h5 { padding:0; font-size:1.3rem; margin:3.3rem 0 .5rem 0; color:#b4a1be; }
.singlePostContent h3::before { content:"❁ " }
.singlePostContent h3::after { content:" ❁" }
.singlePostContent h4::before { content:"❉ " }
.singlePostContent h4::after { content:" ❉" }
.singlePostContent h5::before { content:"❈ " }
.singlePostContent h5::after { content:" ❈" }

#singlePostInfos {padding-top:1rem; border-top:1px solid rgba(49, 61, 68, 0.75); text-align:center; margin-top:5rem; line-height:1.2rem; }
#singlePostInfos { color:#8f66b4; }
#singlePostInfos a { color:#c3a4e0; }

.gallery-item a img{
    border:2px solid #372246;
    background: linear-gradient(to right, #51296E 0%, #77459b 33%, #946db4 50%, #77459b 66%, #51296E 100%);
}

.errorMessage { font-family:"Evy"; text-align:center; margin:3rem 0 0 0; font-size:2rem; }


/* Shortcodes */

.video-link { text-align:center; font-size:1rem; margin:-1rem 0 1rem 0; }
.quoteAuthor { display:block;text-align:right; color:white; padding-top:.5rem; }
.spoil { background:black; color:black; cursor:pointer; }
.spoil::before { content:"[SPOIL] ";text-transform:uppercase; color:#446474;font-size:.8em; cursor:help; }
.video { width:90%; margin:0 auto; padding:1rem; }
.odysee-iframe { width:100%; aspect-ratio:16/9; border-radius:.5em; border:2px solid black; }

.lyricsBlock { text-align:center; background:rgba(0, 0, 0, 0.1); border:1px solid black; padding:.5rem; margin:.5rem; border-radius:.5rem; }
.lyricsRead span { cursor:pointer;color:rgb(85, 162, 173); font-size:1.5rem; font-family:"Euphorigenic"; }
.lyricsRead span:hover { color:rgb(77, 202, 221); }
.lyrics div { padding:1rem; font-family:"Evy"; }



/* Commentaires */

.comment-body, #respond form {
    box-sizing:border-box;
    text-align:justify; font-size:1.2rem;
    background: linear-gradient(to right, #0f1214 0%, #121619 5%, #1b2125 50%, #121619 95%, #0a0c0e 100%);
    border-radius:1.25rem;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .75);
    padding:1rem 2rem 1rem 2rem;
    text-shadow:1px 1px 2px black;
    border:1px solid rgba(57, 122, 155, 0.2);
    margin-bottom:.5rem;
    text-shadow:2px 2px 2px black;
    line-height:1.2rem;
}
.children .comment-body { border:1px solid rgba(110, 110, 110, 0.2); color:#9ab4cc; }
ol.commentlist, ul.children { list-style-type: none; }
ol.commentlist { padding:0; }
span.required { color:rgb(173, 37, 252); font-weight:bold; }
.vcard img {float:left; margin:0 .5rem .5rem 0; border-radius:.25rem; }

#comments, #reply-title { padding-top:5rem; text-shadow:2px 2px 2px black; }
#reply-title { padding-bottom:1rem; }

#respond label { display:block; margin-bottom:5px; }
#respond textarea { width:97%; }
#respond input, #respond textarea {
    border-radius:.5rem; padding:.5rem;
    color:rgb(184, 184, 184);
    background:linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5) );
    border:1px solid rgb(31, 38, 43);
    box-shadow:inset 1px 1px rgba(0, 0, 0, 0.5);
    font-size:1.2rem;
    font-family:inherit;
}
#respond input:focus, #respond textarea:focus { outline:0; border:1px solid #612c9e; }
#respond input[type="submit"] {
    padding: .6rem 2rem .8rem 2rem;
    background:linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(30, 30, 30, 0.95), rgba(0, 0, 0, 0.95) );
    border:1px solid rgb(40, 49, 53);
    border-radius:1rem;
    cursor:pointer;
    font-size:1.4rem;
    margin:2rem 0 0 50%; transform:translateX(-50%);
    color:#369ccf;
    font-family:"Euphorigenic";
}
#respond input[type="submit"]:hover { color:#ab71ee; }
.comment-form-cookies-consent { display:flex; }
.comment-form-cookies-consent input { flex:1; flex-grow:0; flex-shrink:0; flex-basis:1rem; margin:-.5rem .5rem 0 0; }
.comment-form-cookies-consent label { flex:1; }
.required-field-message { font-size:.9rem; display:block; }
.comment-reply-link::before { content:"▸ "; }
.comment-form-cookies-consent, .required-field-message, .comment-meta, .comment-reply-link { font-size:.9rem; }

.comment-author-psychydre .comment-body { border:1px solid rgba(28, 80, 94, 0.75); }



/* Le coin des Alters */

.mainAlterName { font-size:1.3rem; text-transform:capitalize; font-family:"Euphorigenic"; display:block; margin-top:1.5rem; }
.subAlterName { font-family:"Qlassik"; }
.subAlterName::before { content:"(+"; color:gray; }
.subAlterName::after { content:")"; color:gray; }

.alter { border-radius:1rem; padding:0; margin:0; }
.mainAlter { box-shadow:2px 2px 4px rgba(0, 0, 0, 0.5); border:1px solid black; margin-bottom:2rem; }
.alterContent { display:flex; padding:0 1.5rem 1rem 1rem; border-radius:1rem; margin:2px; box-shadow:inset 1px 1px 1px black; }
.alterAvatar img { flex:1; flex-grow:0; flex-shrink:0; flex-basis:65px; height:65px; margin:1rem 1.2rem 0 0; border-radius:.5rem; box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5); }

.alterText {
    flex:1; padding:1rem 0 0 0;
    font-family:"Magnisa"; color:rgb(243, 243, 243);
    font-weight:bold; font-size:1.1rem; 
}

.scar-main { background:rgba(11, 11, 24, 0.5); }
.subAlter.scar { background:linear-gradient(to left, rgba(9, 1, 29, 0.486) 0%, rgba(3, 0, 189, 0.25) 10%, transparent 35%); }
.mainAlterName-scar,.subAlterName-scar,.scar-content a { color:rgb(84, 22, 255); }

.kirlian-main { background:rgba(25, 25, 40, 0.75); }
.subAlter.kirlian { background:linear-gradient(to left, rgba(80, 120, 215, 0.5) 0%, transparent 35%); }
.mainAlterName-kirlian,.subAlterName-kirlian,.kirlian-content a { color:rgb(94, 139, 245); }

.evy-main { background:rgba(38, 53, 45, 0.75); }
.subAlter.evy { background:linear-gradient(to left, rgba(23, 90, 59, 0.75) 0%, transparent 35%); }
.mainAlterName-evy,.subAlterName-evy,.evy-content a { color:rgb(51, 248, 126); }

.kim-main { background:rgba(49, 39, 49, 0.75); }
.subAlter.kim { background:linear-gradient(to left, rgba(107, 59, 107, 0.75) 0%, transparent 35%); }
.mainAlterName-kim,.subAlterName-kim,.kim-content a { color:rgb(255, 125, 248); }

.adam-main { background:rgba(86, 255, 255, 0.05); }
.subAlter.adam { background:linear-gradient(to left, rgba(86, 255, 255, 0.25) 0%, transparent 35%); }
.mainAlterName-adam,.subAlterName-adam,.adam-content a { color:rgb(86, 255, 255); }

.timora-main { background:rgba(33, 37, 39, 0.75); }
.subAlter.timora { background:linear-gradient(to left, rgba(16, 16, 22, 0.75) 0%, rgba(32, 31, 39, 0.75) 10%, rgba(40, 38, 51, 0.6) 33%, transparent 50%); }
.mainAlterName-timora,.subAlterName-timora { color:rgb(148, 143, 155); }
.timora-content a { color:white; text-decoration:underline; }

.k-main { background:rgba(61, 61, 53, 0.75); }
.subAlter.k { background:linear-gradient(to left, rgba(122, 122, 118, 0.75) 0%, transparent 35%); }
.mainAlterName-k,.subAlterName-k,.k-content a { color:rgb(255, 255, 255); }
.k-content a { color:white; text-decoration:underline; }

.maya-main { background:rgba(250, 207, 66, 0.1); }
.subAlter.maya { background:linear-gradient(to left, rgba(250, 207, 66, 0.35) 0%, transparent 35%); }
.mainAlterName-maya,.subAlterName-maya,.maya-content a { color:rgb(250, 207, 66); }

.josy-main { background:rgba(44, 35, 29, 0.75); }
.subAlter.josy { background:linear-gradient(to left, rgba(247, 136, 63, 0.5) 0%, transparent 35%); }
.mainAlterName-josy,.subAlterName-josy,.josy-content a { color:rgb(247, 136, 63); }

.saya-main { background:rgba(255, 42, 42, 0.15); }
.subAlter.saya { background:linear-gradient(to left, rgba(61, 11, 11, 0.75) 0%, rgba(100, 22, 22, 0.75) 10%, transparent 35%); }
.mainAlterName-saya,.subAlterName-saya,.saya-content a { color:rgb(255, 50, 50); }

.gaia-main { background:rgba(29, 16, 32, 0.5); }
.subAlter.gaia { background:linear-gradient(to left, rgba(22, 1, 27, 0.75) 0%, rgba(53, 7, 63, 0.75) 10%, transparent 35%); }
.mainAlterName-gaia,.subAlterName-gaia,.gaia-content a { color:rgb(173, 37, 252); }

.ouranos-main { background:rgba(22, 14, 14, 0.5); }
.subAlter.ouranos { background:linear-gradient(to left, rgba(17, 1, 1, 0.75) 0%, rgba(26, 2, 2, 0.75) 10%, transparent 35%); }
.mainAlterName-ouranos,.subAlterName-ouranos,.ouranos-content a { color:rgb(180, 17, 17); }





@media screen and (orientation: landscape){
    #subPages, #breadcrumb { position:absolute; left:50%; transform:translate(-50%); width:725px; }
}
@media screen and (orientation: portrait){

    h1 { height:30%; width:100%; }
    main             { background-size:101%; width:100vw; }
    #posts           { width:98%; padding:0; }
    #post-content    { width:80%; margin:0 auto; }
    #posts h2, a     { color:#c86cec; }
    #posts h2        { padding:48vw 0 0 0; margin:0 auto; margin-bottom:2rem; font-size:7vw; width:75%; }
    #posts h3        { font-size:1.5rem; }
    #singlePostInfos { margin-top:2rem; }
    #singlePostInfos span, .postInfo span, .pubDate span { display:block; }
    
    .singlePostContent { font-size:1.4rem; }
    .singlePostContent h3, .singlePostContent h4, .singlePostContent h5 { text-align:center; }
    
    #subPages, #breadcrumb { width:90%; }
    
    blockquote { margin:1rem 0 1rem 0; padding:1rem 1rem 0 1rem; font-size:1.2rem; line-height:1.1rem; }
    .quoteAuthor { padding-top:1.2rem; }
    .video { width:100%; padding:0; }
    .post-content .alignleft, .post-content .alignright { display:block; transform:none; margin:0 auto; margin-bottom:1.5rem; }
    .post-thumb, .wp-post-image { height:75px; width:75px; }
    .excerpt-content { margin-top:3rem; }
    
    .video-link { font-size:.7rem; margin:0 0 1rem 0; }
    .lyricsBlock { padding:.3rem; margin:.5rem 0 .5rem 0; }
    .lyrics div { font-size:1rem; }
    
    .errorMessage { margin:2.5rem 0 0 0; }
    .alterAvatar img { flex-basis:50px; height:50px; margin-right:.75rem; }
    .alterContent { padding:0 .75rem .5rem .5rem; font-size:.8rem; }
    .alterText { font-size:1.1rem; }
    
}