/*****************/
/***** Reset *****/
/*****************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/****************/
/***** Main *****/
/****************/

@font-face {font-family: 'harry_pregular'; src: url('fonts/harryp__-webfont.woff2') format('woff2'), url('fonts/harryp__-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}

/**** Layout *****/
html {box-sizing: border-box; scroll-behavior: smooth;}
*, *:before, *:after {box-sizing: inherit;}
html, body {height: 100%;}
body {padding: 1em; font-family: 'Fira Sans Condensed', sans-serif; font-size: 4vh; background: black url('images/pergamino.jpg') no-repeat center center; background-size: cover;}

/***** Hoja *****/
#hoja {display: flex; flex-flow: column nowrap; justify-content: center; align-content: space-evenly; height: 100%; width: 100%; max-width: 800px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.75); box-shadow: 5px 5px 5px black; transform: rotate(1deg);}
h1 {margin: 0.5em; text-align: center; font-family: 'harry_pregular', serif; font-size: 1.5em;}
h1 span {font-size: 0.35em; padding: 0.5em; color: white; background-color: black; border-radius: 1em; border: none; cursor: pointer;}
h1 span:hover {background-color: goldenrod;}
h1 span a {color: inherit; text-decoration: none;}
.principal {flex-grow: 1; margin: 1em; display: flex; flex-flow: column nowrap; justify-content: center; align-content: center; text-align: center;}
#ayuda {margin: 1em; font-size: 0.75em; font-style: italic;}
#boton {display: inline-block; margin: 1em auto; padding: 1em; text-align: center; color: white; background-color: black; border-radius: 1em; border: none; cursor: pointer;}
#boton:hover {background-color: goldenrod;}

/***** Salida *****/
#salida {margin: 0.5em; font-size: 1.5em;}