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

/* CSS Reset (This undoes the browser defaults)
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
* { 
	box-sizing: border-box; /* Use a more-intuitive box-sizing model to ensure proper sizing */ 
	margin: 0; /* Remove default spacing */ 
	/* Make sure fonts are the same everywhere */ 
	font: inherit;
	font-size: inherit;
	}

/*   Background
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
html {
	--s: 167px; /* Control the size of the pattern */
	--c1: #ffffff;
	--c2: #044259;
	--_g: #0000 52%,var(--c1) 54% 57%,#0000 59%; 
	background: 
	radial-gradient(farthest-side at -33.33% 50%,var(--_g)) 0 calc(var(--s)/2),
	radial-gradient(farthest-side at 50% 133.33%,var(--_g)) calc(var(--s)/2) 0,
	radial-gradient(farthest-side at 133.33% 50%,var(--_g)),
	radial-gradient(farthest-side at 50% -33.33%,var(--_g)),
	var(--c2);
	background-size: calc(var(--s)/4.667) var(--s),var(--s) calc(var(--s)/4.667);
	}

/* 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-accent: #0be2ee; /* blue */
	/* Light color scheme */
	--color-link-light: #044259; /* Dark blue */
	/* Dark color scheme */
	--color-link-dark: #0be2ee; /* Light blue */ 
	/*Window Styles*/
	--window-spacing: 6px;
	--window-border: 1px solid;
	--window-border-radius: 6px;
	--window-border-color: #000000b3;
	--window-background-color: #4580c4;
	--window-background-glass-stripes: linear-gradient(135deg,#fff5 70px,transparent 100px),linear-gradient(225deg,#fff5 70px,transparent 100px),linear-gradient(54deg,#0002 0 4%,#6661 6% 6%,#0002 8% 10%,#0002 15% 16%,#aaa1 17% 18%,#0002 23% 24%,#bbb2 25% 26%,#0002 31% 33%,#0002 34% 34.5%,#bbb2 36% 40%,#0002 41% 41.5%,#bbb2 44% 45%,#bbb2 46% 47%,#0002 48% 49%,#0002 50% 50.5%,#0002 56% 56.5%,#bbb2 57% 63%,#0002 67% 69%,#bbb2 69.5% 70%,#0002 73.5% 74%,#bbb2 74.5% 79%,#0002 80% 84%,#aaa2 85% 86%,#0002 87%,#bbb1 90%) left center/100vw 100vh no-repeat fixed;
	--window-background: linear-gradient(to right,#ffffff66,#0000001a,#ffffff33),var(--window-background-color);
	--control-border-color: #0000004d;
	--control-border-radius: 5px;
	--control-inset-shadow: inset 0 0 0 1px #fffa;
	--control-background: linear-gradient(#ffffff80,#ffffff4d 45%,#0000001a 50%,#0000001a 75%,#ffffff80);
	--control-background-close: radial-gradient(circle at -60% 50%,#0007 5% 10%,#0000 50%),radial-gradient(circle at 160% 50%,#0007 5% 10%,#0000 50%),linear-gradient(#e0a197e5,#cf796a 25% 50%,#d54f36 50%);
	}

/* Sectioning and Structuring
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
body { 
	/* Typography */
	color: var(--color-black);
	font-family: "joystix", monospace, sans-serif;
	font-size: 1.2rem;
	line-height: calc(100% + 0.9rem); /* Maths should make it so the line height is relative to font-size*/
	/* Improve text rendering */ 
	-webkit-font-smoothing: antialiased; 
	overflow-wrap: break-word;
	} 

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

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

/* Navigation Menu */

nav {
	text-align: center;
	}

nav li {
	display: inline-block;
	list-style: none;	
	line-height: calc(100% + 2rem);
	}

nav a {
	text-decoration: none;
	color: var(--color-black);
	}
	
.fake-button {
	/* Box Model (from outside in) */
	margin: 5px;
	border: 2px inset white;
	border-radius: 10px;
	padding: 5px;
	/* Background */
	background-color: var(--color-white);
	}

/* Links */ 
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: #00E197; }

a:focus {outline: none;}

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

/* Fonts
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
@font-face {
    font-family: "interfearence";
    src: url("../fonts/interfearence.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: "joystix";
    src: url("../fonts/joystix_monospace.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
	}

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

/*Paragraphs and lists*/
p, ul, ol, li  {
	padding: 1rem;
	text-wrap: pretty;
	list-style-position: inside;
	list-style-image: url("../images/surf/shark.png");
	}

/*Heading*/
h1, h2, h3, h4, h5, h6 {
	margin: 1rem;
	font-family: "interfearence";
	text-wrap: balance;
	text-align: center;
	letter-spacing: 0.2rem;
	line-height: calc(100% + 1rem);
	text-transform: uppercase;
	}

h1 { 
	font-size: 4rem; 
	color: var(--color-black); 
	text-shadow: 5px 5px 0 var(--color-accent);
	}

h2 { font-size: 2rem; }

/* Media
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
   
/* Responsiveness */
img, video, canvas, picture, figure, svg {
	display: block;
	margin: auto;
	object-fit: contain;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic; /*For alt text*/
	}
	
/*┏━━━━━━━━━━━━━━━❘ × ⋆⋅☆⋅⋆ × ❘━━━━━━━━━━━━━━━┓
/*                                   Layout
/*┗━━━━━━━━━━━━━━❘ × SECTION × ❘━━━━━━━━━━━━━┛*/

/* h1 behind surfboard
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.textover { 
	position: relative; 
	}
	
.textover img { 
	max-width: 100%; 
	display: block; 
	margin: 50px auto 50px auto; 
	}
	
.textover figcaption {
	/* Cover over image */
	position: absolute; 
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;
	/* Center text */
	display: flex; 
	align-items: center;
	justify-content: center;
	}

/* Tumblr Wobble by https://loveberry.nekoweb.org
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.tumblrwob {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	}

.wobble:nth-child(4n+1) {
	-webkit-animation:tumblrwobble 4s ease-in-out -.5s infinite;
	animation:tumblrwobble 4s ease-in-out -.5s infinite
	}

@keyframes tumblrwobble{
	0%  { transform:translateY(5%) skew(3deg) }
	25% { transform:translateY(-5%) }
	50% { transform:translateY(5%) skew(-3deg) }
	75% { transform:translateY(-5%) }
	to { transform:translateY(5%) skew(3deg) }
	}

/* Palm trees
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.palm {
	position: relative;
	top: 8px;
}

/* Windows based off https://unpkg.com/7.css
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.window {
	margin: 5px auto 10px auto;
	max-width: 95%;
}
	
.title-bar {
	/* Display and Visibility */
	display: flex;
	/* Flexbox properties */
	align-items: right;
	justify-content: space-between;
	/* Box Model (from outside in) */
	box-shadow: inset 0 0 0 1px #fff9;
	box-shadow: inset 0 1px 0 #fffd, 
		inset 1px 0 0 #fffd, 
		inset -1px 0 0 #fffd; 
	border: var(--window-border) var(--window-border-color);
	border-radius: var(--window-border-radius) var(--window-border-radius) 0 0;
	padding: var(--window-spacing);
	padding-top: 0;
	/* Background */
	background: var(--window-background);
	background-color: var(--window-background-color);
	}
	
.window-body.has-space { padding: var(--window-spacing); }

.window-body {
	/* Box Model (from outside in) */
	box-shadow: 0 0 0 1px #fff9;
	border: var(--window-border) var(--window-border-color);
	/* Background */
	background: #f0f0f0;
	}

button[aria-label="Minimize"] { background: url("../images/surf/minimize.png") no-repeat center 10px,var(--control-background); }

button[aria-label="Maximize"] { background: url("../images/surf/maximize.png") no-repeat 50%,var(--control-background); }

button[aria-label="Close"] {
	box-shadow: var(--control-inset-shadow);
	background: url("../images/surf/close.png") no-repeat 50%,var(--control-background),var(--control-background-close);
	}

button {
	/* Position and Layout */
	float: right;
	/* Box Model (from outside in) */
	margin-block: auto;
	box-shadow: var(--control-inset-shadow);
	border: var(--window-border) var(--control-border-color);
	border-color: var(--window-border-color);
	min-height: 19px;
	min-width: 29px;
	padding: 6px;
	}
	
/*┏━━━━━━━━━━━━━━━❘ × ⋆⋅☆⋅⋆ × ❘━━━━━━━━━━━━━━━┓
/*                                   Toolbar
/*┗━━━━━━━━━━━━━━❘ × SECTION × ❘━━━━━━━━━━━━━┛*/

/*  Toolbar */
.toolbar {
	/* Display and Visibility */
	display: flex;
	justify-content: space-evenly;
	overflow: clip;
	/* Box Model (from outside in) */
	padding-bottom: 10px;
	/* Background */
	background: var(--color-accent);
	color: var(--color-black);
	}

/* Media Query for mobile responsiveness */
@media only screen and (max-width : 800px) { 
	.toolbar { font-size: 0.7em; }
	}
	
.toolbar-label { text-align: center; }

.toggleSwitch span span { display: none; }  

.toggleSwitch {
	display: inline-block;
	height: auto;
	position: relative;
	cursor: pointer;
	width: 10em;
	background-color: #fafafa;
	border: 1px solid #ccc;
	border-radius:5px;
	user-select: none;
	}

.toggleSwitch label,
.toggleSwitch > span {
	vertical-align: middle;
    }
	
.toggleSwitch label {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
    }

.toggleSwitch > span span {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: block;
	width: 50%;
	font-size: 0.8em;
	width: auto;
	left: 0;
	top: -1px;
	opacity: 1;
	text-align: center;
	}

.toggleSwitch a {
	position: absolute;
	right: 50%;
	z-index: 4;
	display: block;
	top: 3px;
	bottom: 3px;
	padding: 0;
	left: 3px;
	width: 50%;
	background-color: #666;
	border-radius: 4px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
	
.toggleSwitch > span span:first-of-type {
	color: #FFF;
	opacity: 1;
	left: 0;
	width: 50%;
    }

.toggleSwitch > span span:last-of-type {
	left:auto;
	right:0;
	color: #999;
	width: 50%;
    }
	
.toggleSwitch > span:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: -2px;
	background-color: #fafafa;
	border: 1px solid #ccc; 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
    }
	
.toggleSwitch input:checked ~ a { left: calc(50% - 3px); }
  
.toggleSwitch input:checked ~ span span:first-of-type {
	left:0;
	color:#999;
    }

.toggleSwitch input:checked ~ span span:last-of-type {
	opacity: 1;
	color:#FFF;
    }

	
/* Dark Mode
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.dark-theme main a { color: var(--color-link-dark);}

.dark-theme .window-body { 
	background-color: var(--color-black); 
	color: var(--color-white);
	}

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

/* Switch to plain fonts
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.plain-text * { font-family: tahoma, verdana, arial, sans-serif; }
.plain-text .window { font-family: tahoma, verdana, arial, sans-serif; }
 
/* Book-like text alignment 
/*꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷❘ × SUBSECTION × ❘˘꒷꒦˘꒷꒦꒷˘꒦꒷꒦˘꒦˘꒷꒦꒷ */
.justify-text main:not(h1, h2, h3, h4, h5, h6) {
	text-indent: 1.5rem; 
	text-align: justify; 
	}