/* VARIABLES */

:root {
  --main-bg-color: rgb(15, 15, 15);
  --main-color: rgb(245, 243, 241);
  --app-bg: black;
  --bar-bg: rgb(110, 109, 109);
  --bar-color: rgb(241, 241, 245);
}

/*   var(--botton-color)    */


/* CUERPO */
body {
  background-color: var(--main-bg-color);
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-attachment: fixed;
color:antiquewhite;
}

body,
input,
select,
textarea {
  font-family: "Merriweather", Georgia, serif;
  font-size: 1.0em;
}


/* APLICACION */

/*****************************************
SELECTION METHODS AND CSS3 PROPERTIES
******************************************/
.tablero {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 15px;
}

.card {
  /* some css properties accept negative values */
  /* margin-right: -120px; */
  border-radius: 20px;
  border: 2px white solid;
  background-color: white;
  display: inline-block;
  position: relative;
  text-align: right;
  z-index: 1000;
  transition: transform .2s ease-out;
}

.tablero .card img {
  border-radius: 20px;
  height: 400px;
  width: 260px;
}

/*pseudo selector:hover -  apply effects when user 
  enter the pointer inside the element*/
.card:hover {
  cursor: pointer;
  transform: translate(1%, -5%) rotate(5deg);
  transform-origin: bottom right;
}

ul li span:last-child {
  display: inline-block;
  position: absolute;
  bottom: 15px;
  left: 15px;
  transform: rotate(180deg);
}

/* other pseudos that do the same thing:
    :nth-child(2n-2) - selects 2,4,6,8...
    :last-of-type - selects last element of its parent
  */


/* Modifying objects: jquery */
li.card {
  transition: all .2s ease-in-out;
}


li.card:hover {
  z-index: 5000;

}

li.card-behind {
  transition: all .4s ease-out;
  background: linear-gradient(rgb(40, 40, 40), rgb(20, 20, 20));
  transform: scale(.85, .85);
  color: grey;
  z-index: 1;

}

/*not yet used: the backface of each card */
li.card-behind:nth-child(even) {
  color: grey;
}