/* Resets and defaults */
html {
    scrollbar-gutter: stable;
    hanging-punctuation: first last;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}
p,
li,
figcaption {
    font-size: 1.2rem;
    font-weight: 300;
    text-wrap: pretty;
}
p {
    margin-block-end: 2rem;
}
body {
    margin: 0;
    min-block-size: 100svh;
}
img,
svg,
video {
    display: block;
    max-width: 100%;
}
:target {
    scroll-margin-block: 2rem;
}
@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
    }
}
/* Site styling */
:root {
    --w-break: 600px;

    --sz-content-width: 100ch;

    --ff-base: "Noto Serif";
    --ff-accent: "Noto Sans";
    --ff-code: "Noto Sans Mono";

    --color-base: oklch(0.3 0.02 290);
    --color-base-dark: oklch(from var(--color-base) calc(l * 0.75) c h);
    --color-base-light: oklch(from var(--color-base) calc(l * 1.25) c h);
    --color-text: oklch(from var(--color-base) 0.85 c h);
    --color-text-eyebrow: oklch(from var(--color-text) 0.6 c h);
    --color-text-heading: oklch(from var(--color-text) 0.95 c h);
    --color-text-deemph: oklch(from var(--color-text) 0.5 c h);
}
html {
    font-family: var(--ff-base);
}
body {
    background-color: var(--color-base);
    display: grid;
    grid-template-rows: auto 500px auto 150px;
    grid-template-columns: 1rem 1fr 1rem;
    grid-template-areas:
        "header header header"
        "banner banner banner"
        ". main ."
        "footer footer footer";
}
header {
    grid-area: header;
    background-color: var(--color-base-dark);
    z-index: 1;
    opacity: 95%;
}
header p {
    font-size: 1rem;
    margin: 1.5rem;
}
footer {
    grid-area: footer;
    background-color: var(--color-base-dark);
}
main {
    grid-area: main;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ff-accent);
    font-weight: 700;
    font-stretch: semi-condensed;
}
h1,
h2,
h3 {
    color: var(--color-text-heading);
}
p,
li,
figcaption {
    color: var(--color-text);
}
.banner {
    grid-row: header / banner;
    grid-column: banner;
    background: url("/images/banner.png") no-repeat center;
    background-size: cover;
    align-content: end;
}
.banner > * > h1 {
    color: white;
    font-size: 5rem;
    text-shadow: 1px 1px 3px var(--color-base);
}
.wrapper {
    max-inline-size: var(--sz-content-width);
    margin-inline: auto;
    padding-inline: 1rem;
}
.center {
    text-align: center;
}
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
footer ul > li {
    display: inline;
    margin-left: 1rem;
    margin-right: 1rem;
}
footer p {
    font-size: 0.8rem;
}
ul.socials img {
    display: inline;
    width: 32px;
    height: 32px;
}
.eyebrow {
    display: block;
    margin: 0;
    color: var(--color-text-eyebrow);
    font-size: 0.9rem;
    text-transform: uppercase;
}
span.domain {
    color: var(--color-text-deemph);
}
/* Game Release Info box under the banner */
section.release {
    margin-block-start: 2rem;
    margin-block-end: 2rem;
    max-inline-size: var(--sz-content-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "platforms date";
    @media (width < 600px) {
        grid-template-columns: 1fr;
        grid-template-areas: "date" "platforms";
    }
}
.platforms {
    grid-area: platforms;
    text-align: center;
    align-content: center;
}
.release-date {
    grid-area: date;
    text-align: center;
    align-content: center;
}
.release-date p {
    margin: 0;
}
.platforms > ul {
    list-style: none;
}
.platforms > ul > li {
    display: inline;
    margin: 1rem;
}
img.platform {
    display: inline;
    width: 48px;
    height: 48px;
}
/* Game Features sections */
section.feature {
    max-inline-size: calc(var(--sz-content-width) * 1.25);
    margin-inline: auto;
    margin-block-start: 6rem;
    display: grid;
    gap: 1rem;
}
section.feature:nth-child(odd) {
    text-align: left;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "image text";
    @media (width < 600px) {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "text";
    }
}
section.feature:nth-child(even) {
    text-align: right;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "text image";
    @media (width < 600px) {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "text";
    }
}
.feature .feature-higlight {
    grid-area: text;
}
.feature-highlight h2 {
    text-shadow: 1px 1px 2px var(--color-base-dark);
}
.feature .feature-image {
    grid-area: image;
}