body { color: black; font-family: 'CMUTypewriter'; font-size: 23pt; font-weight: normal; font-style: normal; padding: 0 2rem 0; margin: 0; display: grid; min-height: 100vh; grid-template-columns: [leftcol] 23rem [maincol] auto [rightcol] 1fr; grid-template-rows: [headerrow] 6rem [mainrow] auto [footerrow] 2rem; grid-template-areas: "logo header header" "logo main main" "logo footer footer"; background-color: #a21d10; } body::before { z-index: -1; content: ' '; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-image: url(/images/Chaoszone.black.svg); background-size: contain; background-attachment:fixed; background-repeat:no-repeat; background-position: center; opacity: 0.05; } header { border-bottom: 2px solid white; margin-bottom: 30px; padding: 12px 0px 12px 0px; grid-area: header; } header, header a { font-family: 'CMUTypewriter'; font-size: 23pt; } h1, h2, h3, h4, h5 { font-family: 'CMUTypewriter'; } a { color: #ccc000; text-decoration: none; } a:hover { color: #aaa000; text-decoration: underline } #logo { grid-area: logo; } #logo, #logo img { max-width: 23rem; } #logo { position: fixed; padding-top: 1rem; } div#logo a { color: white; font-weight: bold; text-decoration: none; } nav { display: inline-block; } nav ul{ text-align: left; list-style: none; display: inline-block; margin: 0; padding: 0; } nav li { display: inline-block; } nav li a { color: white; font-weight: bold; margin-left: 12px; text-decoration: none; text-transform: uppercase; } nav li a:first-child { margin: 0; } article { grid-area: main; } article img { max-width: 100%; } footer { grid-area: footer; border-top: solid 2px white; font-size: 12px; padding: 12px 0px 12px 0px; text-align: right; } /* h1 { font-size: 24pt; } h2 { font-size: 20pt; } */ div.info { font-size: 14px; font-style: italic; } .pagination { display: inline-block; width: 100% } .wrapper { flex: 1; } .left, .right { display: inline-block; fill: curentColor; } .left { float: left; margin-left: 10%; } .right { float: right; margin-right: 10%; } .left svg, .right svg { margin-bottom: -3px; margin-left: 0.8ex; margin-right: 0.8ex; } #yacs { width: 100% } .page img { width: 100% } .authors_comments { border: 1px solid white; border-radius: 5px; padding: 0 1em 0; background-color: #454545; box-shadow: 5px 5px 5px #ffffff; margin: 2em 0 2em; } @media screen and (max-width: 750px){ body { grid-template-columns: [maincol] auto; grid-template-rows: [logorow] 20rem [headerrow] 6rem [mainrow] auto [footerrow] 2rem; grid-template-areas: "logo" "header" "main" "footer"; } #logo { position: initial; } #logo img { max-width: 100%; } }