@font-face{
  font-family: "fuentebase";
  src: url("../../fonts/Heming.ttf") format("truetype");
}
@font-face{
  font-family: "Overbit";
  src: url("../../fonts/Overbit.otf") format("opentype");
}
@font-face{
  font-family: "Seratonin";
  src: url("../../fonts/Seratonin-Regular.otf") format("opentype");
}

@page {cursor: url("../../../cursor.png"), auto;
}

body {
    margin: 0;
  color: white;
  background-image: url(https://i.pinimg.com/1200x/54/0a/21/540a2104b8829fa12f853acfb6322251.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
  font-family: "fuentebase";
  cursor: url("../cursor.png"), auto;
}

header {
  color: white;
  font-family: "Overbit"; 
  width: 100%;
  text-align: center;
}
.cuerpo {
  width: 100%;
  display: flex;
}
.derecha {
  width: 25%;
  margin-top:70px;
  text-align: center;
  justify-content: center;
  border-radius: 25px;
}
.izquierda {
  width: 25%;
  margin-top:70px;
  text-align: center;
  justify-content: center;
  border-radius: 25px;
}
.centro {
  width: 50%;
  text-align: center;
  color: black;
}
.entrada{
  background-color: lavender;
  border-radius: 25px;
  border: 3px dotted black;
  padding: 0px 70px;
  margin-bottom: 40px;
}
  
.botontext{
  background-color: white;
  color: black;
  margin: 5px auto;
  width: 210px;
  padding: 3px 0px;
}
.botontext1{
  background-color: white;
  color: black;
  margin: 5px auto;
  width: 210px;
  padding: 3px 0px;
  font-style: oblique;
}
.derecha a{
  text-decoration: none;
}
.botontext:hover{
  background-color: black;
  color: white;
}
.botontext1:hover{
  background-color: black;
  color: white;
   padding: 3px 0px;
}

 .photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
 
}
.photopile figure { 
  display: inline-block;
  max-width: 40%;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile figcaption {
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile figure:hover { 
  z-index: 3;
}
.photopile figure:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile figure:nth-child(3n) {
  transform: rotate(-5deg);
}
.photopile figure:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile figure:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile figure:nth-child(6n) {
  transform: rotate(-7deg);
}