body {

  /*   background: url(../img/iphone-xs-yoigo.jpg) no-repeat center center; */

    background-size: cover;

    -moz-background-size: cover;

    -webkit-background-size: cover;

    -o-background-size: cover;

    background-attachment: fixed;

}



body,

input,

select,

textarea {

    font-family: "Merriweather", Georgia, serif;

    font-size: 1.0em;

}



button {

    height: 40px;

    color: white;

    font-weight: 800;

    font-family: "Source Sans Pro", Helvetica, sans-serif;

    border-radius: 10px;

    border: purple 1px solid;

    background: purple;

  
}



#app {

    background: white;

    color: black;

    width: 90%;

    min-width: 800px;

    margin: 0px auto;

    margin-top: 70px;

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0px 0px 0px black;

    background-color: rgb(180, 175, 179, 0.5);

}



table {

    padding: 10px;

    margin: 10px;

    text-align: center;

    border: 2px solid black;

    padding: 5px;

    width: 100%;

}



#app>table {

    background: rgb(250, 158, 230);

}



tbody tr:hover {

    background-color: blueviolet;

    color: white;

    font-weight: 800;

}



.contenedor {

    position: fixed;

    top: 0;

    left: 0;

    background: rgba(0, 0, 0, 0.5);

}



.modal {

    background: white;

    border-radius: 5px;

    padding: 5px;

    width: 80%;

    text-align: center;

    position: fixed;

    top: 100px;

    left: 10%;

}



.top {

    border: 2px solid rosybrown;

}



.middle {

    border: 2px solid rosybrown;

}



.bottom {

    border: 2px solid rosybrown;

    background: rgb(141, 38, 110);

}



.close {

    width: 50px;

    float: right;

}



#vid {

    float: right;

}



h1 {

    background: rgb(167, 59, 167);

    border-radius: 5px;

    color: white;

    margin: 0px;

}







.copyleft {

    display: inline-block;

    transform: rotate(180deg);

}



.item {

    background: rgb(160, 117, 53);

    opacity: 0.9;

    border: 4px solid purple;

    border-radius: 20px;

    padding: 10px;

    margin: 10px;

    text-align: center;

    font-weight: 400;

    font-size: 1.2em;

    color: white;

}



.item div {

    padding: 15px;

}



.rejilla {

    margin: 0 auto;

    width: 500px;

    margin-top: 5%;

    grid-gap: 30px;

}





.tablink {

    background-color: rgb(110, 37, 153);

    color: white;

    float: left;

    border: 2px solid black;

    padding: 14px 16px;

    font-size: 17px;

    width: 25%; /*  100dividido el numero de tabs */

}



.tablink:hover {

    background-color: rgb(173, 30, 173);

}



.tabcontent {

    display: grid;

    grid-template: 1fr / 200px auto;

    padding: 0;

}



.tabcontent div:nth-child(1) {

    position: relative;

    grid-row-end: span 2;



}



.cabecera h1,

h2 {

    background-color: transparent;

    text-align: center;

    color: rgb(112, 28, 91);

}



/* Alinear a la derecha el usuario */

.cabecera p {

    text-align: right;

}



#logo {

    width: 180px;

}

#flip-container{
    -webkit-perspective: 1000px;
    perspective: 1000px;
    padding: 50px;
    position: relative;
    margin: 10px auto;
    width: 500px;
}

.ficha{

    position: relative;
    width: 450px;
    height: 200px;
    transition: 0.6s;
    transform-style: preserve-3d;
    transform-origin: 100% 100px;           /*  half of its height */
    margin: 5px;
    border-radius: 10px;
    border: 1px solid black ;
}

.ficha:hover, .ficha.flip{
    transform: rotateX(180deg);
    
  }

  .front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;

    font: 4em/6.8em Arial;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    border: 1px solid black ;
  }
  .front{
    transform: rotateX(0deg);
    z-index: 2;
    background-color: aquamarine;
 
  }
  .back{
    transform: rotateX(180deg);
    background-color: rgb(66, 168, 134);

    
  }
  



.footer {

    height: 30px;

    position: fixed;

    left: 0;

    bottom: 0;

    width: 100%;

    background-color: rgb(153, 42, 153);

    color: white;

    text-align: center;

}