diff --git a/style.css b/style.css index b2283d0..cb0975d 100644 --- a/style.css +++ b/style.css @@ -53,23 +53,48 @@ } .card { - display: inline-flex; + display: flex; justify-content: space-between; - flex-direction: column; - width: 12em; - height: 18em; + flex-direction: row; + width: 300px; + height: 450px; border: 1px solid black; border-radius: 5px; + font-family: monospace; + font-size: 32px; } .container>.card>.middle { display: grid; text-align: center; - grid-template-columns: repeat(2, 50% [col-start]); - font-size: 3em; + align-items: center; + grid-template-columns: repeat(2, 96px [col-start]); + font-size: 64px; } - -.container>.card.>.left { +.container>.card>.middle>div:nth-last-child(2) { + transform: rotate(0.5turn); } -.container>.card.>.right { - text-align: center; +.container>.card>.middle>div:nth-last-child(1) { + transform: rotate(0.5turn); } +.container>.card>.right { + text-align: left; + transform: rotate(0.5turn); + padding: 1em 0em 0em 1em; +} +.container>.card>.center { + font-size: 128px; + align-items: center; + display: flex; +} +.container>.card>.bottom { + text-align: left; + transform: rotate(0.5turn); + padding: 1em 0em 0em 1em; +} +.container>.card>.top { + padding: 1em 0em 0em 1em; +} +.container>.card>.left { + padding: 1em; + padding: 1em 0em 0em 1em; +} \ No newline at end of file