/*┏━━━━━━━━━━━━━━━❘ × ⋆⋅☆⋅⋆ × ❘━━━━━━━━━━━━━━━┓
/*                               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: #fcfdfd; /* Off-white so it's not super bright */
	--color-black: #121212; /* Technically it's dark gray, but you get it*/
	--color-link: #044259; /* Dark blue */
	--color-primary: #f4e285; /* yellow */
	--color-secondary: #6d3b3b; /* brown */
	--color-tertiary: #cf4950; /* red */
	--color-nav: #83b7b9;  /* blue */
	scrollbar-color: var(--color-tertiary) var(--color-secondary);
	}

/* Sectioning and Structuring
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
body {
	cursor: url("../images/icons/cursor-animation.png"), default;
	/* Box Model (from outside in) */
	max-width: 100vw;
	overflow-x: clip;
	/* Background */
	background-image: linear-gradient(45deg, #f4e285 25%, #F6F0CF 25%, #F6F0CF 50%, #f4e285 50%, #f4e285 75%, #F6F0CF 75%, #F6F0CF 100%);
	background-size: 56.57px 56.57px;
	animation: background-animation 2s linear infinite;
	/* Typography */
	color: var(--color-black);
	font-family: komika, "Comic Sans", sans-serif;
	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; 
}

@keyframes background-animation {
	0% { background-position: initial; }
	100% { background-position: 100px 0px; }
}

header, footer {
	/* Box Model (from outside in) */
	width: 100%;
	padding: 20px;
	/* Background */
	background: var(--color-secondary);
	/* Typography */
	color: var(--color-white);
	text-align: center;
}

footer a { 
	color: var(--color-nav); 
	text-decoration: none;
	}

nav ul { list-style-type: none; }

nav a { 
	text-decoration: none; 
	color: var(--color-black);
	}

nav li { display: inline-block; }

.nav-btn {
	position: relative;
	background: linear-gradient(120deg, #074f57 /* midnight green */  0%, #8cb369 /* olivine green */ 100%);
	background-repeat: no-repeat;
	background-size: 100% 0.2em;
	background-position: 0 100%;
	transition: background-size 0.25s ease-in;
	background-color: var(--color-nav);
	box-shadow: 3px 2px 0 black;
	margin: 4px 0;
	border-radius: 5px;
	padding: 0.5em;
}

.nav-btn:hover { background-size: 100% 100%; }
.nav-btn a { color: var(--color-white); }

details {
	/* Box Model (from outside in) */
	margin: 5px;
	}

details[open] > summary {
	list-style-type: " ⇡ ";
	}

summary {
	/* Box Model (from outside in) */
	border: 2px solid black;
	border-radius: 10px;
	padding: 0.5em;
	/* Background */
	background-color: var(--color-white);
	/* Typography */
	font-weight: bold;
	/* Misc*/
	cursor: url("../images/icons/pointer-animation.png"), pointer;
	list-style-type: " ⇢ ";
}

summary::-webkit-details-marker { display: none; }
	
/*Focus and focus-visibile is for people who navigate using the tab key*/
summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted var(--color-tertiary);}

/* Links
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
a { 
	cursor: url("../images/icons/pointer-animation.png"), pointer;
	color: var(--color-link);
	/* Relatively sized thickness and offset */ 
	text-decoration-thickness: max(0.08em, 1px); 
	text-underline-offset: 0.35em;	
	}

a:visited { color: var(--color-tertiary); }
/*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: "komika";
    src: url("../fonts/komika.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: "fogtwo";
    src: url("../fonts/fogtwono5-webfont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
	}

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

main  { 
	padding: 1em;
	text-wrap: pretty; 
	list-style-position: inside;
	}

p, li { padding: 0.5rem; }

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

h1, h2, h3, h4, h5, h6 {
	margin: 1rem;
	text-wrap: balance;
	text-align: center;
	font-family: "fogtwo";
	line-height: calc(100% + 1rem);
	text-shadow: 5px 5px 0 #ff005e, 10px 10px 0 #00d4ff;
    animation: shadow-dance 5s infinite;
	}

h1 {
	font-size: calc(1rem + 5vw);
	letter-spacing: 0.2rem;
	object-fit: contain;
	font-weight: bold;
	}

h2 { font-size: calc(1rem + 4vw); }

h3, h4, h5, h6 { font-size: calc(1rem + 2vw); }

dl {
	padding: 1rem;
	background-color: var(--color-black);
	color: var(--color-white);
	min-width:80%;
}

dt { font-weight: bold; }

dd { grid-column-start: 2; }

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

/* Layout */
.layout {
	display: grid;
	grid-template-columns:  repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0;
	grid-row-gap: 0;
	max-width: 98vw;
	}

.note {
	grid-area: 1 / 1 / 2 / 3;
	margin:45px auto 20px;
	padding:30px 1em 1em;
	position: relative;
	box-shadow:3px 3px 5px #666;
	background: var(--color-white);
}

.links {
	grid-area: 1 / 3 / 2 / 4;
	margin-inline: 20px;
	width: 100%;
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	border: 3px solid var(--color-black);
	padding: 0.5em;
	background-color: var(--color-nav);
}

@media only screen and (max-width : 800px) { 
	.layout { display: flex; flex-wrap: wrap; }
	.note { order: 1; width: 100%; }
	.links { order: 2; width: 100%; }
	}

.skewed-box {
	transform: skew(3deg, 5deg);
	border-top: 4px solid #000000;
	border-left: 4px solid #000000;
	border-right: 4px solid #000000;
	border-bottom: 4px solid #000000;
	margin: auto;
}

.tape {
background:url(../images/masking01.png) no-repeat center;
height:50px;
position:absolute;
top:-25px;
width:100%
}

@keyframes shadow-dance {
    0%, 100% { text-shadow: 5px 5px 0 #ff005e, 10px 10px 0 #00d4ff; }
    50% { text-shadow: -5px -5px 0 #00d4ff, -10px -10px 0 #ff005e; }
}

.section-even { background-color: #F6F0CF; }

.section-odd { background-color: var(--color-primary); }

.section-even, .section-odd { padding: 0.3em; margin: 20px 0; }

/* Preloader */
.preloader { 
	background-color: black;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loader {
	--c1:#673b14;
	--c2:#f8b13b;
	width: 40px;
	height: 80px;
	border-top: 4px solid var(--c1);
	border-bottom: 4px solid var(--c1);
	background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;
	display: grid;
	overflow: hidden;
	animation: l5-0 2s infinite linear;
}
.loader::before,
.loader::after {
	content: "";
	grid-area: 1/1;
	width: 75%;
	height: calc(50% - 4px);
	margin: 0 auto;
	border: 2px solid var(--c1);
	border-top: 0;
	box-sizing: content-box;
	border-radius: 0 0 40% 40%;
	-webkit-mask: 
		linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	background: 
		linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,
		linear-gradient(var(--c2) 0 0) center/0 100%;
	background-repeat: no-repeat;
	animation: inherit;
	animation-name: l5-1;
}
.loader::after {
	transform-origin: 50% calc(100% + 2px);
	transform: scaleY(-1);
	--s:3px;
	--d:180deg;
}
@keyframes l5-0 {
	80%  {transform: rotate(0)}
	100% {transform: rotate(0.5turn)}
}
@keyframes l5-1 {
	10%,70%  {background-size:100% 205%,var(--s,0) 100%}
	70%,100% {background-position: top,center}
}

@media (prefers-reduced-motion: reduce) {
	body, h1, h2, h3, h4, h5, h6 { animation: none; }
	}