* {
  box-sizing: border-box;
  margin: 0;
}
img {
	max-width: 100%;
}
pre {
  width:80%;
  max-width:45em;
  overflow:auto;
}
@font-face {
    font-family: 'RocknRoll One';
    src: url('../fonts/RocknRollOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html {
  background: #353535;
  color: var(--white);
  scroll-behavior:smooth;
  text-wrap: pretty;
}
/* var() */
:root {
  --red: #e48482;
  --green: #73bfa2;
  --purple: #848fc1;
  --lime_green: #beea75;
  --pink: #e4899e;
  --orange: #eba870;
  --yellow: #e0db79;
  --blue: #8dabcf;
  --white: beige;
  --kakin: #d0d6ae;
  --darkgray: #4c5a58;
  --gradientH: var(--red) 0 100px, var(--green) 100px 200px,
    var(--purple) 200px 300px, var(--lime_green) 300px 400px,
    var(--pink) 400px 500px, var(--orange) 500px 600px,
    var(--yellow) 600px 700px, var(--blue) 700px 800px,
    var(--kakin) 800px 900px, var(--darkgray) 900px 1000px;
  --gradientV: var(--red) 0 150px, var(--green) 150px 300px,
    var(--purple) 300px 450px, var(--lime_green) 450px 600px,
    var(--pink) 600px 750px, var(--orange) 750px 900px,
    var(--yellow) 900px 1050px, var(--blue) 1050px 1200px,
    var(--kakin) 1200px 1350px, var(--darkgray) 1350px 1500px;
}

/* layouts */
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  grid-auto-flow: row dense;
  margin-inline: auto;
}
.post.single {
  grid-column: 1/-1;
  max-width: max(45em,80%);
  padding: 1.25em clamp(1em, calc(25vw - 150px), 2000px);
  line-height: 1.7;
  margin: 1em auto;
}
.post,
aside>div{
  padding: 1.25em;
  display: grid;
  place-content: center;
  min-height: 400px;
  min-width:400px;
}

/* colors */
body {
  background: repeating-linear-gradient(to left, var(--gradientH)) 0 5px / auto
      5px repeat-x,
    repeating-linear-gradient(to bottom, var(--gradientV)) calc(100% - 5px) 0 /
      5px auto repeat-y #353535;
  padding: 15px 15px 0 0;
}
body.mode-article {
	background-color:var(--white);
}
.post,
aside>div,
.pagination{
  --deg:125deg;
  --bg:var(--darkgray);
  background-color:var(--bg);
  background-image: 
    linear-gradient(var(--deg),oklch(from var(--bg) l c h ) 50%,#fff0),
    radial-gradient(oklch(from var(--bg) calc(l + 0.1) c h / .25) 20%, transparent 0), 
    radial-gradient(oklch(from var(--bg) calc(l + 0.1) c h / .25), 20%, transparent 0);
   background-size:100% 100%, 20px 20px,  20px 20px;
  background-position:0 0, 0 0, 10px 10px;
  color:oklch(from var(--white) calc(l + 0.25) c h);   
  outline: solid 1px oklch(from var(--bg) calc(l + 0.1) c h / .5);
  outline-offset:-.5em;
  
  &:nth-child(10n + 2) {
    --deg:-125deg
  }
  &:nth-child(10n + 3 ) {
    --deg:65deg
  }
  &:nth-child(10n + 4) {
    --deg:-65deg
  }
  &:nth-child(10n + 5) {
    --deg:-25deg
  }
  &:nth-child(10n + 6) {
    --deg:25deg
  }
  &:nth-child(10n + 7) {
    --deg:-215deg
  }
  &:nth-child(10n + 8) {
    --deg:215deg
  }
  &:nth-child(10n + 9) {
    --deg:-325deg
  }
  &:nth-child(10n) {
    --deg:325deg
  }
  .date {
    padding-block:.75em;
    color:oklch(from var(--bg) calc(l + 0.25) c h);
  }
  &:is(:hover,:focus,:focus-within) {
  position: relative;
    background-color: oklch(from var(--bg) calc(l - 0.15) c h);
    color:oklch(from var(--bg) calc(l + 0.25) c h);
  background-image: 
    linear-gradient(var(--deg),oklch(from var(--bg) calc(l - 0.15) c h ) 50%,#fff0),
    radial-gradient(oklch(from var(--bg) calc(l + 0.05) c h / .25) 20%, transparent 0), 
    radial-gradient(oklch(from var(--bg) calc(l + 0.05) c h / .25), 20%, transparent 0);
    .date {
      color:oklch(from var(--bg) calc(l + .5) c h);
    }
  }
}
.red {
  --bg:var(--red)
}
.green {
  --bg:var(--green)
}
.purple {
  --bg:var(--purple)
}
.lime_green {
  --bg:var(--lime_green)
}
.pink {
  --bg:var(--pink)
}
.green {
  --bg:var(--green)
}
.orange {
  --bg:var(--orange)
}
.yellow {
  --bg:var(--yellow)
}
.blue {
  --bg:var(--blue)
}
.kakin {
  --bg:var(--kakin)
}
.darkgray {
  --bg:var(--darkgray)
}


.repertory.breadcrumb {
  color: var(--pink);
  display: flex;
  gap: .5em;
  list-style: none;
  padding: 1em 0;
  justify-content: center;
  margin: 0 0 2em;
  font-size: 1.1em;
  border-block:dotted 1px var(--white)
}
.repertory.breadcrumb li:last-child {
  color:var(--lime_green);
}
.repertory.breadcrumb li + li::before {
  content:'/ ';
  color:var(--white);
}

body {
  font-family: "RocknRoll One", sans-serif;
  padding-left:240px;
  position:relative;
   opacity: 1;
  transition: opacity 1.5s .5s ease;
  @starting-style {
    opacity: 0;
  }
}
h1 a ,
.post a {
  color:inherit;
  text-transform:capitalize;
}
#header:hover a ,article.post:hover a {
  text-decoration:underline dotted 1px;
} 

#header, #footer {background:#444;color:ivory;padding:2em;font-size:2em;clear:both;grid-column:1/-1;text-align:center;}
#header {
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-between;
}
footer a {
  display:inline;
  color:inherit;
  text-decoration:underline;
  }
nav.pagination:empty{display:none;}
nav.pagination {
  grid-column-end: -1;
  min-heght:400px;
  min-height:400px;
  display:grid;
  place-content:center;
  text-align:center;
}
nav.pagination a {
  color:#E58D43;
  font-size:1.5em;
}
nav.pagination a:hover {
  color:var(--orange);
}
nav :is(.p_first,.p_last) a {
  font-size:2em;
}
a {display:block;text-decoration:none;min-width:100%;}
.sr-only {
  position:absolute;
  right:100vw;
}
.read_length {
  white-space:nowrap;
}
label {display:block;}
.nav {
  position: absolute;
  width: 240px;
  display: block;
  background: #3a4043;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  color: var(--white);
  overflow:auto;  
  scrollbar-color: var(--white) var(--orange);
  scrollbar-width: thin;
}
.nav {
  position: fixed;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: clamp(20px,1.6em,30px);
  overflow: auto;
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  margin: 0;
  padding: 0;
  transition: 0.25s;
}
.nav li, .nav li.menu {
  position:static;
  height: auto;
  width:100%;
}
.nav a {
  color: inherit;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 800;
  display: block;
  padding: 10px 0;
}
.nav .active a {
  opacity: 1;
}
.nav .active:hover a{
  opacity: 0.7;
}
.nav li a{
  opacity: 0.55;
}
.nav li:hover a{
  opacity: 0.7;
  text-decoration:underline dotted 1px;
}
div.menu {
  display: none;
  position: fixed;
  top: 25px;
  left: 1.5em;
  width: 24px;
  height: 24px;
  z-index: 10;
}

/* destruct .menu>span.static>.sub-menu structure */
.menu li:has(ul), 
li.menu ul {
  display:contents;
}
span.static.group {
  display:none;
}
/* ** */

.menu:hover .menu-hamburger:before,
.menu:hover .menu-hamburger:after {
  width: 24px;
}
.menu-hamburger {
  cursor: pointer;
  display:grid;
  position: relative;
  z-index:15;
  width: 24px;
  height: 4px;
  margin: 10px 0;
  background: #fff;
  border-radius: 4px;
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.menu-hamburger i{/*makes the label fully clickable */
  display:block;
  margin-block:-8px;
  background:#444444;
  mix-blend-mode:screen;
  scale:1.6;
  border-radius:3px;

}
.menu-hamburger:before, .menu-hamburger:after {
  content: "";
  display: block;
  width: 24px;
  height: 4px;
  background: #fff;
  position: absolute;
  border-radius: 4px;
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu-hamburger:before {
  top: -8px;
  left: 0;
  width: 22px;
}
.menu-hamburger:after {
  top: 8px;
  width: 16px;
  left: 0;
}


@media screen and (max-width: 980px) {
  body {
    padding-left:0;
  }
  div.menu {
    display: block;
  }
  .nav {
    z-index: 2;
    transform: translateX(-240px);
    transition:.15s;
  }
  body:has(.menu #menu:checked) .nav,
  .nav:focus-within{
    transform: translateX(0px);
  }
  body:has(.menu #menu:checked) label[for="menu"] {
    transform: translateX(240px);
  }

body:has(.menu #menu:checked) .menu-hamburger {
  background: none;
}
body:has(.menu #menu:checked) .menu-hamburger:before,
body:has(.menu #menu:checked) .menu-hamburger:after {
  top: 0;
  width: 24px;
  transform: rotate(45deg);
}
body:has(.menu #menu:checked) .menu-hamburger:after {
  transform: rotate(-45deg);
}
body:has(.menu #menu:checked) .menu-hamburger:hover {
  transform: scale(1.2) translateX(200px);
}

}

article header,
article header div,
article footer p{
  display:flex;
  flex-wrap:wrap;
  gap:1em;
  margin:2.4em;
}
article header + img {
  display: block;
  margin:1em  auto 2.4em;
}
article header div {
  margin:0;
  flex:1;
  align-items:center;
  justify-content:flex-end;
}
article footer > p,
.author-infos{
  justify-content: space-between;
  background:linear-gradient(to left,#3334, transparent, #fff7);
  padding:.5em;
  margin:1em;
}
.author-infos p {
  display: block;
}
#form {
  max-width: 30em;
  margin: auto;
}
#form, #form> :not(:has(#id_rep)) {
  max-width:100%;
  display: grid;
  gap:.25em;
  text-align: center;
}
p:has(#id_rep) {
  background:#fff5;
  padding: .2em;
}
#form textarea{
  resize: vertical;
}
#form input {
  width:18em;
  margin:auto;
}
#form [type="submit"] {
  background:var(--purple);
  color:var(--white);
  font-size: 1.25em;
  padding:.5em 1em;
  border:solid 2px;
  border-radius:8px;
  margin-block: 2em;
}

.feed {
  padding: 1em;
  text-align: center;
}

#error {
  padding:1em;
  text-align:center;
  box-shadow:inset 5px 5px
}
.error {
  padding-block: 1em;
}

aside {
  display:contents;
}
aside div {
  grid-template-rows: auto 1fr;
  place-content:initial;
  margin:5px 2.5px 0 2.5px;
  box-shadow: 0 0 0 5px;
}
aside h3 {padding: 1em ;}
aside ul {display:grid;grid-template-columns:auto auto;padding-start:.5em;margin-block:auto;}
aside ul.tag-list {display:flex;flex-wrap:wrap;gap:1em;}
aside li {display:inherit;grid-template-columns:2.5em 1fr;gap:.5em;line-height:1.6em;text-align:end;}
aside ul:is(.lastart-list,.lastcom-list) li {grid-column:1/-1;grid-template-columns:auto auto 1fr;margin-bottom:1em;}
aside li a {order:1;text-align:start;color:oklch(from var(--darkgray) calc(l + 0.85) c h / .7);}
aside li a:is(:hover,:focus) {color:oklch(from var(--white) calc(l + 0.2) c h);outline-color:currentColor;}
aside .tag-list a {border:solid 1px;border-radius:5px;padding:0 0.5em;box-sizing:border-box;background:#fff2}
cite {color:  oklch(from var(--pink) calc(l - 0.15) c h); font-size: 1.4em;}

body>footer{background:#3a4043;margin-top:5px}

@media (max-width:420px) {
  body {
    font-size:80%;
  }
  aside ul {
    padding-bottom:1.2em;
  }
}


/* extra fontawesome custom */
.fa-solid.fa-circle-chevron-up {
  -webkit-text-stroke: 1px #0005;
}


/* extra plugins */
form.kzSkinSelect {
  translate: 0 -100%;
}
a.scrollToTop {
  right: auto;
  left:30px;
  z-index:4;
}