:root {
    --background-color: #191919;
    --text-color: #cbcbcb;
    --title-color: #B02222;
    --title-color-hover: #f26b83;
    --sub-title-color: #e6cbcb;
    --download-color: #5e8a94;
    --download-color-hover: #6bdef2;
}

@font-face { font-family: Angelic; src: url(../font/NieR-Angelic-Regular.ttf); }
@font-face { font-family: Sigali; src: url(../css/font/Sigali-Script.ttf); }
@font-face { font-family: Mnicmp; src: url(../css/font/mnicmp/mnicmpSquare-Regular.otf); }


* { margin: 0; padding: 0; }

html { background-color: #0d0d0d; }

header { position: relative; margin: auto; }

h1 { color: var(--title-color); margin: 0.5em; font-size: 3em; margin-top: 1em; text-align: center; }
h1 a { color: #ff0022; text-shadow: 0 0 5px #ff0022, 0 0 10px #ff0022, 0 0 20px #ff0022, 0 0 40px #ff0022, 0 0 80px #ff0022; animation: flicker 3s infinite; text-decoration: none; font-family: Sigali; }

h2 { color: #6bdef2; font-size: 2.5em; font-family: monospace, 'Courier New', Courier; text-shadow: 0 0 2.5px #6bdef2, 0 0 5px #6bdef2, 0 0 10px #6bdef2, 0 0 20px #6bdef2, 0 0 40px #6bdef2; }

h2 span:first-child { animation: flicker 4s infinite; }
h2 span { animation: flicker 5s infinite; }

h3 { font-family: monospace, 'Courier New', Courier; color: #5e8a94; display: table; max-width: 100%; z-index: 2; top: 247px; position: relative; margin: auto; background-color: #0d0d0d; border: 4px solid #0d0d0d; font-size: 0.9em; }

p { font-family: monospace, 'Courier New', Courier; color: #5e8a94; font-size: 0.8em; text-align: justify; }
p a { text-decoration: underline !important; }


/*
p:not(.persona figure p) { color: var(--text-color); font-size: 1.2em; text-align: justify; margin: 0 10px; padding: 0 14px 0 10px; border-left: 4px solid var(--sub-title-color);}*/

main.card_list { text-align: center; max-width: 40em; margin: auto; margin-top: -50px; }
main.card_list a { color: var(--download-color); text-decoration: none; }
main.card_list a:hover { color: var(--download-color-hover); }

article.section { padding: 1em; margin-top: 5em; }
article.subsection { margin-top: 15em;}
article.card { margin: 10px; display: block; width: auto; display: inline-block; max-width: 100%;}
article.card figure img { max-width: 10em; }

.card figure input.information { all: unset; display: none; width: 100%; height: auto; background: none; border: none; padding: 0; margin: 0; font: inherit; }
.card figure:hover img:first-child { opacity: 10%; filter: blur(5px); }
.card figure:hover input.information { display: block; position: absolute; top: 15px; width: 9em; right: 5px; cursor: pointer; font-family: sans-serif; border: #5e8a94 3px dashed; padding-top: 2px; text-shadow: none; }
.card figure a.download { display: none; }
.card figure:hover a.download { display: block; position: absolute; top: 190px; width: 9em; right: 5px; cursor: pointer; font-family: sans-serif; border: #5e8a94 3px dashed; padding-top: 2px; text-shadow: none; z-index: 9; }
.card figure div:hover, .card figure a:hover, .card figure input:hover { color: #6bdef2; text-shadow: 0 0 2.5px #6bdef2, 0 0 5px #6bdef2, 0 0 10px #6bdef2, 0 0 20px #6bdef2, 0 0 40px #6bdef2 !important; }
/*figure a.expressions { display: none; }*/
.card figure a.expressions { display: none; }
.card figure:hover a.expressions { display: block; position: absolute; border: #5e8a94 3px dashed; top: 133px; right: 5px; font-size: 2em; font-family: Arial, Helvetica, sans-serif; text-shadow: none; line-height: 0.9; text-align: center; padding-bottom: 5px; width: 33px; height: 26px; }

figure p.version { display: none; }
.card figure:hover p.version { display: block; position: absolute; top: 178px; right: 5px; cursor: pointer; font-family: sans-serif; padding: 2px; text-shadow: none; z-index: 9; font-size: 0.5em; border-bottom: none; }
footer { z-index: 10; }
footer .bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #0d0d0d; height: 20px; background: #0d0d0d; border: 1px solid #5e8a94; box-shadow: 0 0 4px #5e8a94; overflow: hidden; border-left: none; z-index: 10; }
footer .progress { width: 0%; height: 100%; background: linear-gradient(90deg, #5e8a94, #7ca6af); box-shadow: 0 0 6px #5e8a94, 0 0 10px #7ca6af; animation: hueShift 3s infinite ease-in-out; z-index: 10; }
footer .progress-text { position: absolute; width: 100%; text-align: center; top: 0; color: #0d0d0d; text-shadow: 0 0 1px #5e8a94, 0 0 1px #5e8a94; font-size: 0.85rem; line-height: 20px; font-family: Sigali; pointer-events: none; font-weight: bold; z-index: 10; }

@keyframes hueShift {
  0%   { filter: hue-rotate(0deg);   opacity: 1; }
  50%  { filter: hue-rotate(20deg);  opacity: 0.9; }
  100% { filter: hue-rotate(0deg);   opacity: 1; }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.3; }
  22% { opacity: 0.6; }
  57% { opacity: 0.1; }
}


figure {
  position: relative;
  display: inline-block;
  margin: 0; /* opzionale, per evitare margini predefiniti */
}

/* L normale in basso a sinistra */
.card figure:hover::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -1px;
  width: 20px;
  height: 20px;

  background:
    linear-gradient(to right, #5e8a94 20px, transparent 0) 0 100% / 20px 3px no-repeat,
    linear-gradient(to bottom, #5e8a94 20px, transparent 0) 0 100% / 3px 20px no-repeat;
}

/* L rovesciata in alto a destra */
.card figure:hover::after {
  content: "";
  position: absolute;
  top: 15px;
  right: -25px;
  width: 20px;
  height: 20px;

  background:
    linear-gradient(to right, #5e8a94 20px, transparent 0) 0 100% / 20px 3px no-repeat,
    linear-gradient(to bottom, #5e8a94 20px, transparent 0) 0 100% / 3px 20px no-repeat;

  transform: rotate(180deg);
  transform-origin: top left;
}

article .card:hover {
  color: #5e8a94; font-family: monospace, 'Courier New', Courier; text-shadow: 0 0 1.25px #5e8a94, 0 0 2.5px #5e8a94, 0 0 5px #5e8a94, 0 0 10px #5e8a94, 0 0 20px #5e8a94;
}

.window {
  width: 300px;
  height: 200px;
  background: #0ff;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.6s ease-out;
  box-shadow: 0 0 20px #0ff;
}
.open {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

button { z-index: 100; top:-50px; position:relative; }

/* CSS PER LA PAGINA DEDICATA ALLE CARTE */
.card_details { position: relative; max-width: 800px; margin: auto; min-width: 550px; margin-bottom: 50px; }
.card_details h2 { text-align: center; background-color: #6bdef2; text-shadow: none; color:#0d0d0d; font-family: Mnicmp; font-size: 2em; width: 9em; max-height: 30px; line-height: 42px; }
.card_details div { background-color: #5e8a94; margin: auto; max-width: 800px; }
.card_details p { color: #0d0d0d; font-family: Mnicmp; font-size: 1.4em; text-align: left; }
.card_details article div.information div.generalities { margin-top: 40px; position: relative; width: calc(100% - 300px); display: inline-block; }
.card_details p.first_name { position: relative; text-transform: uppercase; }
.card_details p.first_name::before { content: "FIRST NAME: "; }
.card_details p.last_name { position: relative; text-transform: uppercase; }
.card_details p.last_name::before { content: "LAST NAME: "; }
.card_details p.age { position: absolute; top: 0; right: 25px; }
.card_details p.age::before { content: "AGE: "; }
.card_details p.sex { position: absolute; top: 26px; right: 25px; text-transform: uppercase; }
.card_details p.sex::before { content: "SEX: "; }
.card_details p.paraphilia { position: relative; text-transform: uppercase; display: inline-block; white-space: break-spaces; max-width: calc(100% - 310px); }
.card_details p.paraphilia::before { content: "PARAPHILIAS: "; }
.card_details p.snuff { position: relative; text-transform: uppercase; display: inline-block; white-space: break-spaces; max-width: calc(100% - 310px); }
.card_details p.snuff::before { content: "CAUSE OF DEATH: "; }
.card_details p.unknow:not(li p) { background-color: #0d0d0d; user-select: none; display: inline-block; }
.card_details p.unknow { background-color: #0d0d0d; user-select: none; }
.card_details div.information figure { float: left; }
.card_details div.information figure img { max-height: 20em; margin: 30px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); margin-bottom: 15px; }
.card_details p.description { margin-top: 20px; margin-left: 29px; margin-right: 23px; }
.card_details p.pre_greetings { clear: both; margin-left: 27px; }

.card_details ol.greetings { margin-top: 10px; padding-bottom: 20px; list-style: none; counter-reset: letter-counter; padding-left: 1.2em; }
.card_details ol.greetings li { counter-increment: letter-counter; position: relative; padding-left: 1.2em; font-family: Sigali; max-width: 732px; }
.card_details ol.greetings li::before { content: counter(letter-counter, lower-alpha); position: absolute; left: -7px; font-size: 1.5em; }

.card_details hr { border: none; border-top: 4px dashed #0d0d0d; margin: 1em 0; margin-right: 30px; }

.card_details a.close { text-align: center; background-color: #6bdef2; text-shadow: none; color:#0d0d0d; font-family: Mnicmp; font-size: 2em; width: 1em; height: 30px; line-height: 42px; position: absolute; text-decoration: none; top: 0px; right: 0px; }

.card_details a.versions { text-decoration: none; color: #0d0d0d; background-color: #6bdef2; font-family: Mnicmp; transform:rotate(90deg); display: inline-block; position: absolute; top: 80px; right: -49px; padding: 5px; padding-bottom: 0; }

.card_details a.expressions { text-decoration: none; color: #0d0d0d; background-color: #6bdef2; font-family: Mnicmp; transform:rotate(90deg); display: inline-block; position: absolute; top: 290px; right: -58px; padding: 5px; padding-bottom: 0; }

.card_details a.gallery { text-decoration: none; color: #0d0d0d; background-color: #6bdef2; font-family: Mnicmp; transform:rotate(90deg); display: inline-block; position: absolute; top: 180px; right: -39px; padding: 5px; padding-bottom: 0; }

.card_details a.return_information { text-decoration: none; color: #0d0d0d; background-color: #6bdef2; font-family: Mnicmp; transform:rotate(90deg); display: inline-block; position: absolute; top: 90px; right: -58px; padding: 5px; padding-bottom: 0; }

.card_details div.expressions_list { text-align: center; }
.card_details div.expressions_list figure { float: none; }
.card_details div.expressions_list figure img { max-height: 15em; }
.card_details div.expressions_list figcaption { color: #0d0d0d; font-family: Mnicmp; font-size: 1.4em; text-transform: uppercase; position: relative; background-color:#5e8a94; top: -266px; display: block; max-width: fit-content; line-height: 11px; padding-left: 5px; padding-right: 5px; margin: auto; }

.card_details div.downloads_list { text-align: center; }
.card_details div.downloads_list figure { float: none; }
.card_details div.downloads_list figure img { max-height: 15em; }
.card_details div.downloads_list figcaption { color: #0d0d0d; font-family: Mnicmp; font-size: 1.4em; text-transform: uppercase; position: relative; background-color:#5e8a94; display: block; max-width: fit-content; line-height: 11px; padding-left: 5px; padding-right: 5px; margin: auto; }
.card_details div.downloads_list ul { list-style-type: none; padding-left: 0; margin-left: 0; margin-top: 10px; }
.card_details div.downloads_list ul li a { text-decoration: none; color: #0d0d0d; font-family: Mnicmp; font-size: 1.0em; text-transform: uppercase;}

.card_details div.downloads_list ul li a:hover { text-decoration: none; color: #0d0d0d; text-shadow: 2px 2px 4px#0d0d0d;}
.card_details div.downloads_list ul li a:hover::after { content: " = "; }
.card_details div.downloads_list ul li a:hover::before { content: " = "; }


@media (max-width: 827px) {
  .card_details div.information figure { width: 100%; text-align: center; }
  .card_details div.information div.generalities { width: 100% !important; margin-top: 10px !important; }
  .card_details div.information p.first_name { margin-left: 10px; }
  .card_details div.information p.last_name  { margin-left: 10px; }
  .card_details div.information p.paraphilia { max-width: 100%; margin-left: 10px; margin-right: 10px; }
  .card_details div.information p.snuff { max-width: 100%; margin-left: 10px; margin-right: 10px; }
  .card_details div.information ol.greetings { max-width: 100%; margin-right: 20px; }
  .card_details div.information a.versions    { transform: none; position: relative; top: 10px; font-size: 1.5em; margin: 0; }
  .card_details div.information a.expressions { transform: none; position: relative; top: 10px; font-size: 1.5em;margin-left: 20px; }
  .card_details div.information a.gallery     { transform: none; position: relative; top: 10px; font-size: 1.5em;margin-left: 50px; }
}