* { font-family: "open sans"; text-decoration: none; } body { margin: 0; display: grid; grid-template-rows: auto auto 150px; grid-template-columns: auto 300px 600px auto; background-color: #e5ddd1; } a { color: unset; } .content { display: flex; padding: 0px 20vw; } aside { margin-right: 20px; grid-column: 2; } aside>section { margin-bottom: 15px; } aside>section>h3 { margin-top: -0.2rem; text-align: center; } :is(main, aside) { margin-top: 30px; display: inline-block; grid-row: 2; } :is(main, aside)>section { border-radius: 3px; background-color: #d9b5b5; } :is(main, aside)>section { padding: 20px; } main { grid-column: 3; } main>section>h2 { margin-left: 1.5rem; margin-top: unset; font-size: 1.8rem; } /* main>section>h2:has(+ .divider) { */ main>section>h2+.divider { margin-top: -1rem; } header { z-index: 1000; margin-bottom: 30px; grid-row: 1; } header>.menu { z-index: 1000; width: 100%; height: 250px; position: absolute; display: flex; } header>.menu>nav { top: 0; margin: 0 auto; height: 40px; padding: 15px 0; position: sticky; display: flex; } header>.menu>nav>#logo { height: inherit; } header>.menu>nav>#logo>img { height: inherit; position: relative; } header>.menu>nav>#logo~.link { margin-right: unset; margin-left: 50px; } header>.menu>nav>.link { margin: auto 0; margin-right: 50px; text-decoration: none; color: #e5ddd1; } header>.menu>nav>.link:last-child { margin-right: auto; } header>.window { z-index: 500; height: 650px; position: relative; display: flex; padding: 30px; overflow: hidden; background-color: #1a1449; } header>.window>.background { margin-top: auto; width: 100%; height: min-content; } header>.window>.img_1 { left: -70px; bottom: -20px; height: 120%; position: absolute; } header, footer { grid-column-start: 1; grid-column-end: 5; } header>nav, footer { background-color: #1a1449; } footer { z-index: 800; margin-top: 30px; width: 100%; height: 100%; grid-row: 3; } .banners { height: 100%; } .banners>img { width: 100%; position: sticky; } .banner { width: 100%; } .button, :is(a, label)[type="button"], input[type="submit"] { padding: 10px 20px; cursor: pointer; text-align: center; border: unset; border-radius: 3px; color: #fdfdfd; background-color: #AD4717; } .button:hover, :is(a, label)[type="button"]:hover, input[type="submit"]:hover { color: #fff; background-color: #c5531f; } .button:active:is(:active, :focus), :is(a, label)[type="button"]:is(:active, :focus), input[type="radio"]:checked+label[type="button"], input[type="submit"]:is(:active, :focus) { color: #ddd; background-color: #993f15; } input:is([type="checkbox"], [type="radio"]) { display: none; } select, input:is([type="text"], [type="password"]), input:is([type="text"], [type="password"]).measured+.unit { padding: 8px 12px; outline: unset; border-radius: 3px; border: unset; } select { padding-top: unset; padding-bottom: unset; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } select.measured, input:is([type="text"], [type="password"]).measured { margin-right: unset; padding-right: 3px; text-align: right; border-radius: 3px 0 0 3px; } select.measured+.unit, input:is([type="text"], [type="password"]).measured+.unit { margin-right: 3px; padding-left: unset; display: inline; border-radius: 0 3px 3px 0; background-color: #fff; } .unit { display: none; } .unselectable, .unselectable * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .divider { width: 100%; border-radius: 2px; } .divider+h3 { text-align: center; } section>div.divider { margin-bottom: 1rem; border-bottom: 3px solid #aaa9a9; }