/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Colors */
:root {
  --fic-color: #ffb0b4;
  --box-color: #f7fafa;

  /* Tema claro */
  --bg-color: #ffffff;
  --text-color: #222222;
  --button-bg: #222222;
  --button-text: #ffffff;
  --transition: .3s ease;
}

/* Tema oscuro */
.dark-mode {
  --fic-color: #ffb0b4;
  --box-color: #1e1e1e;
  --bg-color: #111;
  --text-color: #fff;
  --button-bg: #f5f5f5;
  --button-text: #121212;
}

/* Fonts */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('https://akxminarchive.neocities.org/resources/fonts/AtkinsonHyperlegible-Regular.ttf');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('https://akxminarchive.neocities.org/resources/fonts/AtkinsonHyperlegible-Bold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('https://akxminarchive.neocities.org/resources/fonts/AtkinsonHyperlegible-BoldItalic.ttf');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('https://akxminarchive.neocities.org/resources/fonts/AtkinsonHyperlegible-Italic.ttf');
  font-style: italic;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 90%;
  max-width: 900px;
  margin: auto;
  box-sizing: border-box;
  text-align: justify;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding:50px;
}

/* For devices larger than 400px */
@media only screen and (max-width: 900px) {
  .flex {
    flex-wrap: wrap;
    padding: 0 20px;
    width: 90%;
  }

  aside {
    width: 100%;
  }

  /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
  main {
    order: 1;
  }

  .leftSidebar {
    order: 2;
  }

  .rightSidebar {
    order: 3;
  }

  .navbar ul {
    flex-wrap: wrap;
  }
}

@media (min-width: 400px) {
  .container {
    width: 90%;
    padding: 0;
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 90%;
  }

  .column,
  .columns {
    margin-left: 4%;
  }

  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns {
    width: 4.66666666667%;
  }

  .two.columns {
    width: 13.3333333333%;
  }

  .three.columns {
    width: 22%;
  }

  .four.columns {
    width: 30.6666666667%;
  }

  .five.columns {
    width: 39.3333333333%;
  }

  .six.columns {
    width: 48%;
  }

  .seven.columns {
    width: 56.6666666667%;
  }

  .eight.columns {
    width: 65.3333333333%;
  }

  .nine.columns {
    width: 74.0%;
  }

  .ten.columns {
    width: 82.6666666667%;
  }

  .eleven.columns {
    width: 91.3333333333%;
  }

  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }

  .one-third.column {
    width: 30.6666666667%;
  }

  .two-thirds.column {
    width: 65.3333333333%;
  }

  .one-half.column {
    width: 48%;
  }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%;
  }

  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333333333%;
  }

  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%;
  }

  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333333333%;
  }

  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%;
  }

  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }

  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78.0%;
  }

  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }

  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }

  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%;
  }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%;
}

*::selection {
  background-color: var(--fic-color);
  color: white;
}

body {
  font-size: 1.7em;
  line-height: 1.3;
  font-weight: 400;
  font-family: 'Atkinson Hyperlegible', "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body {
  background: var(--bg-color);
  color: var(--text-color);
  transition:
    background var(--transition),
    color var(--transition);
}

/* prova */

.message {
  text-align: center
}

.meta h2 {
  page-break-before: always
}

.meta .byline {
  text-align: center
}

.meta dl.tags {
  border: 3px solid var(--fic-color);
  padding: 1rem 2rem 5rem;
  text-align: left;
}

.meta dd {
  margin: -1em 0 0 10em
}

.meta .endnote-link {
  font-size: .8em
}

#chapt {
  padding: 1em
}

.userstuff {
  padding: 0.5rem;
}

.toc-heading {
  display: none
}

.story {
  text-indent: 20px
}

dl.meta {
  border: 1px solid #ccc;
  clear: right;
  padding: 1.286em .75em;
  position: relative;
  overflow: hidden
}

.meta dt {
  min-width: 10.5em;
  width: 25%;
  /*! float:left; */
  clear: left;
  padding-top: 1.5rem;
}

.meta dd {
  width: 100%;
  float: left;
  margin: 0 0 .3em
}

.meta .stats dl {
  float: left;
  margin-top: 0
}

.meta .stats dl dd,
.meta .stats dl dt {
  margin: 0 .375em auto 0;
  width: auto;
  min-width: 0;
  clear: none;
  float: left
}

.meta .stats dl,
.meta .stats dl dt:first-child,
dl.meta dd ul li:first-child {
  padding-left: 0
}

.meta p {
  display: block;
  margin-top: 0
}

.meta dd ul li {
  display: inline;
  margin: auto
}

.meta dd blockquote {
  margin: 0
}

.dashboard .meta .clear {
  clear: none;
  clear: right
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
  line-height: 100%
}

h1 {
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: .1rem;
  text-align: center;
}

h2 {
  font-size: 2.6rem;
  line-height: 1.25;
  letter-spacing: .1rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: .2rem;
  color: var(--fic-color);
  border-bottom: 1px solid var(--fic-color);
  padding-bottom: 5px;
  font-weight: bold;
}

h4 {
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: .08rem;
}

h5 {
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: .05rem;
}

h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {
    font-size: 4.0rem;
  }

  h2 {
    font-size: 2.6rem;
  }

  h3 {
    font-size: 2.2rem;
  }

  h4 {
    font-size: 3.0rem;
  }

  h5 {
    font-size: 2.4rem;
  }

  h6 {
    font-size: 1.5rem;
  }
}

p {
  margin-top: 0;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: var(--text-color);
  text-decoration: none;
  box-shadow: inset 0 -0.8px 0 var(--fic-color), 0 1px 0 var(--fic-color);
  transition: box-shadow .3s;
  overflow: hidden;
  padding: 0px 4px 0px;
}

a:hover {
  box-shadow: inset 0 -30px 0 var(--fic-color), 0 2px 0 var(--fic-color);
}

.container a::before {
  content: "#";
  margin-right: 0.3%;
}

.container a {
  font-weight: bold;
}

.main h3 a {
  margin-right: 0.5%;
  box-shadow: inset 0 -30px 0 var(--fic-color), 0 2px 0 var(--fic-color);
}

.main h3 a:hover,
.main h3 a::before {
  box-shadow: none;
  content: none;
  margin-right: 0.5%;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0;
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0;
}

label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
}

label>.label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal;
}


/* Header 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.header {
  width: 100%;
  font-size: 3.4rem;
  /*background-color: #;
 height: 150px;*/
  /* this is only for a background image! */
  /* if you want to put images IN the header,
 you can add them directly to the <div class="header"></div> element! */
  letter-spacing: 0.4rem;
  text-align: center;
  padding-top: 4rem;
  font-weight: bold;
}

/* Navbar 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar {
  height: auto;
  /* background-color: #; */
  width: 100%;
  font-weight: bold;
  text-align: center;
  background-color: var(--box-color);
  margin-bottom: 3rem;
  background: var(--box-color);
  transition: background var(--transition);
}

.navbar ul {
  display: flex;
  padding: 0rem;
  margin: 4rem 20%;
  list-style-type: none;
  justify-content: space-evenly;
  flex: 0 0 auto;
  width: auto;
}


.navbar li {
  padding-top: 10px;
}

.navbar a::before {
  content: none;
}


/* Sidebar 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.flex {
  display: flex;
}

/* this colors BOTH sidebars
 if you want to style them separately,
 create styles for .leftSidebar and .rightSidebar */
aside {
  width: 100rem;
  padding-top: 2rem;
  padding-left: 20px;
  padding-right: 20px;
  font-size: smaller;
}

.leftSidebar img {
  max-width: 80%;
  max-height: inherit;
  height: inherit;
  width: inherit;
}

/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 0px;
}

/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  columns: 1;
  column-gap: 25px;
  margin-top: 1.9rem;
}

/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display: inline-block;
}

.single-column {
  columns: 1;
}

.footer {
  margin-bottom: 25px;
  text-align: center;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside;
}

ol {
  list-style: decimal inside;
}

ol,
ul {
  padding-left: 0;
  margin-top: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%;
}

li {
  margin-bottom: 1rem;
}


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: var(--box-color);
  border: 1px solid #E1E1E1;
  border-radius: 4px;
}

pre>code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem;
}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.u-pull-right {
  float: right;
}

.u-pull-left {
  float: left;
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-width: 0;
  border-top: 1px solid var(--fic-color);
  max-width: 900px;
}

hr2 {
  max-width: 80%;
}

blockquote {
  display: inline-block;
  margin: auto;
  padding-left: 1.2em;
  padding-right: 12px;
  padding-top: 2.2em;
  border-left: 4px solid var(--fic-color);
  position: relative;
  max-width: 900px;
}

blockquote::before {
  content: "\201C";
  color: var(--fic-color);
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -15px;
}

blockquote::after {
  content: '';
}

blockquote span {
  display: inline-block;
  font-style: normal;
  font-weight: bold;
  margin-top: 1em;
}

.byline {
  text-align: center;
}

.notes {
  margin: auto;
  padding-left: 1.2em;
  Padding-right: 12px;
  border-left: 4px solid var(--fic-color);
  position: relative;
}


.notes span {
  display: block;
  font-style: normal;
  font-weight: bold;
  margin-top: 1em;
}

/* Order
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main {
  flex: 1;
  padding: 20px;
  order: 2;
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
  max-width: 900px;
  height: 40px;
  padding: 10px;
  margin: auto;
  text-align: center;
  font-size: 75%;
}

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* Tema
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;

  padding: 10px 16px;

  background: var(--button-bg) !important;
  color: var(--button-text) !important;

  border: none;
  border-radius: 8px;

  cursor: pointer;
  font-size: 15px;
  line-height: 1;

  transition:
    background var(--transition),
    color var(--transition),
    opacity var(--transition);

  z-index: 9999;
}

#theme-toggle:hover {
  opacity: .9;
}

/* BUTTON UP & DOWN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  scroll-behavior: smooth;
}

/* Contenedor fijo en la esquina inferior derecha */
.botones-navegacion {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

/* Estilo retro/llamativo para los botones (estilo Neocities) */
.btn-scroll {
  background-color: var(--fic-color);
  color: var(--button-text);
  border: none;
  box-shadow: none;
  width: 35px;
  height: 35px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
/* Animación suave para aparecer/desaparecer */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Clase universal para mostrar los botones cuando corresponda */
.btn-scroll.visible {
  opacity: 1;
  pointer-events: auto;
}