/*┏━━━━━━━━━━━━━━━❘ × ⋆⋅☆⋅⋆ × ❘━━━━━━━━━━━━━━━┓
/*                               Global styles
/*┗━━━━━━━━━━━━━━❘ × SECTION × ❘━━━━━━━━━━━━━┛*/

/* CSS Reset
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
* {
	box-sizing: border-box; /* Use a more-intuitive box-sizing model to ensure proper sizing */ 
	margin: 0; /* Remove default spacing */ 
	/* Fonts */
	font: inherit; 
	font-size: inherit;
	}

/* Color Schemes
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
:root {
	/* Basic colors */
	--color-white: #fdfbd4; /* Cream so it"s not super bright */
	--color-black: #121212; /* Technically it"s dark gray but you get it*/
	--color-accent: #f93822; /* Bright red */
	--color-blue: #044259; /* Dark blue */
	--color-orange: #ff7518; /* Pumpkin orange */
	/* Light color scheme */
	--color-index-light: #f8ebb7;/* Beige */
	--color-link-light: #9614d0; /* Supervillain purple */
	/* Dark color scheme */
	--color-index-dark: #002a00; /* Dark green */
	--color-link-dark: #19e63f; /* Supervillain green */
	}

/* Sectioning and Structuring
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
body {
	/* Box Model (from outside in) */
	max-width: 100%;
	/* Background */
	background-color: var(--color-white);
	/* Typography */
	color: var(--color-black);
	font-family: "old newspaper";
	font-size: 1.5rem;
	line-height: calc(100% + 0.5rem); /* Maths should make it so the line height is relative to font-size*/
	-webkit-font-smoothing: antialiased; /* Improve text rendering */ 
	overflow-wrap: break-word; 
}

header { width: 100%; text-align: center; }

footer {
	/* Box Model (from outside in) */
	width: 100%;
	padding: 20px;
	/* Typography */
	text-align: center;
	}

nav  a {
	color: var(--color-blue);
	text-decoration: none;
	font-variant: small-caps;
	}

/* Links
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
a { 
	color: var(--color-link-light);
	/* Relatively sized thickness and offset */ 
	text-decoration-thickness: max(0.08em, 1px); 
	text-underline-offset: 0.35em;	
	}

a:visited { color: var(--color-accent); }
/*Focus and focus-visibile is for people who navigate using the tab key*/
a:focus {
	outline: none;
	scroll-padding-block-end: 8vh; /* Scroll margin allowance below focused elements to ensure they are clearly in view */ 
}

a:focus-visible {outline: 3px dotted var(--color-accent);}

a:target { scroll-padding-block-start: 2rem; /* Scroll margin allowance above anchor links */ } 

/* Fonts
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */

@font-face {
    font-family: "old newspaper";
    src: url("../fonts/oldnewspapertypes.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: "punk typewriter";
    src: url("../fonts/punk_typewriter.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
	}

/* Text
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */

p, li  { 
	margin: 0.5rem;
	padding: 1em;
	text-wrap: pretty; 
	list-style-position: inside;
	}

p:first-of-type::first-letter { font-size: 2rem; }

ul, ol { padding-inline: 1em; }

h1, h2, h3, h4, h5, h6 {
	margin: 1rem;
	text-wrap: balance;
	text-align: center;
	font-family: "punk typewriter";
	letter-spacing: 0.1em;
	line-height: calc(100% + 1rem);
	}

h1 {
	color: var(--color-accent);
	font-size: 5rem;
	}

h2 { font-size: 4rem; }

h3, h4, h5, h6 { font-size: 3rem; }

strong, b { font-weight: bold; }

strong { font-variant: small-caps; }

em, i { font-style: italic; }

em { letter-spacing: 1px; }

/* Media
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
img, video, canvas, picture, figure, svg {
	/* Display and Visibility */
	object-fit: contain;
	vertical-align: middle;
	/* Box Model (from outside in) */
	max-width: 100%;
	height: auto;
	/* Typography */
	font-style: italic; /*For alt text*/
	}

/* ┏━━━━━━━━━━━━━━━❘ × ⋆⋅☆⋅⋆ × ❘━━━━━━━━━━━━━━━┓
/*                                   Layout
/* ┗━━━━━━━━━━━━━━❘ × SECTION × ❘━━━━━━━━━━━━━┛*/
	
/*For when I want to center stuff*/
.center {
	/* Display and Visibility */
	display: block;
	/* Box Model (from outside in) */
	margin: auto;
	border-radius: 10px;
	}

.columns { columns: 500px; }

hr { margin-block: 20px; }

.index { 
	margin-block: 10px; 
	background-color: var(--color-index-light);
	}

.notice { color: var(--color-accent); }

.indent li { margin-left: 4em; }

/* Dark Mode
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.dark-theme { 
	background-color: var(--color-black);
	color: var(--color-white); 
	} 

.dark-theme img { filter: brightness(85%); } 

.dark-theme a { color: var(--color-link-dark);}

.dark-theme nav a {color: var(--color-orange);}

.dark-theme .index { background-color: var(--color-index-dark); }