@font-face { font-family: Libre Barcode; src: url(librebarcode128-regular.ttf); } @font-face { font-family: Barlow Condensed; src: url(barlowcondensed-regular.otf); } @font-face { font-family: Barlow Condensed; font-weight: 300; src: url(barlowcondensed-light.otf); } @font-face { font-family: Barlow Condensed; font-weight: 700; src: url(barlowcondensed-bold.otf); } @page { margin: 0; size: landscape; } html { align-content: center; align-items: center; background: #fff; display: flex; font-family: Barlow Condensed, sans-serif; height: 100%; justify-content: center; } body { background: #eef1f5; box-sizing: border-box; color: #2A3239; display: flex; flex-wrap: wrap; height: 8cm; justify-content: space-between; margin: 0; width: 25cm; } section { box-sizing: border-box; } dl { columns: 4; text-align: center; } dt { font-size: 9pt; font-weight: 700; text-transform: uppercase; } dd { margin-left: 0; } ul { align-items: center; display: flex; list-style: none; margin: 0; padding-left: 0; } li { font-weight: 700; text-transform: uppercase; } #informations { flex: 1; padding: 0; position: relative; } #informations h1 { display: inline-block; font-size: 25pt; font-weight: 300; text-transform: uppercase; } #informations #name { margin-left: 1cm; } #informations #destination { position: absolute; right: 1cm; } #informations dl { background: #2A3239; color: #fff; margin: 0; padding: 1cm 0; } #informations dd { border-left: 1pt solid #fff; font-size: 35pt; } #informations dd:first-of-type { border-left: 0; } #informations ul { margin-left: 1cm; } #informations li { font-weight: 300; padding: 0.15cm; } #informations li:first-of-type { background: #2A3239; border-radius: 4pt; color: #fff; } #informations li:last-of-type { font-family: Libre Barcode, cursive; font-size: 25pt; margin-left: auto; padding-right: 1cm; padding-top: 0.5cm; } #ticket { border-left: 1pt dashed #2A3239; display: flex; flex-direction: column; height: 8cm; justify-content: space-around; padding: 0 1cm; } #ticket h2 { font-weight: 300; margin: 0; text-transform: uppercase; } #ticket p { font-family: Libre Barcode, cursive; font-size: 25pt; margin: 0; text-align: center; } #ticket dl { margin: 0; } #ticket li { margin: 0 0.25cm; }