/* Fonts */
@font-face
{font-family: alegreya; src: local('Alegreya SC'), url('alegreyasc.woff2') format('woff2'), url('alegreyasc.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap}
@font-face
{font-family: source; src: local('Source Sans Pro'), url('sourcesanspro.woff2') format('woff2'), url('sourcesanspro.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap}
body, code, input, textarea, button
{font: normal 1rem/1.4 source, sans-serif}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{font: normal 1.8em / 1.4 alegreya}
/*Layout*/
*, *:before, *:after
{box-sizing: border-box; outline: none}
html
{scroll-behavior: smooth; scroll-padding-top: 4em; height: 100%}
body
{margin: 0 auto; width: min(96vw, 81em); min-height: 100vh; display: flex; flex-flow: row wrap; gap: 1em; align-content: flex-start; align-items: flex-start}
:is(header, footer, .tele)
{flex-basis: 100%; contain: layout}
header
{order: -1; max-width: 81em; margin: 0 auto .5em; position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center}
.tele
{margin: 0 auto .5em}
main
{flex: 1}
aside
{flex: 0 0 300px}
footer
{position: sticky; top: 100vh}
:is(header, footer, .tele)::before, :is(header, footer, .tele)::after
{content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; right: 100%}
:is(header, footer, .tele)::after
{left: 100%}
/*Navigation*/
header button
{cursor: pointer; border: none; background: none; font-size: 1.1em; border: 2px solid; padding: .5em}
nav
{background: none; list-style-type: none}
nav a
{font-size: 2em; line-height: 1.5; text-decoration: none}
/*Texts*/
article > p
{text-indent: 1.5em}
.s, .s p
{text-indent: 0}
.c
{text-indent: 0; text-align: center}
.r
{text-indent: 0; text-align: right}
h1, .h1
{font-size: 1.8em}
h2, .h2
{font-size: 1.5em}
h3, .h3
{font-size: 1.3em}
h4, h5, h6, .h4, .h5, .h6
{font-size: 1.1em}
h5, .h5
{font-weight: bold}
h6, .h6
{font-style: italic}
b, strong
{font-weight: bold}
i, em, ins
{font-style: italic}
s, del
{font-style: oblique}
abbr
{cursor: help}
article a, aside a
{text-decoration-skip-ink: auto; text-decoration-thickness: 1.5px}
article a:focus, article a:hover, aside a:focus, aside a:hover
{text-decoration-skip-ink: none; transition: all .5s ease-out}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a[href^="#"]:hover::after, :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a[href^="#"]:focus::after
{content: " #"}
mark
{padding: .1em}
dfn, article p span
{font-style: normal; font-variant: small-caps}
details
{padding: 0 .5em .5em}
details summary
{margin: 0 -.5em; padding: .5em; cursor: pointer}
small
{font-size: .8em}
sup, sub
{font-size: .65em}
code
{padding: 0 .2em}
blockquote
{max-width: 100%; border-left: thick solid; padding-left: .5em}
pre
{white-space: pre-wrap; margin: .7em 0}
pre code
{display: block}
q [lang="es"]
{quotes: "\00ab" "\00bb"}
main ul
{list-style-type: square}
hr
{border: 0; border-bottom: thin solid}
dl
{margin: 1.2em 0}
dl div
{margin: 1.2em 0}
/*Table*/
table
{margin: auto; max-width: 90%}
tr
{display: flex; flex-flow: row wrap; margin: .25em 0}
th, td
{flex: 1 1 0; border: thin solid; padding: .25em}
thead th
{text-align: center}
th, td
{padding: .2em .3em; border: thin solid}
td[colspan]
{text-align: center; padding: .3em 0}
/*Images*/
button:has(figure, picture, img)
{padding: 0; border: 2px solid transparent; cursor: pointer; background: transparent}
button:has(figure, picture, img):hover, button:has(figure, picture, img):focus
{border: 2px solid}
button > figure
{margin: 0; padding: 0}
picture
{display: flex}
img
{max-width: 100%; height: fit-content; border: 0; padding: 0; margin: 0 auto}
.li
{max-width: 40%; float: left; margin: 0 .7em 0 0}
.ri
{max-width: 40%; float: right; margin: 0 0 0 .7em}
article figcaption
{text-align: center; font-size: .85em}
article > img
{display: block; margin: auto}
.pics
{display: flex; flex-flow: row wrap; justify-content: space-around; gap: .5em; padding: 0}
.pics figure
{flex: 1 1 content; justify-content: center}
.pics img
{width: auto; max-height: 250px}
/* Lightbox */
[popover]
{padding: 0; border: 0; overflow: initial}
[popover] img
{max-width: 90vw; max-height: 90vh; width: 100%; height: auto; margin: auto}
/*Audio and video*/
audio
{display: block; border: none; margin: .7em auto}
video, iframe
{display: block; max-width: 100%; height: auto; border: none; margin: .7em auto}
.ar169
{width: 100%; aspect-ratio: 16/9}
.ar43
{width: 100%; aspect-ratio: 4/3}
.ar11
{width: 100%; aspect-ratio: 1/1}
.cards dl
{display: flex; flex-flow: row wrap; gap: 1.5em}
.cards div
{border: 2.5px solid; flex: 1 1 30%; padding: .75em; border-radius: 14px; margin: 0}
/*Cards*/
.cards dl
{display: flex; flex-flow: row wrap; gap: 1.5em; justify-content: space-around}
.cards div
{border: 2.5px solid; flex: 1 1 30%; padding: .75em; border-radius: 14px; margin: 0}
/*Note*/
#note
{position: absolute; bottom: 1%; right: 1%; animation: chao 4s ease-in 1s forwards; border-radius: 7px}
#note p
{margin: .2em .5em}
@keyframes chao
{from {opacity: 1} to {opacity: 0}}
/*Forms*/
form
{margin: 1em 0; padding: 1em; border: 2.5px solid; display: flex; flex-flow: row wrap; gap: 1em}
form div, fieldset
{flex: 1 1 48%; display: flex; flex-flow: column wrap}
form div:has(input[type="checkbox"], input[type="radio"], input[type="color"], input[type="time"], input[type="date"])
{flex-flow: row nowrap; gap: .3em}
input
{flex: 1 1 0; border: none; border-bottom: 2px solid}
fieldset
{display: flex; flex-flow: row wrap}
input[type="checkbox"], form input[type="radio"]
{width:1.1em; height: 1.1em; flex: 0 0 1.1em}
input[type="file"]
{border: 0; display: flex; flex-grow: 1; font-variant: small-caps}
::file-selector-button
{cursor: pointer; font-size: 1.1em; padding: .2em 1em; border: 0; flex-grow: 1}
input[type=color]
{cursor: pointer; flex: 0 0 30px; height: 30px; border: 0; margin-left: auto}
input[type=date], form input[type=time]
{max-width: fit-content; margin-left: auto}
input[type="checkbox"], form input[type="radio"]
{width: 1.25em; height: 1.25em; min-width: 1.25em; max-width: 1.25em}
div:has(textarea)
{flex-basis: 100%}
textarea
{resize: vertical; height: 12em; border: 2px solid}
input[type=submit]
{cursor: pointer; border: 0; height: 100%; padding: .25em}
/*Aside*/
aside
{margin-top: 4em}
aside form *:first-child
{margin: 0}
aside form div
{flex-basis: 100%}
aside input[type="checkbox"]
{vertical-align: bottom}
aside button
{text-decoration: none; padding: .2em .5em; margin: .3em 0; border: 0; cursor: pointer}
.icons
{display: flex; flex-flow: row wrap; justify-content: space-between}

/*Media queries*/
@media screen and (max-width: 900px) {
  main
  {flex: 1 1 100%}
  aside
  {margin: auto}
  #logo img, #logo picture *
  {width: auto; height: 75px}
  .pic
  {float: none; max-width: 300px; margin: 0 auto}
  tr
  {display: flex; flex-direction: row; flex-wrap: wrap; margin: 0.5em 0; border: 1px solid rgba(3, 3, 3, 0.2)}
  td, th
  {flex: 1 1 150px}
  .cards dl
  {flex-flow: column nowrap}
  .cards dl div
  {flex: 1 1 45%}
  main form
  {flex-flow: column nowrap}
  form div, form fieldset
  {max-width:100%}
}

@media screen and (min-width: 1601px) {
  body, input, textarea, button
  {font-size: 1.1rem}
  aside, aside button
  {font-size: 1rem}
}

@media print{
  @page {margin: 2cm}
  body
  {width: 100%; margin: 2cm; margin: 0; background: #fff; color: #000; font-size: 11pt}
  body, main
  {width: auto; display: block; word-wrap: break-word; margin-top: 0}
  header, aside, footer, .tele, form, #note, video, audio, iframe
  {display: none}
  section
  {display: block; margin: auto}
  figure[popover], .pics li figure[popover] picture *
  {display: none}
  figure
  {break-inside: avoid; margin: .5em auto}
  h1, h2, h3
  {font: normal 18pt/1.2em fertigo, georgia, sans-serif; color: #000}
  h2
  {font-size: 1.4em}
  h3
  {font-size: 1.3em}
  h4, h5, h6
  {font-size: 1.1em}
  a
  {color: #000; border: 0; text-decoration: none}
  a:after
  {content: " [https://URL/"attr(href) "] "}
  a[href^="http://"]:after, a[href^="https://"]:after, a[href^="ftp://"]:after
  {content: " ["attr(href) "] "}
  a[href^="#"]:after
  {display: none}
  abbr[title]:after
  {content: " ("attr(title) ") "; border: 0}
  hr
  {border: none; border-bottom: thin dashed #333; clear: both}
  ::details-content
  {content-visibility: visible; height: auto !important}
}

/*Custom*/
#logo
{display: flex; font: normal small-caps 2.4em/1.1em alegreya; text-decoration: none; padding: .3em 0}
#logo:hover, #logo:focus
{text-decoration: underline}
#logo img
{margin: auto; margin-right: .3em}

/* Colours */
::backdrop
{background: #000d}
nav::backdrop
{background: #aa0000ef}
body
{background: #fff}
header, footer, .tele
{background: #a00}
:is(header, footer, .tele)::before, :is(header, footer, .tele)::after
{background: #a00}
#logo
{color: #fff; text-decoration: none}
#logo:is(:hover, :focus)
{background: #800}
header button
{background: #a00; border-color: #fff; color: #fff; font-size: 1.1em}
header button:is(:focus, :hover)
{background: #fff; color: #a00}
nav a
{color: #fff}
nav a:is(:focus, :hover)
{color: #f7ab40}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{color: #000}
article a, aside a
{color: #800; text-decoration-color: #800}
article a:hover, article a:focus, aside a:hover, aside a:focus
{background: #800; color: #fff}
mark
{background: #68089e; color: #fff}
details[open]
{background: #ededed}
details summary
{background: #a00; color: #fff}
summary:focus
{background: #800}
code
{background-color: #f0f0f0; color: #000}
blockquote
{border-color: #800}
hr
{color: #800}
th
{background: #800; color: #f2daf2}
th, td
{border-color: #ddd}
tr:nth-child(even)
{background: #eee}
button:has(figure, picture, img):hover, button:has(figure, picture, img):focus
{border-color: #800}
form
{border-color: #800}
input, textarea, textarea:focus
{accent-color: #800; border-color: #800}
form input[type="checkbox"] + label:before, form input[type="radio"] + label:before
{color: #800}
fieldset
{border-color: #a00}
form input[type=submit]
{background: #a00; color: #fff}
form input[type=submit]:hover, form input[type=submit]:focus
{background: #800}
form input[type=color]:focus
{outline: thin solid red}
form label:has(input[type="checkbox"]:hover), form label:has(input[type="checkbox"]:focus), form label:has(input[type="radio"]:hover), form label:has(input[type="radio"]:focus)
{background: #ededed}
.cards div
{border-color: #800}
aside form
{border-color: #800}
aside a.button, aside button
{background: #a00; color: #fff}
aside a.button:hover, aside a.button:focus, aside button:hover, aside button:focus
{background: #800}
footer
{color: #fff}
#note
{color: #fff; background: #800}