/*
block-size ← height
(border|padding)-block[-start|end]
(border|padding)-inline[-start|end]
inline-size ← width
margin-block ← vspace
*/

/**/
@import "debug.css";
/**/
@import "reset.css";

html {
}

body {
background-color: #111;
background-image: url("../images/logo.svg");
background-position: center;
background-size: cover;
color: #777;
font-family: sans-serif;
font-size: 1.5rem;
line-height: 1.25;
margin-block: 0;
margin-inline: auto;
max-inline-size: 70ch;
text-align: start;
}

header {
background-color: #300;
display: flex;
gap: 1em;
justify-content: space-between;
padding: 1em 2em;
}

.columns {
display: grid;
gap: 1em;
grid-template-columns: 1fr 2fr;
}

.sectionless {
background-color: #630;
padding: .5em 1em;
}

.sectionless .thing {
font-size: 1.5em;
}

.wrapper {
display: flex;
}

main {
}

h1, h2, h3, h4, h5, h6 {
background-color: #222;
}

h1 {
border-color: #fff;
border-radius: .25em;
border-style: solid;
border-width: .1em;
color: #f77;
font-size: 1.75em;
text-align: center;
}

img {
display: block;
max-inline-size: 100%;
}

p {
background-color: #330;
}

section {
background-color: #033;
margin-block: 1em;
margin-inline: 1em;
max-inline-size: 20ch;
}

strong {
color: red;
}

ol, ul {
background-color: #303;
}
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
margin-block: .25em;
}
ul li::marker {
content: "×";
}

header nav a {
text-decoration: none;
}
header nav a:focus-visible,
header nav a:hover {
background-color: blue;
}
header nav ul {
display: flex;
gap: 1em;
list-style: none;
padding: 0;
}
header nav li::marker {
content: none;
}

a {
color: inherit;
}
a:visited {
}
a:focus-visible,
a:hover {
}
a:active {
}

h2 {
color: #f77;
}

footer {
background-color: #003;
padding: 1em 2em;
text-align: end;
}