CSS:Dossier.css

div.dossier { display: grid; grid-template-columns: 12em 2fr 10fr 2fr 8fr 1fr 3em; grid-template-rows: 2em 2em 2em 2em 2em 2em auto; min-height: 100vh; box-sizing: border-box; background: #edb; border: 2px solid #322; min-width: 50em; position: relative; } div.dossier div { position: relative; } div.dossier .label { line-height: 2em; white-space: nowrap; padding: 0 0.3em; } div.dossier .input { font-family: Courier, "Courier New", "Cutive Mono"; line-height: 1em; height: 2em; align-items: center; display: flex; padding: 0 0.3em; } div.dossier .input:after { position: absolute; content: ; width: calc(100% - 1em); height: 2px; background: rgba(119, 96, 96, 0.3); left: 0; bottom: -2px; } div.dossier #portrait { grid-area: 1 / 1 / span 6 / span 1; margin: 5px 15px; padding: 3px; border: 1px solid #322; background: #eee; box-shadow: 2px 2px 7px #322; transform: rotate(-3deg); } div.dossier #portrait img { height: 100%; max-width: 100%; width: auto !important; display: block; margin: auto; } div.dossier #nameLabel { grid-area: 1 / 2; } div.dossier #name { grid-area: 1 / 3 / span 1 / span 3; } div.dossier #sexLabel { grid-area: 1 / 6; } div.dossier #sex { grid-area: 1 / 7; } div.dossier #rankLabel { grid-area: 2 / 2; } div.dossier #rank { grid-area: 2 / 3 / span 1 / span 5; } div.dossier #unitLabel { grid-area: 3 / 2; } div.dossier #unit { grid-area: 3 / 3 / span 1 / span 5; } div.dossier #heightLabel { grid-area: 4 / 2; } div.dossier #height { grid-area: 4 / 3; } div.dossier #dobLabel { grid-area: 4 / 4; } div.dossier #dob { grid-area: 4 / 5; } div.dossier #ageLabel { grid-area: 4 / 6; } div.dossier #age { grid-area: 4 / 7; } div.dossier #weightLabel { grid-area: 5 / 2; } div.dossier #weight { grid-area: 5 / 3; } div.dossier #pobLabel { grid-area: 5 / 4; } div.dossier #pob { grid-area: 5 / 5 / span 1 / span 3; } div.dossier #speciesLabel { grid-area: 6 / 2; } div.dossier #species { grid-area: 6 / 3; } div.dossier #nationalityLabel { grid-area: 6 / 4; } div.dossier #nationality { grid-area: 6 / 5 / span 1 / span 3; } div.dossier #description { grid-area: 7 / 1 / span 1 / span 7; margin: 0.5em 1em; border: 2px solid #775; padding: 1em; /*font-family: "BlackJackRegular";*/ font-size: 120%; line-height: 1.5em; text-align: justify; } div.dossier #stamp { position: absolute; font-size: 300%; color: red; font-family: sans-serif; font-variant: small-caps; left: 3em; top: 2em; border: 10px solid red; border-radius: 20px; padding: 10px 20px; transform: rotate(10deg); opacity: 0.3; white-space: nowrap; } div.extraPortrait { padding: 3px; border: 1px solid #322; background: #eee; box-shadow: 2px 2px 7px #322; margin: 10px 10px 10px 20px; transform: rotate(12deg); display: block; float: right; font-size: 80%; text-align: center; } div.extraPortrait img { height: 10em; max-width: 100%; display: block; margin: auto; } div.extraPortrait.large img { height: 25em; }