* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

:root {
    /* Makes the scrollbars dark on Chromium-based browsers
       Firefox doesn't need this, because their scrollbars are tied to the background color
       Didn't test on Safari, but will probably do the same as Chromium-based browsers, as they're both based on webkit */
    color-scheme: dark;
}

/* Some grid stuff */
body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    max-width: 62em;
    margin-inline: auto;
    margin-block: 2em;
    padding-inline: 2em;
    background-color: #001;
    font-size: 1.05rem;
}

/* Don't want underlines in our cards, would do a:has(.card) but
   Firefox doesn't support that yet (without changing about:config) */
a {
    text-decoration: none;
}

/* Give the cards a background color and a nice glowy border, also some padding */
.card {
    border: 2px solid #334;
    border-radius: 1em;
    background-color: #112;
    color: #fff;
    padding: 1em;
    box-shadow: 0 0 .5em .25em #112;
    min-height: 100%;
}

/* Some other card styling */
.card h1 {
    font-size: 1.5em;
}

.card p {
    word-wrap: break-word;
}

.card img {
    width: 100%;
}

/* Strikethrough (I know I could've used <s> or <del>, but I didn't) */
.strikethrough { 
    text-decoration: line-through solid #f55;
    text-decoration-thickness: .15em;
}

/* Responsiveness (StYOUpiD mE, I DId deKStop FirSt) */
@media screen and (max-width: 50em) {
    body {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 40em) {
    body {
        grid-template-columns: 1fr;
    }
}