:root {
    --color-primario: rgb(64, 64, 64);
    --color-acento: #319f90;
    --color-gris: #808080
}

::-moz-selection {
    background: var(--color-acento);
    color: #FFFFFF;
  }
  
::selection {
    background: var(--color-acento);
    color: #FFFFFF;
  }

body {
    font-family: bely, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-primario);
    font-size: 1.2rem;
    /* cursor: none; */
}

/* body * {
  cursor: inherit;
}

#cursor {
  z-index: 9999999;
  position: absolute;
  left: -28px;
  top: 0px;
  will-change: transform;
  -webkit-transform: translate(-999px, -999px);
          transform: translate(-999px, -999px);
  pointer-events: none;
  max-width: 2rem;
}
#cursor img {
  will-change: transform;
  -webkit-transition: -webkit-transform .1s linear;
  transition: -webkit-transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear;
} */

/* body:not(a) {
  cursor: url("../img/tijera.png") 8 8, auto;
} */

/* a:hover {
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✂️</text></svg>") 16 0,auto; 
} */

p a {
  text-decoration: underline dotted var(--color-gris) 1px !important;
  text-underline-offset: 0.1em;
  color: var(--color-primario) !important
}

p a:hover {
  text-decoration: underline dotted var(--color-acento) 1px !important;
  color: var(--color-acento) !important;
}

a, a:hover{
  color: var(--color-acento);
}

a[target="_blank"] {
  cursor: alias;
}

img {
  width: 100%;
}

main {
    background-color: rgb(247, 245, 242);
}

/* header */

.navbar a {
  font-family: 'zeitung';
  font-size: 1.1rem;
}

.navbar a[aria-current] {
  text-decoration: underline dotted var(--color-gris) 1px;
  text-underline-offset: 0.15em;
}

.navbar-toggler {
  border: none;
}

.container, .diarios-container, .peli-container {
    max-width: 44rem;
}

.pt-10 {
  padding-top: 8rem;
}

.pb-10 {
  padding-bottom: 8rem;
}

h1 {
  font-family: Zeitung, sans-serif;
  font-weight: 100!important;
  letter-spacing: -0.15rem!important;
}

h4 {
  text-transform: lowercase;
  font-variant: small-caps;
}

h4 {
  font-weight: 400;
  font-size: 1.1em;
  /* text-indent: 1.5rem; */
}

p {
  font-size: 1.1em;
  line-height: 2em;
  margin-bottom: 0;
  hyphens: none;
  text-align: justify;
}

u {
  text-transform: lowercase;
  font-variant: small-caps;
  text-decoration: none;
  letter-spacing: 0.05em;
}

a.link-a-nota {
  color: var(--color-primario);
  transition: 1s;
}

a.link-a-nota:hover {
  text-decoration: none!important;
  color: var(--color-acento)
}

blockquote {
  font-size: 1.1em;
  line-height: 2em;
  hyphens: none;
  text-align: right;
  margin-bottom: 2.2rem;
}

blockquote footer {
  font-size: 0.9em;
  color: var(--color-gris);
}

blockquote footer::before {
  content: '—';
}

.note p + p {
  text-indent: 2rem;
}

.note p + h5 {
  margin-top: 2.4rem;
}

/* .poesia p {
  text-align: center;
} */

.poesia p + p {
  padding-top: 1rem;
  text-indent: 0rem;
}

article ul {
  padding-left: 0px;
  font-size: 1.1em;
  line-height: 2em;
  list-style-type: circle;
}

article p + h4 {
  padding-top: 2rem;
}

.about img {
  margin-top: 5rem;
}

.note, .notes {
  padding-bottom: 8rem;
}

.note-date {
  text-transform: lowercase;
  font-variant: small-caps;
  font-family: bely, monospace;
  font-size: 1.2em;
  letter-spacing: 0.15em;
}

.note-container, .notes-container, .films-container {
  max-width: 88rem;
}

.peli-header {
  max-width: 44rem;
}

.note-header h3 {
  font-family: Zeitung, sans-serif;
  font-weight: 200!important;
  letter-spacing: -0.075rem!important;
}

#copyInput {
  display: block;
  opacity: 0;
}

img.copy-img {
  max-width: 1.5rem;
}

.note figure {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.note figcaption, .about figcaption {
  color: var(--color-gris);
  padding-top: 0.5rem;
  font-family: 'zeitung';
  font-size: 1rem;
}

.note img, .about img, .films img, .films-film img {
  filter: grayscale();
  mix-blend-mode: darken;
  transition: 1s;
}

.note img:hover, .about img:hover {
  filter: none;
  transition: 1s;
}

.previous-note time {
  color: var(--color-gris);
}

.previous-note h3 {
  max-width: 20ch;
}

.vermas {
  text-transform: lowercase;
  font-variant: small-caps;
  font-size: 1em;
  letter-spacing: 0.1em;
}

/* note y peli extras */

.container-note-extra, .container-peli-extra, .prev-notes-container {
  background-color: #FBFAF9;
}

.prev-note, .next-note, .prev-peli, .next-peli {
  font-family: 'zeitung';
}

.prev-note, .prev-peli {
  border-right: 1px dotted var(--color-primario);
}

.prev-note h5, .next-note h5, .prev-peli h5, .next-peli h5 {
  /* font-size: 1.25rem; */
  margin-bottom: 0rem;
}

.prev-note time, .next-note time {
  font-size: 1.2rem;
  color: var(--color-primario)
}

span.note-flechas, span.peli-flechas, .share-button {
  font-family: 'zeitung';
  text-transform: lowercase;
  font-variant: small-caps;
  font-size: .8em;
  letter-spacing: 0.1em;
  color: var(--color-gris);
}

.share-button span {
  text-decoration: none !important;
  opacity: 0;
}

.share-button:hover span::after {
  content: attr(data-content);
}

button.share-button {
  background-color: transparent;
  padding: 0;
  border: none;
}

button.share-button:hover {
  text-decoration: none !important;
}

button.share-button:hover span {
  color: var(--color-gris);
  text-decoration: none !important;
  opacity: 1
}

/* span.note-flechas {
  opacity: 0;
  transition: 0.5s;
} */

.prev-note a:hover span.note-flechas, .next-note a:hover span.note-flechas {
  opacity: 1;
}

.prev-note a:hover, .next-note a:hover, .prev-peli a:hover, .next-peli a:hover {
  text-decoration: none !important;
}

.prev-note a:hover h5, .next-note a:hover h5, .prev-peli a:hover h5, .next-peli a:hover h5 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* footer */

.footer p {
  line-height: 1.75;
  font-size: 1.2rem;
  color: var(--color-gris);
  hyphens: auto !important;
}

.footer {
  padding-bottom: 1rem;
}

.footer, .footer__menu a, .footer a {
  color: var(--color-gris) !important;
}

.footer__menu a {
  font-family: 'zeitung';
  font-size: 1.1rem;
}

.footer__menu a:hover {
  text-decoration: underline dotted var(--color-gris) 1px !important;
  text-underline-offset: 0.1em;
}

.social-links a:hover {
  color: var(--color-acento);
}

/* diarios / archivo */

.archivo-title, .bio-title {
  color: var(--color-gris)
}

.anios span {
  font-family: 'zeitung';
  font-size: 1rem;
  color: var(--color-gris);
  margin-right: 0.75rem;
}

.anios a:hover {
  text-decoration: none!important;
}

.anios a[aria-current] {
  text-decoration: underline dotted var(--color-gris) 1px;
  text-underline-offset: 0.2em;
}

.anios a[aria-current]:hover {
  text-decoration: underline dotted var(--color-gris) 1px !important;
  text-underline-offset: 0.2em !important;
}

.diarios-note a:hover {
text-decoration: none!important;
}


.diarios-note time {
  color: var(--color-primario);
}

.diarios-note h1 {
  font-size: 2.25rem;
  letter-spacing: 0;
}

.diarios-note h1:hover {
  text-decoration: underline!important;
}

/* about */

.about a {
  font-weight: 600;
  color: var(--color-primario);
  text-decoration: none !important;
}


/* filmografía */

.films-container h1 {
  font-size: 1.5rem;
  /* font-style: italic; */
  letter-spacing: -0.075rem!important;
  font-weight: 500!important;
}

.serie-color {
  color: #895A8A !important
}

.films-film:hover a {
    text-decoration: none!important;
}

.films-film:hover img {
  filter: none;
  transition: 1s;
}

.films-film-datos {
  color: var(--color-primario)
}

a .films-film-datos:hover {
  text-decoration: none!important;
}

/* película */

.peli-container p {
  text-align: left!important;
  font-size: 1.2rem;
  line-height: 1.75;
}

h1.peli-nombre {
  color: var(--color-acento);
  font-size: 4rem;
  margin-left: -0.4rem;
}

.peli-container h2 {
  font-family: 'zeitung';
  text-transform: lowercase;
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-variant: small-caps;
  letter-spacing: 0.05rem;
  color: var(--color-gris)
}

.peli-genero h2 {
  color: var(--color-primario)
}

.reconocimientos ul, .festivales ul {
  list-style-type: none;
  padding-left: 0 !important;
}

.reconocimientos li, .festivales li {
  margin-bottom: 1rem;
}

.botones-ver a {
  padding: 0rem 0.25rem 0.15rem 0.5rem;
  border: 0.1em solid var(--color-acento);
  text-decoration:none;
  font-family:'zeitung',sans-serif;
  font-variant: small-caps;
  text-decoration: none;
  letter-spacing: 0.05em;
  font-size: 1rem;
  font-weight:400;
  color: var(--color-acento);
  text-align:center;
  transition: all 0.2s;
}

.botones-ver a:hover{
  color: #FFFFFF;
  background-color: var(--color-acento);
}

.related-notes ul {
  list-style-type: none;
  padding: 0;
}

.related-notes a {
  display: inline-block;
  text-decoration: none;
}

.related-notes a:hover p {
  text-decoration: underline dotted var(--color-acento) 1px !important;
    color: var(--color-acento) !important;
}

.related-notes date {
    font-variant-numeric: tabular-nums;
      -moz-font-feature-settings: "tnum";
      -webkit-font-feature-settings: "tnum";
      font-feature-settings: "tnum";
      margin-right: .5rem;
      color: var(--color-gris)
}

.related-notes a:hover date {
  color: var(--color-gris);
}

.related-notes p {
  display: inline;
  text-decoration: underline dotted var(--color-gris) 1px !important;
    text-underline-offset: 0.1em;
    color: var(--color-primario) !important;
}


@media (min-width: 576px) {
  .navbar {
    padding-top: 8rem;
  }
}

@media (max-width: 767.98px) {
  h1.note-title {
    font-size: 3rem;
  }

  .note p, .diarios-note p, .about p {
    line-height: 1.75;
    font-size: 1.2rem;
    hyphens: auto !important;
  }

  .pt-10 {
    padding-top: 4rem;
  }

  .pb-10 {
    padding-bottom: 4rem;
  }

  h1.peli-nombre {
  font-size: 3rem;
}

}