* {
padding: 0;
margin: 0;
background-color: white;
color: black;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
html {
width: 100vw;
}
body {
display: grid;
width: min(100vw, 900px);
min-height: 100vh;
margin: auto;
grid-gap: 1rem;
grid-template-rows: 5rem 3rem auto 5rem;
grid-template-areas: "Header" "NAV" "Content" "Footer";
}
header {
padding: 0 1.5rem;
grid-area: Header;
align-content: center;
}
nav {
display: flex;
grid-area: NAV;
> a {
display: block;
width: 100%;
height: 100%;
text-align: center;
align-content: center;
border-color: lightgray;
border-style: solid;
border-width: 1px 0;
border-left-width: 1px;
&:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-right-width: 1px;
margin-right: 1rem;
}
&:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-left: 1rem;
}
}
}
main {
grid-area: Content;
}
h3 {
margin-bottom: 0.3rem;
}
section {
margin: 1rem 0;
> * {
margin: 0 1rem;
padding: 1rem;
border-color: lightgray;
border-style: solid;
border-width: 0 1px;
border-top-width: 1px;
&:first-child {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
&:last-child {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-width: 1px;
}
}
> article {
> p {
margin: 1ch 0;
text-indent: 2ch;
}
}
}
footer {
height: 100%;
grid-area: Footer;
justify-content: center;
text-align: center;
vertical-align: middle;
align-content: center;
}