:root {
	/* Variables */
	--text-mod: 1;
	--var-c-primary: #FAFAFA;
	--var-c-secondary: #EAEAEB;
	--var-c-text: #383A42;
	--var-c-black: 0;
	/* Constants */
	--const-element-on-top: 99;
	--const-toast-bottom-margin: 1em;
	--const-toast-rounding: 0.7em;
	--const-element-rounding: 0.7em;
	--const-max-content-width: 55em;
	/* Must be the same as in script.js */
	--const-toast-timer: 2000ms;
}

@media (prefers-color-scheme: dark) {
	:root {
		--var-c-primary: #181A1F;
		--var-c-secondary: #282C34;
		--var-c-text: #ABB2BF;
	}
}

*, *::before, *::after {
	box-sizing: border-box;
	word-wrap: break-word;
	-webkit-user-select: none;
	user-select: none;
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
}

@font-face {
	font-family: 'Fascinate';
	src: local('Fascinate'), url('../fonts/Fascinate.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Kavivanar';
	src: local('Kavivanar'), url('../fonts/Kavivanar.woff2') format('woff2');
	font-display: swap;
}

body {
	font-family: 'Kavivanar', sans-serif;
	font-size: calc((14px + 0.35vw) * var(--text-mod));
	background-color: var(--var-c-primary);
	color: var(--var-c-text);
	scrollbar-width: calc((14px + 0.35vw) * var(--text-mod) * 1.1);
	scrollbar-color: var(--var-c-text) var(--var-c-secondary);
	overflow-wrap: break-word;
}

textarea {
	scrollbar-width: calc((14px + 0.35vw) * var(--text-mod) * 1.1);
	scrollbar-color: var(--var-c-text) var(--var-c-secondary);
}

body::-webkit-scrollbar, textarea::-webkit-scrollbar {
	width: calc((14px + 0.35vw) * var(--text-mod) * 1.1);
}

body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track {
	background: var(--var-c-secondary);
	border-radius: 1em;
}

body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
	border: calc((14px + 0.35vw) * var(--text-mod) * 0.15) solid var(--var-c-secondary);
	background-color: var(--var-c-text);
	border-radius: 1em;
}

/* CSS for iOS devices only
*/

@supports (-webkit-overflow-scrolling: touch) {
	input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select:focus, textarea {
		font-size: calc((16px + 0.35vw) * var(--text-mod));
	}
}

/* Setup margins for text
*/

h1, h2, h3, h4, h5, h6, p, span, label, a, input {
	margin-top: 0.3em;
	margin-bottom: 0.5em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Fascinate', serif;
}

h1 {
	font-size: 1.7em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.3em;
}

h4 {
	font-size: 1.1em;
}

button, .css-file, form select, progress, .border, body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, #js-toast>div>p {
	box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255, 255, 255, 0.6), inset -0.2em -0.2em 0.2em 0 rgba(0, 0, 0, 0.6);
}

form textarea, input, .code pre, body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track {
	box-shadow: inset 0.1em 0.1em 0.1em 0 rgba(0, 0, 0, 0.4), inset -0.1em -0.1em 0.1em 0 rgba(255, 255, 255, 0.4);
}

.code, .code pre {
	font-family: monospace;
}

.code pre {
	line-height: 0;
	counter-reset: line;
}

pre span {
	display: block;
	line-height: 1.5em;
	white-space: pre-wrap;
}

pre span::before {
	counter-increment: line;
	content: counter(line);
	display: inline-block;
	border-right: 0.15em solid;
	padding: 0 0.5em;
	margin-right: 0.5em;
}

label {
	display: block;
}

.setting-preview {
	margin: 0.2em;
	border-radius: var(--const-element-rounding);
	overflow: hidden;
}

/* Pull content to the rhs and lhs respectively
*/

.right {
	position: relative;
	padding-right: 0;
	float: right;
}

.left {
	position: relative;
	padding-left: 0;
	float: left;
}

/* Define a section, this will expand to fill the whole page. meaning content is in horizontal 'stripes'
*/

.section, .section--app-bar, .section--nav-bar, .app-bar, #js-toast {
	width: 100%;
	padding: 0;
	overflow: auto;
}

.app-bar>div {
	display: flex;
}

.app-bar .left {
	min-width: 0;
	overflow: hidden;
	flex: 1;
}

.app-bar h1 {
	font-size: 2.1em;
	margin: 0 0.15em;
}

.app-bar .left h1 {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#search-results {
	display: inline-block;
	width: 100%;
}

#search-results>li {
	list-style: none;
	display: inline-block;
	border-radius: var(--const-element-rounding);
	text-align: center;
}

.app-bar a, #search-results>li>a {
	text-decoration: none;
	margin: 0;
}

#search-results>li>a>div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: var(--const-element-rounding);
	padding: 0.5em;
}

#search-results>li>a>div>div {
	width: 100%;
}

#search-results>li>a>div>div>* {
	text-align: center;
}

.section--app-bar, .section--nav-bar, #js-toast {
	position: fixed;
	z-index: var(--const-element-on-top);
}

.section__content--settings {
	margin: 0;
	padding: 0.5em 1em;
	max-width: 1000;
}

/* Justify the text to keep it looking tidy
*/

.section__content p {
	text-align: justify;
}

/* Centre content when the page is greater than 55em wide
*/

nav, .section__content, .section__content--settings, .section>div, #js-toast>div {
	max-width: var(--const-max-content-width);
	margin: auto;
	padding: 1em;
	overflow: hidden;
}

/* Define an image - this will resize as the screen does so the page is adaptive
*/

.img--scale, .img--fixed, .img--content {
	padding: 0.15em 1em;
}

.img--content {
	width: 40%;
}

/* Define a wide image - this will always take up the width of the screen
*/

.img--content-wide {
	width: 100%;
	padding: 0.15em 0;
}

/* Make all of the actual images (inside the image containers fill the container) Give these a max height so the whole screen isn't taken up.
*/

.img--content img, .img--content-wide img, .img--fixed img, .img--scale img {
	border-radius: var(--const-element-rounding);
	max-height: calc(var(--const-max-content-width) / 2);
	display: block;
}

.img--content img, .img--content-wide img, .img--scale img {
	width: 100%;
	margin: 0 auto;
}

#search-results>li {
	height: 10.5em;
	float: left;
	width: calc(100% / 4);
	padding: 0.3em;
}

.icon {
	float: left;
	width: calc(100% / 6);
	padding: 0.7em;
}

.icon--grid-l {
	width: calc(100% / 4);
	padding: 1.4em;
}

.icon--grid-xl {
	width: calc(100% / 2);
	padding: 1.4em;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
}

/* Clear floats after the columns */

.row::after {
	content: "";
	display: table;
	clear: both;
}

/* Medium form factors 50 * 16 px
*/

@media only screen and (max-width: 50em) {
	.img--content {
		width: 50%;
	}
	.icon--grid {
		width: calc(100% / 4);
	}
	.icon--grid-l, #search-results>li {
		width: calc(100% / 3);
	}
	.icon--grid-xl {
		width: 100%;
	}
}

/* Small form factors 25 * 16 px
*/

@media only screen and (max-width: 25em) {
	.img--content {
		width: 100%;
		padding: 0.15em 0;
	}
	.icon--grid {
		width: calc(100% / 3);
	}
	.icon--grid-l, #search-results>li {
		width: calc(100% / 2);
	}
	.icon--grid-xl {
		width: 100%;
	}
}

/* Images inside divs with class = img, icon fill the div, set max height
*/

.img img, .icon img {
	border-radius: var(--const-element-rounding);
	max-height: calc(var(--const-max-content-width) / 2);
	display: block;
	width: 100%;
	margin: 0 auto;
}

.img--fixed {
	width: fit-content;
}

.icon--grid-l p, .icon--grid p {
	text-align: center;
	padding-top: 0.5em;
}

/*
Define the nav
*/

nav {
	position: relative;
	overflow: hidden;
	padding-top: 0;
	padding-left: 1.5em;
}

nav>ul {
	display: inline-block;
	list-style: none;
	min-width: 1px;
	padding: 0;
	margin: 0;
}

nav>ul>li {
	display: inline-block;
	padding: 0 1em 0.5em 0;
}

nav>ul>li>a, .overflow {
	text-decoration: none;
	padding: 0 0.3em 0.7em 0.3em;
	border-bottom-width: 0.15em;
	border-bottom-style: none;
	margin: 0;
}

.overflow {
	display: none;
}

nav>ul>li>a.current {
	padding-bottom: 0.5em;
	border-bottom-width: 0.3em;
}

nav>ul>li>a:hover, .overflow:hover, nav>ul>li>a.current {
	border-bottom-style: solid;
	cursor: pointer;
}

.nav__content {
	max-height: 3em;
}

.nav__overflow li {
	display: block;
	padding-top: 1em;
}

.buffer--app-bar {
	width: 100%;
	height: 4.5em;
}

.buffer--nav-bar {
	width: 100%;
	height: 7.6em;
}

/* Animations to fade the toast in and out */

@keyframes fade-in {
	from {
		bottom: 0;
		opacity: 0;
	}
	to {
		bottom: var(--const-toast-bottom-margin);
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		bottom: var(--const-toast-bottom-margin);
		opacity: 1;
	}
	to {
		bottom: 0;
		opacity: 0;
	}
}

/* Modify the default style for forms
*/

form {
	border-width: 0;
	width: 100%;
	font-size: 1em;
	background-color: rgba(0, 0, 0, 0);
}

button, .css-file, form textarea, input, form select, .code pre, progress {
	border-radius: var(--const-element-rounding);
	width: 100%;
	border-width: 0;
}

button, .css-file, form textarea, input, form select, .code pre {
	font-family: 'Kavivanar', sans-serif;
	color: var(--var-c-text);
	font-size: 1em;
	background-color: rgba(0, 0, 0, 0);
	padding: 0.5em;
}

button, .css-file {
	display: block;
	margin-bottom: 0.5em;
	cursor: pointer;
	break-inside: avoid-column;
}

form textarea, input {
	resize: none;
	overflow: auto;
}

progress {
	margin: 0.5em 0;
	height: 1.5em;
}

progress::-webkit-progress-bar {
	background-color: #00000000;
	border-radius: var(--const-element-rounding);
}

progress::-webkit-progress-value {
	border-radius: var(--const-element-rounding);
	transition-property: width;
	transition-duration: 0.7s;
}

progress::-moz-progress-bar {
	border-radius: var(--const-element-rounding);
}

/* Pairs */

.pair, .three {
	column-count: 2;
	column-gap: 1em;
}

.three {
	column-count: 3;
}

.pair--button, .three--button, .button, .css-file {
	margin-top: 0.5em;
}

/* Radio button */

input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 0.15em solid var(--var-c-text);
	vertical-align: middle;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background-color: var(--var-c-text);
	box-shadow: inset 0 0 0 0.25em var(--var-c-primary);
}

input[type='radio'] {
	border-radius: 50%;
}

/* File Upload icon */

.css-file {
	text-align: center;
}

/* Hide the browser's default file upload icon */

.css-file input {
	display: none;
	cursor: pointer;
}

/* Table */

table {
	margin-top: 1em;
	margin-bottom: 1em;
	width: 100%;
	border-collapse: collapse;
}

table, th, td {
	text-align: left;
	border-bottom: 0.15em solid;
	padding: 0.3em;
}

th.r, td.r {
	text-align: right;
}

/*
Media
*/

audio {
	margin: 1em 0;
}

/* Toast Notifications */

#js-toast {
	bottom: var(--const-toast-bottom-margin);
	visibility: hidden;
	margin: 0 auto;
	text-align: center;
	position: fixed;
}

#js-toast.show {
	visibility: visible;
	animation: fade-in calc(var(--const-toast-timer) * 0.15), fade-out calc(var(--const-toast-timer) * 0.15) calc(var(--const-toast-timer) * 0.85);
}

#js-toast>div>p {
	border-radius: var(--const-toast-rounding);
	padding: 1em;
}

.c-primary, .c-secondary, .c-primary a, .c-secondary a {
	color: var(--var-c-text);
}

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

.c-secondary {
	background-color: var(--var-c-secondary);
}

.c-accent--0, .c-accent--0 a, .c-toast, .c-toast a {
	color: #ABB2BF;
}

.c-accent--1, .c-accent--1 a {
	color: #21252b;
}

.c-accent--2, .c-accent--2 a, .c-accent--3, .c-accent--3 a {
	color: #282C34;
}

.c-accent--0, .c-toast {
	background-color: #282C34;
}

.c-accent--1 {
	background-color: #e16974;
}

.c-accent--2 {
	background-color: #98c076;
}

.c-accent--3 {
	background-color: #62aded;
}

.section, .section-nav {
	border-bottom: calc(0.15em * var(--var-c-black));
	border-bottom-style: solid;
	border-bottom-color: #ABB2BF;
}