/* Copyleft 2024 Kawa-Team - Version 0.1.0
 * This is a free work, you can copy, distribute, and modify it under the
 * terms of the Free Art License https://artlibre.org/licence/lal/en/ */
:root {
  --black: #1a1a1a;
  --grey-0: #262626;
  --grey-1: #333;
  --grey-2: #4d4d4d;
  --grey-3: #666;
  --grey-4: #999;
  --grey-5: #ccc;
  --white: #e2e2e2;
  --blue: #66f3ff;
  --cyan: #66ffda;
  --green: #9cff80;
  --magenta: #ffb3fb;
  --maroon: #ffccb3;
  --orange: #ffaf66;
  --red: #ff6666;
  --yellow: #ffe280;
  --dark-blue: #5cdbe6;
  --dark-cyan: #5ce6c4;
  --dark-green: #8ce673;
  --dark-magenta: #e6a1e2;
  --dark-maroon: #e6b8a1;
  --dark-orange: #e69d5c;
  --dark-red: #e65c5c;
  --dark-yellow: #e6cb73;
  --shadow: rgba(26,26,26,0.8);
}

*,*:before,*:after{box-sizing:border-box}
html{line-height:1.4;background:var(--grey-1);color:var(--white)}
body{max-width:50em;margin:0 auto;padding:1em}
body.larger{max-width:70em}

h1{color:var(--blue);text-align:center}
h2{color:var(--cyan);border-bottom:0.1em solid var(--cyan);text-decoration: none;}
h3{color:var(--magenta)}
a{color:var(--green)}
caption{padding:0.2em;font-weight:bold}
small{color:var(--grey-5)}
blockquote{padding:1em;border-left:0.4em dotted var(--grey-4);}
/*code,kbd,samp,tt,var{color:var(--yellow)}*/
footer{display:flex;flex-direction:column;gap:0.4em}
hr{border-color:var(--grey-4)}
p{padding:0.3em 0;text-align:justify;}
pre{padding:0.6em;background:var(--black);overflow:auto}
ul{list-style:inside}
img{max-width:100%}

fieldset{display:flex;padding:0.6em 1em 1em}
form{display:flex}
fieldset,form{flex-direction:column}
fieldset>div,form>div{display:flex;margin:0.4em;gap:1em}
label{display:inline-block;width:12em;color:var(--grey-5);font-weight:bold;text-align:right}
textarea{font:inherit;resize:vertical}
input,label,select,textarea{padding:0.5em}
input,select,textarea{background:var(--grey-0);border:0.1em solid var(--black);color:var(--white)}
input:invalid,select:invalid,textarea:invalid{border-color:var(--red)}
input[type="reset"],input[type="submit"]{padding:1em}
input[type="reset"]:hover,input[type="submit"]:hover,select:hover{background:var(--grey-1);cursor:pointer;text-decoration:underline}

figure{display:flex;flex-direction:column;align-items:center}
figure audio,figure img,figure video{width:100%;max-width:50em;max-height:30em;box-shadow:0 0 0.6em var(--shadow)}
figcaption{font-style:oblique}
legend{font-weight:bold}

table{width:100%;color:var(--white);border:0.15em solid var(--grey-4);border-radius:0.2em}
tbody,td{background:var(--grey-2)}
thead,th,tfoot{background:var(--grey-0)}
td,th{padding:0.2em}

nav.grid ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1em;list-style:none}
nav.grid img{display:block;box-shadow:0 0 0.6em var(--shadow);background:var(--white)}
nav.navbar ul{display:flex;margin:0 auto 1em;padding:0.3em;align-items:center;background:var(--black);list-style:none;gap:0.6em}
nav.navbar.center ul{justify-content:center}
nav.navbar.right ul{justify-content:right}
nav.navbar.transparent ul{background:none}
nav.navbar a{display:block;padding:0.4em;text-decoration: none;}
nav.navbar.active {color: #C7FFB8}
nav.navbar li.logo{display:flex}
nav.navbar li.logo a{display:flex;align-items:center;gap:0.6em}
nav.navbar li.logo img{max-height:1.8em}
nav.pagination ul{display:flex;align-items:center;text-align:center;list-style:none}
nav.pagination a{display:block;margin:0.4em 1em}
nav.pagination a.disabled,nav.pagination a.disabled:hover{color:var(--grey-4)}
nav.pagination a.disabled:hover{background:none}

aside.card{display:flex;padding:0.6em;align-items:center;gap:1em}
aside.alert{display:flex;flex-direction:column}
aside.alert>*{padding: 0.3em 0.6em}
aside.alert .header{color:var(--black)}
aside.alert.error .header{background:var(--red)}
aside.alert.error{border-color:var(--red)}
aside.alert.info .header{background:var(--blue)}
aside.alert.info{border-color:var(--blue)}
aside.alert.warning .header{background:var(--yellow)}
aside.alert.warning{border-color:var(--yellow)}

aside.alert,aside.card,fieldset,pre{margin-bottom:1em;border:0.15em solid var(--grey-4);color:var(--white);border-radius:0.2em}
aside.alert,aside.card,fieldset{background:var(--grey-2)}

.center, .align-center{text-align:center}
.right{text-align:right}
.flex-center{justify-content:center}
.flex-right{justify-content:right}
.flex-expand{flex:1}

header h1 {
  text-align: left;
}
.maintitle{color: #C7FFB8}

@media screen and (max-width:600px){
nav.navbar,nav.navbar ul,nav.pagination ul{display:block}
form>div,fieldset>div{flex-direction:column;gap:0.2em}
form label{text-align:left}
}