* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
	width: 250px;
	margin: 1rem;

  perspective: 1000px;
  transform-style: preserve-3d;
  list-style-type: none;
}

.card .front,
.card .back {

	height: 400px;
	
	background-size: cover;
	background-position: center;

  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);

  color: black;
  font-size: 14px;
  font-family: titilium Web;
  text-align: center;

  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.description {
  width: 230px;
  height: 320px;
  align-content:start;
}

.card .front {
  background-color: #957dad;
  /* Posicion por defecto */
  transform: rotateY(0deg);
}
.card .back {
  width: 100%;

  background-color: #957dad;

  top: 0; 
  left: 0;
  position: absolute;
  /* Posicion por defecto */
  transform: rotateY(180deg);
}
/* Velocidad de trancicion */
.card:hover .front,
.card:hover .back {
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* Girar imagen */
.card:hover .front {
  transform: rotateY(-180deg);
}
.card:hover .back {
  transform: rotateY(0deg);
}

.card .content {

	width: 100%;
	position: absolute;
	
	padding: 1rem;
	box-sizing: border-box;
	
	top: 50%;
	left: 0;
	perspective: inherit;

  /* Posicion de texto central */
  transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.front {
  font-size: 14px;
  color: #141E51;
  position: relative;
  margin-bottom: 0.5rem;
}
.back .content {
	text-align:left;
	font-size: 14px;
}
.title {
	font-size: 18px;
	color: #90C1DB;
	font-weight: bold;
	text-shadow: 2px 2px 2px #1f264b;
}

img {
	align-items: center;
	border-radius: 8px;
	width: 190px;
	height: 225px;

}

dt {
	text-align: left;
	font-weight: bold;
	text-shadow: 2px 2px 2px #f3e7f3;
}
dd {
	text-align: center;
}

.inlineinfo {

	display: inline-flex;
  row-gap: 10px;
  text-align: left;
  font-family: serif;
  color: #180b27;  
  margin-top: 10px;
  font-weight: bold;
  text-shadow: 2px 2px 2px #f3e7f3;
}

body {

	background: #ffe9f2;
  color: #413d9c;
  font-family: Arial;
  font-size: min(18px, max(5vw, 13px));
  margin: 0;
  cursor: default;
}
header {
	background-image: url(https://thatshelf.com/wp-content/uploads/2012/03/Spirited-Away-The-Films-of-Studio-Ghibli-Featured.jpg);
	background-repeat: no-repeat; /*no se repita*/
	background-size: contain; /*cover para que sea tamaño de toda la pagina, contain para la seccion*/
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px;
	margin: 0;
	width: 100%;
	height: auto;
	text-align: center;
	text-shadow: 2px 2px 2px #ffe9f2;
}
h1 {
  color: #1f264b;
  font-family: serif;
  font-size: 6rem;
  line-height: normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h2 {
	color: #000;
	padding: 10px;
	margin-inline-start: 30px;
	font-family: serif;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
}
form {
	margin-bottom: 30px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: nowrap;
}
select {
  background-color: #e7e9d4;
  color: #413d9c;
  font-size: 18px;
  text-shadow: #957dad;
  border-style: dashed;
  margin-left: 10px;
  margin-right: 10px;
}
button {
  background-color: #413d9c;
  color: #e7e9d4;
  font-size: 18px;
  margin-left: 10px;
  padding: 4px 20px;
  border-radius: 20px;
  border-style: dashed;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
label {
  cursor: default;
}
span {
  text-align: center;
  font-style: italic;
}
aside{
  text-align: center;
  margin: 20px;
  padding: 10px;
  width: auto;
  height: auto;
}
footer {
  text-align: center;
}
@media (max-width: 680px) {
  header {
    flex-direction: column;
    align-items: start;
  }
  h1 {
    font-size: 150%;
    margin: 0%;
    color: #ffe9f2;
    text-shadow: 1px 1px 1px #000;
  }
  h2 {
    padding: 0;
  }
  form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  select {
    width: 50%;
    padding: 5px;
    margin-bottom: 5px;
  }
  button {
    padding: 5px 10px;
  }
  .card {
    width: 70%;
    perspective: 70%;
    align-items: center;
  }
  img {
    align-items: center;
    border-radius: 8px;
    width: 200px;
    height: 230px;
  }
}

/* Estilos para pantallas medianas y grandes */
@media (min-width: 681px) {
  header {
    flex-direction: row;
  }
}
/*estilo para pantallas extra pequeñas*/
@media (max-width: 342px) {
  .card {
    width: 80%;
    perspective: 60%;
    align-items: center;
  }
  img {
    border-radius: 8px;
    width: 100%;
    height: 80%;
    justify-content: flex-start;
  }
  dd{
    font-size: 12px;
  }
  dt{
    font-size: 12px;
  }
  .back .content {
    padding: 0%;
  }
}