/* Variables */
:root {
    --jltg-color: #202f40;
    --jltg-color--rgb: 32 47 64;
    --jltg-color--secondary: #4b5b6c;
    --jltg-bg: #f0f0f0;
    --jltg-bg--secondary: #bbc8d7;

    --jltg-link: #0C4CA3;
    --jltg-link--hover: #102540;

    --jltg-accent: hsl(359 82 56);
    --jltg-accent--hover: hsl(359 65 45);
    --jltg-accent-text: #f0f0f0;
    --jltg-accent-text--hover: #cccfd2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --jltg-color: #f0f0f0;
        --jltg-color--rgb: 240 240 240;
        --jltg-color--secondary: #bbc8d7;
        --jltg-bg: #1d2936;
        --jltg-bg--secondary: #4b5b6c;

        --jltg-link: #a9d0fd;
        --jltg-link--hover: #6b92be;

        --jltg-accent: hsl(40 100 63);
        --jltg-accent--hover: hsl(40 83 46);
        --jltg-accent-text: #202f40;
        --jltg-accent-text--hover: #0d1115;
    }
}

/* Base rules */
body {
    background-color: var(--jltg-bg);
    color: var(--jltg-color);
    font-family: 'FigTree', 'Open Sans', 'Arial', system-ui, sans-serif;
    line-height: 1.6;
    font-size: 1.15rem;
}

a {
    color: var(--jltg-link);
    text-decoration: none;
    transition: .15s color;
}

a:hover {
    color: var(--jltg-link--hover);
    text-decoration: underline;
}

h1 {
    letter-spacing: 1.25px;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.25;
    margin: 0.25em 0;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 0.25em;
}

.jltg-button {
	background-color: var(--jltg-button-background);
	border: solid 3px var(--jltg-button-background);
	color: var(--jltg-button-color);
	padding: .5em 1.2em;
	border-radius: .85em;
	margin: 1rem 1ch 0 0;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	transition: background-color .2s, border .2s, color .2s;
    white-space: nowrap;

	--jltg-button-background: var(--jltg-accent);
	--jltg-button-color: var(--jltg-accent-text);
	--jltg-button-background--hover: var(--jltg-accent--hover);
	--jltg-button-color--hover: var(--jltg-accent-text--hover);
}

.jltg-button:hover {
    text-decoration: none;
	color: var(--jltg-button-color);
	--jltg-button-background: var(--jltg-button-background--hover);
	--jltg-button-color: var(--jltg-button-color--hover);
}

/* Nav bar */
.jltg-header-wrapper {
    background-image: linear-gradient(to bottom, hsl(359 82 56) 0% 10%, hsl(20 90 60) 10% 20%, hsl(40 100 63) 20% 100%);
}

.jltg-header {
    margin: 0 auto 2rem;
    padding: 1rem 1rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 70ch;
}

.jltg-wordmark-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    color: #202f40;
    font-weight: bold;
    font-size: 1.25rem;
    letter-spacing: 0.05ch;
    line-height: 1.25;
}

.jltg-wordmark {
    height: 2rem;
    width: auto;
}

.jltg-navigation {
    display: flex;
    gap: 2ch;
}

.jltg-navigation a {
    color: #202f40;
}

@media only screen and (width < 400px) {
    .jltg-navigation {
        display: none;
    }
}

/* Main content */
main {
    margin: 0 auto 1rem;
    border-radius: .5rem;
    padding: 2rem;
    width: calc(100% - 5rem);
    max-width: 70ch;

    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

/* Page hero */
.jltg-logo {
    width: min(40ch, 50vw);
}

.jltg-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.jltg-hero p {
    font-style: italic;
    color: var(--jltg-color--secondary);
}

/* Introduction */
.jltg-intro {
    text-align: center;
    max-width: 35ch;
    font-size: 1.05em;
}

.jltg-intro p {
    color: var(--jltg-color--secondary);
}

/* Sections */
.jltg-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: center;
    width: 100%;

    border: solid 1px rgb(var(--jltg-color--rgb)/20%);
    padding: 1.5rem 2rem;
    border-radius: 2rem;
}

.jltg-section-icon {
    fill: var(--jltg-color);
    flex: 0 2 100px;
    background-color: var(--jltg-bg--secondary);
    border-radius: 100%;
    padding: 15px;
}

.jltg-section-content {
    flex: 2 1 20ch;
}

/* Footer */
footer {
    background-color: rgb(var(--jltg-color--rgb)/5%);
    color: var(--jltg-color--secondary);
    font-size: 0.8em;
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    margin: 3rem 0 1rem;
}

/* Fonts */
@font-face {
	font-family: "Figtree";
	src: local('Figtree'),
       url('/rules/fonts/Figtree.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: "Figtree";
	src: local('Figtree'),
       url('/rules/fonts/Figtree-Italic.woff2') format('woff2');
	font-weight: 300 900;
	font-display: swap;
	font-style: italic;
}

/*   Reset CSS   */
*, *::before, *::after {
	box-sizing: content-box;
}

* {
	margin: 0;
	padding: 0;
	font: inherit;
	vertical-align: baseline;
}

img, picture, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}

body {
	min-height: 100vh;
	min-height: 100svh;
}

html {
	color-scheme: dark light;
	scroll-behavior: smooth;
}