/* @import url('https://fonts.cdnfonts.com/css/gagalin'); */
@font-face { font-family: trajan; src: url(fonts/trajan.woff); }
@font-face { font-family: trajanb; src: url(fonts/trajanb.woff2); }

html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
body { background: url(img/bgr.jpg) #e4d8be center center; background-size: cover;  font-family: trajanb, sans-serif; font-weight: 100; color:#57401f; }
h1, h2, h3 { text-align: center; }
h1 { font-size: 100px; margin: 0.2em; }
h2 { font-size: 40px; padding: 1rem; margin: 0; }
h3 { font-size: 20px; margin: 0.25em; }

#header { height: 25%; }
#main { height: 60%;}
#margin { height: 12%; transition: height 1s; }

#arabic, #roman { display: block; height: 200px; /* vertical-align: middle; */ box-sizing: border-box; float: left; }
#arabic { text-align: right; font-size: 100px; padding: 2rem 1rem 0 0;   }
#roman { text-align: left; }
#roman > div { display: inline-block; max-height: 200px; -webkit-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; }
#roman > div > img { max-height: 200px; }
#arabic span { padding: 0 3rem; }
#main.long #arabic { width:100% !important; text-align: center; }
#main.long #roman { width:100% !important; text-align: center; }
#main.long #margin { height: 1%;}

#check { position: fixed; bottom:30px; right: 30px; text-align: center; font-size: 40px; font-family: trajanb; 
  border: 1px dotted darkred; color:#57401f; background: rgba(0,0,0,0.1); cursor: pointer;}

#ok { text-align: center; font-size: 20px; padding: 20px 0 10px; margin: 0 10rem; border-bottom: 4px dotted rgba(80,60,20,.5); clear: both; transition: height 1s; }
#ok span { font-size: 30px; }
#ok.ready { font-size: 35px; }
#ok.ready span { font-size: 55px; }

#award { position: absolute; opacity: 0; top: 60px; left:60px; width:256px; transition: all .3s; transition-delay:.5s; transition-timing-function:cubic-bezier(0.5, 1.8, 0.3, 0.8); }
#award img { width:100%; }