*{box-sizing:border-box}body{padding:5px}.page-wrap{display:grid;grid-template-columns:1fr [page-header-start page-nav-start page-footer-start] 250px [page-nav-end page-main-start] 1000px [page-main-end page-aside-start] 250px [page-aside-end page-header-end page-footer-end] 1fr;grid-template-rows:[page-header-start] min-content [page-header-end page-nav-start page-aside-start page-main-start] 1fr [page-main-end page-nav-end page-aside-end page-footer-start] min-content [page-footer-end];gap:5px;& > * { font-family: CormorantGaramond; color: var(--color-secondary); border: 2px solid var(--color-tertiary); background: var(--color-primary); }}.page-header{display:flex;align-items:center;> label { margin: 1em; font-size: 2em; font-weight: 600; } > img { width: 7em; } padding: 0.25em 1em;grid-area:page-header}.page-nav{background:var(--color-secondary);grid-area:page-nav;display:flex;width:100%;flex-direction:row-reverse;justify-content:flex-start;align-items:center;padding:.5em;> input{ display:none; } > input + label { display: none; flex: initial; align-self: stretch; padding: 0.45em; > svg { width: 1.2em; height: 1.2em; } } > input ~ .nav-menu-list { height: 100%; display: flex; flex-direction: column; flex: 1 0 auto; row-gap: 1em; > a { text-decoration: none; text-align: center; background: var(--color-tertiary); color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-secondary), 0 0 0 4px var(--color-primary); font-size: 1.25em; font-weight: 450; padding: 0.25em 0; } > a:hover, .menuactive { background: var(--color-primary); color: var(--color-secondary); box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 3px var(--color-secondary), 0 0 0 5px var(--color-primary); } } > input:checked ~ .nav-menu-list{ > :not(.menuactive){ display:block; } > .menuactive { background: var(--color-primary); color: var(--color-secondary); box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 3px var(--color-secondary), 0 0 0 5px var(--color-primary); } }}.page-aside{grid-area:page-aside;background:var(--color-secondary);color:var(--color-primary)}.page-main{grid-area:page-main;font-size:1.2em;padding:0 1em;text-align:justify;> p { display: flex; gap: 0.5em; } img { height: 8em; } > h1 { text-align: center; } > h2 { text-align: center; }}.page-footer{text-align:center;padding:1em 0;grid-area:page-footer}.newsletter-div{display:flex;flex-direction:column;background:var(--color-tertiary);color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary),0 0 0 3px var(--color-secondary),0 0 0 4px var(--color-primary);justify-content:center;align-items:center}.newsletter-heading{font-size:2.3em;font-weight:500}.newsletter-form{justify-content:center;align-items:center;display:flex;column-gap:5px;padding:0;> .newsletter-text-inputs { display: flex; flex-direction: column; > input { width: auto; font: inherit; background-color: var(--color-primary); font-weight: 500; color: var(--color-secondary); } > input::placeholder { font-weight: 400; } } > .newsletter-submit { }}.button{height:3em;border-radius:0;background-color:#800;color:var(--color-primary);font:inherit;border:none;box-shadow:0 0 0 1px var(--color-primary),0 0 0 3px #b77,0 0 0 4px transparent;margin:4px;animation:3s ease-in 1s slide}.button:hover{background-color:#700;box-shadow:0 0 0 2px #700,0 0 0 4px var(--color-primary)}.button:active{background-color:#600;box-shadow:0 0 0 1px #600,0 0 0 3px var(--color-secondary)}body{visibility:visible;opacity:1}