/* (cc) 3con14
 * HTML...: ejemplo_01.html
 * CSS....: css/estilos00.css
 * JS.....: js/codigo00.js
 * ---------------------------- 
 */

/* Reglas generales
---------------------------------------- */
:root {
    --fuente1: "PT Mono", "Courier New", monospace ;
    --fuente2: georgia, serif ;
    --fuente3: verdana, sans-serif ;
}
html { 
    box-sizing       : border-box;
    font             : 16px sans-serif;
    color            : #333;
    background-color : tan;
}
*, *::after, *::before {
    box-sizing : inherit;
    margin     : 0;
    padding    : 0;
    transition : all 0.1s ease-in-out;
}
*:focus {outline    : 0 none transparent; }
input:focus { background : rgba(255,255,0,0.5);}

body {
    min-height     : 80vh;
    max-width      : 100vw;
}

/* contenedores y cajas
---------------------------------------- */
.contenedor {
    max-width : 800px;
    width     : 90%;
    margin    : 10vh auto;
}
.ejercicio, .respuesta {
    margin   : 3em 1em 1em 1em;
    position : relative;
}
.ejercicio {
    font                 : italic 1.2em/1.3 georgia, serif;
    color                : #333;
    display              : grid;
    /* grid-template-columns: 2fr 1fr; */
    /* grid-gap             : 1em; */
}
.item {
    width: 15vw;
    margin: auto;
}
.datos {
    margin               : 4em 1em 1em 1em;
    position             : relative;
    text-align           : center;
    display              : grid;
    grid-template-columns: 1fr 1fr;
}
.acciones  { text-align: center; }

input, .datos, .respuesta {
    font  : 1.2em monospace;
    color : #333;
}
.ejercicio::before, .datos::before, .respuesta::before {
    position        : absolute;
    top             : -2em;
    left            : 0;
    right           : 0;
    font            : 900 1.2em sans-serif;
    margin          : 0 -1em 0.5em -1em;
    color           : #333;
    text-align      : center;
    background-color: rgba(0,0,0,0.1);
    border-bottom : 1px solid rgba(0, 0, 0, 0.251);
}
.ejercicio::before { content: "Ejercicio"; }
.respuesta::before { 
    content: "Respuesta";
}
.datos::before {
    content: "Datos";
    background-color: rgba(0,0,0,0.1);
}
/* Elementos */
img {
    max-width: 100%;
    height: auto;
}
.num { width: 4.5em; text-align: right; }

/* Botones y cajas de texto
---------------------------------------- */
input { 
  margin        : 0.5em 0.5em 0 0;
  border-radius : 4px;
  box-shadow    : 0 0 1px 0 #666;
}
label, input { 
  padding : 0.2rem;
  border  : 0 none transparent;
}
button {
    padding       : 0.5em 1em;
    margin        : 1em 0.5em;
    border-radius : 8px;
    cursor        : pointer;
    font          : 1em monospace;
    background    : #E74C3C; color : #FFF;
    text-shadow   : 1px 1px 1px rgba(0, 0, 0, 0.7);

    border        : 0 none transparent;
    box-shadow: 0 3px  0 0 rgba(0,0,0,0.8),
                0 0 0 1px rgba(0,0,0,0.4);
}
button:hover  { background: hsla(5, 100%, 70%, 1); }
button:active { 
    transform: translateY(2px);
    box-shadow: 0 3px  0 0 rgba(0,0,0,0),
                0 0 0 1px rgba(0,0,0,0.5);
}