* {margin: 0; padding: 0;} 
html, body { padding: 0; margin: 0; height: 100%;}
input, textarea {font-size: 24px;}

.page {font-size: 24px;}
.page:not([current]) {display: none !important;}
.page.center {height: 100%; display: grid; }
.page.center  .content {margin: auto; position: relative;}
.page.absolute {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.page.absolute .content {margin: auto; position: absolute; top: 48px; right: 0; left: 0; bottom: 0; overflow: auto;}

.page .top {position: absolute; top: 40px; text-align: center; left: 0; right: 0;}


#page-selector .content .group {background: #eee; border-radius: 10px; padding: 10px; margin-bottom: 20px; cursor: pointer; text-align: center;}
#page-card #option [ref] {display: inline-block; background: #eee; cursor: pointer; padding: 10px;}
#page-card #option [ref]:not([pushed]) {opacity: 0.3;}
#page-card #image {width: 200px; height: 200px; background-size: cover;}
#page-card #word {text-align: center; font-size: 48px;}
#page-card #translate {text-align: center; color: #bbb;}
#page-card #answer {text-align: center; color: red;}


#page-card #button {width: 100px; height: 100px; border-radius: 50%; background: cornflowerblue; color: white; position: absolute; bottom: 20px; left: 50%; margin-left: -50px;}
#page-card #button[hold] {opacity: 0.5;}