* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background-color: #333; }
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin: 0; padding: 0; font: normal 1rem sans-serif; background-color: #333; color: #fff; }
box { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
vox { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }

a { text-decoration: none; color: #333; }
a:visited { color: #333; }
a.action { display: flex; justify-content: center; flex-grow: 1; margin: 0 10px; padding: 10px 20px; border: none; border-radius: 10px; background-color: #F00; color: #fff; font-size: 1.2rem; cursor: pointer; }
li { list-style: none; width: 100%; margin: 10px 0; padding: 10px; text-align: center; font-weight: bold; font-size: 2rem; color: #ff660044; background: #ff660044; border-radius: 10px; }
li a { text-shadow: -4px 0 #ff4400aa, 0 4px #ff4400aa, 4px 0 #ff4400aa, 0 -4px #ff4400aa; }
input { padding: 10px; font-size: 1.2rem; border: 1px solid #ccc; border-radius: 10px; }

card { min-height: 100vh; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; align-items: center; max-width: 480px; width: 100%; background: url(bg.jpg) top center no-repeat; background-color: #fff; color: #333; }

header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #ff4400aa; color: #fff; line-height: 1.5rem; }
footer { width: 100%; display: flex; justify-content: center; padding: 0px; background-color: #ff4400aa; color: #fff; }
footer p { margin: 1rem; padding: 0; line-height: 1rem; }

#apptitle  { width: 100%; font-size: 1.5rem; }
#apptitle img { width: 20px; }
#cartera   { width: 100%; text-align: right; font-size: 1.2rem; }
#cartera a { color: #fff; cursor: pointer; }
#cartera a:visited { color: #fff; }
#cartera img { margin-left: 4px; width: 16px; }

main { display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-start; align-items: center; width: 100%; height: 100%; margin: 0 auto; padding: 10px; }

svg { text-shadow: -1px 0px 1px rgb(97, 100, 5); }
h1.logo { color: #f00; font-size: 4rem; font-weight: bold; text-shadow: 1px 1px 1px rgb(97, 100, 5); }

actions { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; }
button { display: flex; justify-content: center; flex-grow: 1; width: 200px; margin: 0 10px; padding: 10px 20px; background: #ddd; border-radius: 10px; border: 1px solid #ccc; font-size: 1.2rem; cursor: pointer; }
button.action { background-color: #F00; color: #fff; border: none; }

register   { width: 100%; margin: 0; padding: 0; text-align: center; font-size: 1.5rem; }
register a { display: inline-block; width: 100%; margin: 10px 0; padding: 10px 0; background-color: #f00; border-radius: 10px;}
register a.dim { background-color: #ff440088; border-radius: 10px;}

info { color: #333; }
infobox { width: 80%; text-align: center; background-color: #ff440022; border-radius: 10px; margin: 20px 0; }
formbox { width: 80%; margin-bottom: 40px; }

help { display: none; width: 100%; padding: 10px; background-color: #fff; border-radius: 8px; }