@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --blanco: #faf0e6;
  --negro: #212121;
  --argenta: #C0C0C0;
}

body {
  color: var(--blanco);
  background-color: var(--negro);
}

h1 {
  margin: 0% 0%;
  font: normal 4vw/1em 'Ysabeau', serif;
  font-weight: 200;
}

h2 {
  font: normal 1.4vw/1em 'Cutive Mono', serif;
  font-weight: 200;
}

p {
  margin: 5% 0%;
  font: normal 1.6vw/1.2em 'Cutive Mono', monospace;
  text-align: justify;
}

a {
  text-decoration-line: none;
  color: var(--blanco);
}

header {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

header p {
  margin: 0%;
  
}

.deliT { 
  font-family: 'Ysabeau SC', serif;
}

.cajaTxt {
  width: 90%;
  margin: 0% 0% 0% 10%;
}

.cajaMenu {
  position: sticky;
  top: 0%;
  width: 35%;
  height: 5vh;
  margin: 0% 0% 2% 65%;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--blanco);
}

nav a {
  width: 100%;
  color: var(--negro);
  font: normal 1vw/1em 'Cutive Mono', serif;
  text-align: center;
}

nav a:hover {
  color: var(--blanco);
  background-color: var(--negro);
  height: 100%;
}

.listoncitoTexto {
  width: 60%;
  height: 5vh;
  margin: 0% 0% 0% 0%;
  background-color: #e6ffe6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  float: left;
}

.listoncitoManifiesto {
  width: 60%;
  height: 5vh;
  margin: 0%;
  background-image: url(img/Flying_fish_with_two_people_-_detail_of_the_painting_Temptation_of_Saint_Anthony.jpg);
  background-size: contain;
}

.listoncitoTexto div {
  font: normal 1.2vw/1em 'Cutive Mono', serif;
  color: var(--negro);
  padding-right: 5%;
}

.listoncitoImg {
  width: 0%;
  height: 5vh;
  margin: 0% 0% 0% 0%;
  float: left;
  background-image: url(img/detonacion.jpg);
  background-size: contain;
}

main {
  width: 100%;
  margin: 0% 0% 2% 0%;
  color: var(--blanco);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main figure {
  width: 30%;
  margin: 0% 0%;
  float: left;
  border: solid;
  border-color: #e6ffe6;
  border-width: 0px 0px 5px 20px;
}

main figcaption {
  width: 100%;
  height: 4vh;
  color: var(--negro);
  background-color: #e6ffe6;
  font: normal 1vw/1em 'Ysabeau', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -2%;
}

main figure img {
  width: 100%;
  margin: 0% 0%;
}

main p {
  width: 50%;
  margin: 0% 20% 0% 0%;
  padding-left: 2%;
  float: left;
  font: normal 1.3vw/1.2em 'Cutive Mono', serif;
  text-align: left;
  color: var(--blanco);
}

.piezasTextuales {
  width: 100%;
  clear: both;
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; */
}

.piezasTextuales h2 {
  width: 100%;
  height: 5vh;
  color: var(--negro);
  background-color: #ffcccc;
  text-align: left;
  margin: 0% 0% 2%;
  padding: 0% 0% 0% 5%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.piezasTextuales div {
  width: 50%;
  height: 30vh;
  margin: 0% 0% 2%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.piezasTextuales div#pzLaberinto {
  background-image: url(img/ribera.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0% 35%;
}

.piezasTextuales div#pzAsterion {
  background-image: url(img/laberintoKircher.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0% 52%;
}

.piezasTextuales div#pzAsterion p {
  background-color: rgba(219, 112, 147, .9);
  color: var(--blanco);
}

.piezasTextuales div p {
  width: 70%;
  padding: 5%;
  text-align: center;
  font: normal 1.2vw/1em 'Ysabeau', serif;
  background-color: rgba(255, 255, 255, .6);
  color: var(--negro);
}

.piezasTextuales a div:hover{
  mix-blend-mode: difference;
}

.manifiesto {
  width: 100%;
  margin: 0% 0% 2% 0%;
}

.manifiesto h2 {
  width: 60%;
  height: 5vh;
  margin: 0% 0% 2%;
  padding: 0% 0% 0% 5%;
  background-color: #ffffcc;
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

ol {
  width: 60%;
}

li {
  font: normal 1vw/1.2em 'Cutive Mono', monospace;
  font-weight: 200;
  text-align: justify;
  padding: 2% 0%;
}

footer {
  width: 100%;
  height: 15vh;
  color: var(--negro);
  background-color: var(--blanco);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer section {
  width: 50%;
}

footer a {
  text-decoration-line: none;
}

footer .fDeli h3 {
  width: 90%;
  margin: 0% 5%;
  font: normal 2vw/1em 'Ysabeau', serif;
  text-align: center;
  color: var(--negro);
  font-weight: 200;
  padding: 2% 0%;
  border-radius: 10px;
}

footer .fDeli .deliT { 
  font-family: 'Ysabeau SC', serif;
}

footer .fDeli img {
  width: 70%;
  margin: 0% 15%;
}

footer nav {
  width: 33.33%;
  display: flex;
  flex-direction: column;
}

footer nav a {
  font: normal 1.2vw/1.4em 'Flamenco', serif;
  color: var(--negro);
  text-decoration-line: none;
  &:hover {
    text-decoration-line: underline;
  }
}

footer .fRS {
  width: 33.33%;
}

footer .fRS a, p {
  font: normal 1vw/1.2em 'Flamenco', serif;
  color: var(--negro);
  margin: 0%;
}