html, body { padding: 0; margin: 0; }
/* i do this on instinct when making things, because nothing sits correctly ever... */
html {
    background-color: #000;
    color: #ccc;
    /* you could reverse these colours (or, my equivalent, use #fff and #333) and use
    this layout just fine with no other colours changed, but the existing background
    graphic looks better with black LOL */
    font-size: 0.85rem;
    /* pretty small? yeah. but cute, and responsive if a visually impaired user (such as
    me! i'm actually half-blind) has their browser customised to accommodate to this. i
    usually use px which is considered inaccessible, but being more polite never hurts */
    line-height: 1;
    /* i like the tighter space. also, did you know firefox and chrome use different line
    heights? if you really, really want your layout to look the exact same and you have
    boxes of certain sizes that text will overflow from, you gotta declare this! */
    font-family: Arial, Helvetica, sans-serif;
    /* arial is actually really cute.  */
}
body {
    max-width: 600px;
    /* if you include NO other styling on your site (which i think is great), still add a
    max-width. it saves one's eyes on widescreen, trust me... as for it being in pixels,
    not only is it responsive by default (being max-width rather than width), no PC is
    gonna fight with a width like 600. maybe keep that in mind, i dunnoooo */
    padding-left: 10px;
    padding-right: 10px;
    /* breathing room is Always nice. also good for if someone is viewing on mobile */
}

nav ul {
    /* i actually use different stylings here vs. in the full layout, just to show off
    different Looks and Methods */
    width: 100%;
    text-align: center;
    padding: 0;
    /* get rid of the default left padding */
}
nav ul li {
    display: inline-block;
    /* makes the list items sit next to each other instead of on top of each other */
}
nav ul li:not(:last-of-type)::after {
    content: "..."
    /* cute separation! */
}

h1 {
    text-align: center;
    font-size: 3em;
    /* use relative units for your font size if you're already using them. or even if
    you're not! it scales naturally if you change the base size even in px */
    margin: 0 -10px;
    padding: 20px;
}
h1 a {
    text-decoration: none;
    /* remove the underline on the h1, which is (kindly) a link to the homepage */
}

h2 {
    border-left: 1em solid;
    border-bottom: 1px solid;
    padding-left: 0.5em;
    /* this is a deisgn i always like using... */
}
header h2 {
    /* for the "main h2"; really this means the other h2s should be h3s, but i'm already
    pushing it a little using h4s... officially they go up to h6, so it's fine either way
    but i'm a cheapskate and a rebel*/
    font-size: 1.25em;
    text-align: center;
    border-left: 0; border-bottom: 0; padding: 0;
    margin: 0;
    margin-top: -1rem;
}
nav a, header h2 {
    text-transform: lowercase; 
    /* this is always cute. and good for the whole accessibility thing. if you feel super
    serious, write your stuff in proper case, then lowercase it up,! if you can be
    bothered. even if you can't, this css property is sooo good for easy styling */
}
h3 {
    text-align: center;
}
header h2, h3 {
    color: #fff;
}
h1, h2 {
    font-weight: normal;
    /* slim text is cute! */
}
h4 {
    font-style: italic;
    /* at this font size it doesn't read as a heading, so we gotta do something new */
}
h1, h2, h3, h4 {
    clear: both;
    /* in case any floated images remain between sections of course */
    font-family: Tahoma, Verdana, sans-serif;
    /* my former favourite font. */
}
h1, h4, header h2 {
    letter-spacing: 0.2em;
    /* i just think this is fun and more memorable. */
}

p, blockquote {
    text-align: justify;
    /* nicer to read, especially if slim body width is involved */
}
em, strong, del, u, blockquote, code{ color: #999; }
/* i use this on em and strong and del but not i and b and s. i often use i and b in the
same page (or even paragraph) as em and strong, so it's nice to add visual distinction on
top of the semantic one.
as a side note, tutorials will recommend you use em and strong instead but won't explain
why. it's because one is purely visual, the other is specifically for emphasis. a foreign
word is in italics because it is foreign, not because it is emphasised! just one example. */
code { font-family: monospace; }
blockquote {
    margin: 0.5em auto;
    width: 90%;
    padding-left: 0.5em;
    border-left: 2px solid #cc0;
}

ul, ol, dd {
    line-height: 1.5;
    /* extra line height is nicer on all kinds of lists */
}
ul > li::marker {
    /* the > symbol here makes it so that ONLY the li elements that are children of ul
    elements, and not any in nested [ordered] lists */
    content: "\003E\00a0";
    /* like the spaces in layout.css, the symbol > needa a special code. probably because
    it has an actually use that i just demonstrated. i think it makes for a cute bullet
    point. */
}
ol {
    list-style-type: decimal-leading-zero;
    /* leading zeroes are cute too! */
}
dl {
    margin-left: 5%;
    /* i'm against using % units for major layout stuff because it often changes poorly
    based on screen size, but dl is one of my favourite elements to define with
    percentages! */
}
dt {
    background-color: #c00;
    color: #000;
    font-weight: bold;
    padding: 5px;
    padding-left: 0.75em;
    /* of course, giving it some room */
    margin-right: -10px;
    /* the padding is always 10px no matter the resolution so i can bypass it and stretch
    to the edge of the page. doesn't it look like it's pushing right from the edge? it's
    cool and cute! ha ha ha. */
}
dd {
    padding: 0.25em;
    padding-left: 0.5em;
    margin: 0.5em;
    margin-left: 5%; margin-right: 0;
    border-left: 1px dashed #999;
}

summary {
    color: #cc0; margin-left: 5%; padding-left: 0.5em;
    border-left: 2em solid #c00; border-bottom: 1px solid #c00; 
}

figure {
    margin: auto;
    width: fit-content;
    max-width: 80%;
    padding: 0 5px;
    border: 1px dashed;
    text-align: center;
}
figure img {
    max-width: 100%;
    max-height: 50vh;
    /* nobody really likes freakishly tall iamges, sadly */
}
figcaption {
    margin: 0.5em;
}

.center { text-align: center; }
img.center { display: block; width: fit-content; margin: 0.5em auto; }

.left { text-align: left; }
img.left { float: left; margin: 5px; margin-left: 0; }

.right { text-align: right; }
img.right { float: right; margin: 5px; margin-right: 0; }
/* these are classes i also almost always make for myself. positioning is nice! here
i've absolved you of the responsibility of using a separate class for images by
specifying what happens only if the element is an image; CSS is neat like that */

.deco { text-decoration: dashed underline; }
img.deco {
    padding: 3px; border: 1px dashed; ;
}
a:has(img) {
    background-color: #cc0; color: #000;
    /* if a link is just an image, it should at least be obvious you can click it! */
}
a:has(img):hover {
    background-color: #c00;
    /* extra confirmation. */
}

a, h1 a:hover, ul li::marker, ol li::marker {
    color: #c00;
}
h1, h2, a:hover, h1 a, h4, li ol li::marker, li ul li::marker {
    color: #cc0;
}
/* i know that variables are preferred for this sort of "easy setting of colours" thing,
but i avoid using them for reasons unknown even to myself. i guess it's not for me. */