@charset "UTF-8";

:root {
  --blanco: #ffe4e1;
  --rosita: #ffd1cc;
  --negro: #191919;
}

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

@font-face {
  font-family: 'enmendadura';
  src: url(fonts/under.ttf);
}

body {
  color: var(--negro);
  background-color: var(--blanco);
  /* animation-name: fondoCuerpo;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; */
}

@keyframes fondoCuerpo {
  0%  {background-color: var(--rosita);}
  50%  {background-color: var(--blanco);}
  100%  {background-color: var(--rosita);}
}

.cajaTxt {
  width: 70%;
  margin: 0% 15%;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

nav {
  width: 100%;
  margin: 0% 0% 0%;
  border-radius: 10px;
  background-color: var(--negro);
}

.menuLaberinto ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  font: normal 1.2vw/1em 'Ysabeau', serif;
}

.menuLaberinto a {
  flex: auto;
  padding: 1% 0%;
  text-align: center;
  text-decoration-line: none;
  color: var(--blanco);
}

.menuLaberinto a:hover {
  background-color: var(--blanco);
  color: var(--negro);
}

.menuLaberinto .activo {
  background-color: var(--blanco);
  color: var(--negro);
}

.ornaMenu {
  font-size: .7em;
}

.esteMenu {
  display: none;
}

section .espacioLaberinto {
  width: 100%;
  margin: 0% 0% 0%;
  background-color: #ab0033;
  overflow: visible;
}

.espacioLaberinto canvas {
  width: 100%;
  border-radius: 0px 0px 10px 10px;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fondoPapel {
  width: 60%;
  margin: 3% 20%;
  padding: 3% 5%;
  background-image: url(img/fondoPapel.jpg);
  border-radius: 20px;
}

h1, h2, h3, h4, p, pre {
  font-family: 'Alegreya';
}

h1 {
  font: normal 3vw/1em 'Alegreya', serif;
  padding: 3% 0% 0%;
}

h2 {
  font: normal 1.6vw/1em 'Alegreya', serif;
  padding: 0% 0% 3%;
}

h4 {
  font: normal 1.1vw/1.2em 'AlegreyaSC', serif;
  width: 50%;
  text-align: center;
}

header span {
  font: normal italic normal 1em/1.3em 'Alegreya', serif;
  padding: 2% 0%;
  text-align: center;
}

p {
  font: normal 1.1vw/1.3em 'Alegreya', serif;
}

pre {
  font: normal 1.3vw/1.4em 'Alegreya', serif;
}

.ornamenta {
  font: normal 1.4vw/1em '', serif;
  text-align: center;
  margin: 0% 0% 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* #hedera {
  padding: .25%;
  border-radius: 10px 0px 10px 0px;
} */

.versalitas {
  font-variant: small-caps;
  letter-spacing: 2px;
}

.botones {
  width: 100%;
  padding: 0% 3%;
  margin: 0% 0% 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.botones a {
  width: 100%;
}

.botones div {
  width: 40%;
  margin: .5% .5%;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--blanco);
  border-radius: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}

.botones div:hover {
  background-color: var(--negro);
}

#primerBoton {
  background-image: url(img/mundi.jpg);
  background-position: 0% 50%;
  background-blend-mode: exclusion;
}

#primerBoton:hover {
  background-color: #ab0033;
}

#segundoBoton {
  background-image: url(img/temaPiedad.jpg);
  background-position: 0% 3%;
  background-color: #FFB6C1;
  background-blend-mode: difference;
}

#segundoBoton:hover{
  background-color: #4682B4;
}

#tercerBoton {
  background-image: url(img/cristoZurbaran.jpg);
  background-position: 0% 25%;
  background-blend-mode: difference;
  background-color: #663399;
}

#tercerBoton:hover {
  background-blend-mode: luminosity;
}

#laberintoBoton {
  background-image: url(img/Gentileschi.jpg);
  background-position: 90% 20%;
  mix-blend-mode: difference;
}

#laberintoBoton:hover {
  background-color: #8b00b8;
  background-blend-mode: exclusion;
}

button {
  font: normal normal normal 1.1vw/1.2em 'Flamenco', monospace;
  padding: 3% 10%;
  border-width: 0px;
  border-radius: 10px;
  cursor: pointer;
  background-color: rgba(250, 240, 230, .8);
}

.botones #orginialLaberinto {
  width: 60%;
  margin: 0% 20%;
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-image: url(img/sorJuana.jpg);
  background-size: cover;
  background-position: 0% 20%;
  background-repeat: no-repeat;
  cursor: pointer;
}

#orginialLaberinto:hover {
  background-color: var(--negro);
  background-blend-mode: luminosity;
}

footer {
  width: 100%;
  height: 20vh;
  color: var(--blanco);
  background-image: url(img/fondoNegro.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px 20px 0px 0px;
}

footer .fDeli {
  width: 33.33%;
}

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

footer .fDeli h3 {
  width: 90%;
  margin: 0% 5%;
  font: normal 2.5vw/1em 'Ysabeau', serif;
  text-align: center;
  color: var(--blanco);
  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(--blanco);
  text-decoration-line: none;
  &:hover {
    text-decoration-line: underline;
  }
}

footer .fRS {
  width: 33.33%;
}

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

article {
  width: 100%;
  margin: 0% 0%;
  background-image: url(img/Circle_Maze.png);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: 75% 75%;
}

article h1 {
  width: 90%;
  margin: 1% 5%;
}

article p {
  width: 90%;
  margin: 3% 5%;
  font: normal 1.6vw/1.4em 'Alegreya', serif;
  text-align: justify;
  color: var(--negro);
}

 figure {
  width: 50%;
  margin: 0% 25%;
 }

 figure img {
  width: 30%;
 }