@page { margin: 0; size: A4 landscape; } html { font-family: 'Orbitron', sans-serif; } body { margin: 0 } .sheet { display: table; margin: 0; position: relative; box-sizing: border-box; page-break-after: always; padding: 10mm; width: 297mm; height: 209mm } /* Put everything in the correct location */ .logo { display: table-row; font-size: 15mm; } .main { display: table-row; font-size: 25mm; width: 100%; height: 12.5cm; margin: 1cm 0; text-align: center; } .subline { display: table-row; font-size: 12mm; text-align: center; } .editable { display: table-cell; vertical-align: middle; -webkit-user-modify: read-write; -moz-user-modify: read-write; user-modify: read-write; border: none; outline: none; } /** Screen **/ @media screen { body { background: #eee } .sheet { background: white; box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3); margin: 20mm auto; } .sheet, .sheet::before, .sheet::after { box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); border: 1px solid #bbb; } .sheet::before, .sheet::after { content: ""; position: absolute; width: 297mm; height: 210mm; background-color: #eee; } .sheet::before { right: 15px; top: 0; transform: rotate(-1deg); z-index: -1; } .sheet::after { top: 5px; right: -5px; transform: rotate(1deg); z-index: -2; } } @media print { body { width: 297mm } .sheet { overflow: hidden; /* Make input caret transparent */ color: transparent; text-shadow: 0 0 0 #000; } }