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

/* Reglas generales
---------------------------------------- */
html { 
    box-sizing       : border-box;
    font             : 16px sans-serif;
    color            : #333;
    background-color : hsla(60, 50%, 75%, 0.25);
}
*, *::after, *::before {
    box-sizing : inherit;
    margin     : 0;
    padding    : 0;
}
*:focus {
    outline    : 0 none transparent;
    background : rgba(255,0,0,0.1);
}
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  : hsla(120, 50%, 25%, 1);
}
.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);
}


/* Botones y cajas de texto
---------------------------------------- */
input { 
  text-align    : right;
  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 : 4px;
    font          : 900 0.8em sans-serif;
}
button:hover {
    cursor     : pointer;
    background : hsla(0, 0%, 20%, 0.25);
}