/* VARIABLES */
        
         :root {
            --main-bg-color: transparent;
            --main-color: rgb(31, 22, 22);
            --app-bg: rgba(94, 84, 185, 0.425);
            --botton-bg: rgb(118, 148, 204);
            --botton-hover: rgb(132, 202, 171);
            --botton-color: white;
            --ficha-bg-front: rgb(162, 184, 216);
            --ficha-bg-back: rgb(165, 231, 185);
            --bar-bg: rgb(44, 40, 40);
            --bar-color: rgb(203, 202, 238);
        }
        /*   var(--botton-color)    */
        /* CUERPO */
        
        body {
            margin: 0px;
        }
        
        body::after {
            background: url(../img/bg2.jpg) no-repeat center center;
            background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-attachment: fixed;
            content: "";
            opacity: 0.5;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: -1;
        }
        
        body,
        input,
        select,
        label,
        textarea {
            font-family: "Merriweather", Georgia, serif;
            font-size: 1em;
            background-color: var(--main-bg-color);
        }
        /* CABECERA */
        
        .cabecera {
            margin: 0px;
            margin-top: 0.1em;
            border-radius: 20px;
            background-color: var(--bar-bg);
            color: var(--bar-color);
            height: 80px;
        }
        
        .cabecera h1 {
            margin: 0px;
            text-align: center;
        }
        /* APLICACION */
        
        #app {
            /* background: var(--app-bg);*/
            color: black;
            width: 100%;
            min-width: 300px;
            margin: 0px auto;
            box-shadow: 0px 0px 0px black;
        }
        /* LA FICHA */
        
        #flip-container {
            -webkit-perspective: 1000px;
            perspective: 1000px;
            position: relative;
            margin: 1px auto;
            width: 500px;
        }
        
        .ficha {
            position: relative;
            width: 450px;
            height: 250px;
            transition: 0.6s;
            transform-style: preserve-3d;
            transform-origin: 100% 125px;
            /*  half of its height */
            margin: 1px;
            border-radius: 10px;
            border: 1px solid black;
        }
        
        .rotated {
            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: var(--ficha-bg-front);
        }
        
        .back {
            transform: rotateX(180deg);
            background-color: var(--ficha-bg-back);
        }
        
        #nota {
            height: 200px;
        }
        /* CONTENEDOR OPCIONES DESPUES DE FICHA */
        /*   .contenedor {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }*/
        
        .contenedorFlex {
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            align-items: center;
        }
        
        .item {
            font-weight: 800;
            margin: 0.5em;
            font-size: 2em;
        }
        
        button {
            height: 60px;
            line-height: 0px;
            padding: 1em;
            color: var(--botton-color);
            font-family: "Source Sans Pro", Helvetica, sans-serif;
            border-radius: 10px;
            border: var(--botton-bg) 1px solid;
            background: var(--botton-bg);
        }
        
        button:hover {
            border: var(--botton-hover) 1px solid;
            background: var(--botton-hover);
        }
        
        #tiempo {
            width: 25px;
        }
        /* FOOTER */
        
        .footer {
            height: 30px;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: var(--bar-bg);
            color: var(--bar-color);
            text-align: center;
        }
        
        .copyleft {
            display: inline-block;
            transform: rotate(180deg);
        }
        /* SLIDER */
        
        .slidecontainer {
            margin: 0px auto;
            width: 80%;
        }
        
        .slidecontainer label {
            color: var(--main-color);
        }
        
        .slidecontainer span {
            color: var(--main-color);
        }
        
        .slider {
            -webkit-appearance: none;
            width: 60%;
            height: 15px;
            border-radius: 5px;
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }
        
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }
        
        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }
        /* FIN SLIDER */
        
        .contenedorModal {
            background: white;
            border-radius: 5px;
            padding: 5px;
            width: 80%;
            text-align: center;
            position: fixed;
            top: 100px;
            left: 10%;
        }
        
        .close {
            width: 50px;
            float: right;
        }
        
        @media (max-width: 575px) {
            .slidecontainer {
                grid-template: 1fr / 190px 1fr 50px;
            }
        }