@import url("//hello.myfonts.net/count/33620c"); @font-face { font-family: 'Ingeborg-Regular'; src: url('webfonts/33620C_0_0.eot'); src: url('webfonts/33620C_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/33620C_0_0.woff2') format('woff2'),url('webfonts/33620C_0_0.woff') format('woff'),url('webfonts/33620C_0_0.ttf') format('truetype'); } * { box-sizing: border-box; } body { margin: 0; } .poem { margin: auto; max-width: 1000px; height: 100vh; font-size: 23px; font-family: 'Ingeborg-Regular'; padding-top: 3em; display: none; } p { text-indent: -2em; margin: 0; } .paragraph { margin-top: 1em; } #bottom { position: absolute; bottom: 10px; margin-left: calc(50vw - 70px); border-top: 3px solid; } .nav { font-size: 50px; padding: 10px; cursor: pointer; font-family: 'Ingeborg-Regular'; } @media all and (max-device-width: 900px) { .poem { font-size: 40px; padding-left: 3em; height: calc(100vh - 250px); overflow-x: scroll; } #bottom { margin: 0; padding-left: calc(50vw - 185px); padding-right: calc(50vw - 75px); background-color: white; border-top: 10px solid; height: 250px; } .nav { font-size: 170px; } } @media all and (max-width: 1100px) { .poem { padding-left: 3em; } } @media print { .poem { font-size: 20px; display: block !important; } #bottom { display: none; } } @page { size: auto; margin: 0mm; } #links { max-width: 600px; padding-top: 10vh; margin: auto; } .elem { display: block; width: 300px; text-decoration: none; color: #000; margin: 1em; font-size: 23px; border-bottom: 5px solid; box-sizing: border-box; } .elem:nth-child(odd) { margin-left: 2em; } .elem:hover { color: #666; border-color: #666; padding-left: 2em; }