help/rtfd/public/html/style/main.css

/*
16 1
17 1.0625
18 1.125
19 1.1875
20 1.25
21 1.3125
22 1.375
phone: 480 px
tablet: 768 px
laptop: 1024 px
desktop: 1366 px

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: monospace;
line-height: 1.125;
margin-block: 0;
margin-inline: auto;
max-inline-size: 160ch;
text-align: start;
}

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

.columns {
display: grid;
gap: 1em;
@media (width > 40rem) {
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: 3rem;
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: 40ch;
}

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;
font-size: 1.5rem;
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;
}