@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600&display=swap');

:root {
	--font: 'Quicksand', sans-serif;
	--font-thin: 300;
	--font-regular: 400;
	--font-medium: 500;
	--font-bold: 600;
	
	--text: #575757;
	
	--text-input: #eaeaea;
	--text-input-hover: #b9b9b9;
	
	--max-width: 1000px;
}

::selection {
	color: var(--theme-text);
	background-color: var(--theme-sel);
}

html {
	background: var(--theme-gradient);
	background-attachment: fixed;
	font-family: var(--font);
	font-weight: var(--font-regular);
	width: 100%;
	height: 100%;
}

body {
	margin: 0px;
	display: grid;
	min-height: 80%;
	align-content: center;
}

header {
	display: flex;
	justify-content: space-around;
	margin: 20px;
}

#header-img {
	max-height: 160px;
	max-width: min(33%, var(--max-width));
	align-self: center;
}

/* Border stuff */

section-border {
	display: block;
	
	border: solid white 5px;
	border-radius: 10px;
	
	box-shadow: 0 5px 10px #0006;
	
	background: var(--theme-border-stripes);
	
	width: 95%;
	max-width: var(--max-width);
	min-width: 400px;
	margin: auto;
	margin-bottom: 40px;
	
	padding: 10px;
}

section {
	background-color: white;
	color: var(--text);
	padding: 10px 80px;
	padding-bottom: 20px;
}

/* embed stuff */

video-wrapper {
	display: block;
	text-align: center;
}

.border-video {
	margin-bottom: 20px;
	width: 80%;
	max-width: var(--max-width);
	display: inline-block;
}

.border-inner-video {
	width: auto;
	position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-video {
	position: absolute;
    top: 0px; 
    left: 0px;
    width: 100%;
    height: 100%;
}

/* Title stuff */

h1, h2, h3, h4 {
	font-family: var(--font);
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: center;
}

:is(h2, h3):not(:first-child) {
	margin-top: 50px;
}

h1, .size1 {
	font-size: 50px;
	font-weight: var(--font-regular);
}

h2, .size2 {
	font-size: 36px;
	font-weight: var(--font-regular);
}

h3, .size3 {
	font-size: 28px;
	font-weight: var(--font-medium);
}

h4, .size4 {
	font-size: 23px;
	font-weight: var(--font-medium);
}

:is(h1, h2, h3, h4).side {
	text-align: left;
	margin-top: 30px;
	margin-bottom: -10px;
}

/* Text stuff */

p, li {
	font-size: 20px;
}

a, link-text {
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
	border-bottom: solid 3px var(--theme-link);
	font-weight: var(--font-medium);
	
	transition: color 0.1s;
}

:is(a, link-text):hover, a:active {
	color: var(--theme-link-text);
}

li {
	padding-top: 4px;
	padding-bottom: 4px;
}

code {
	margin: 2px;
	padding: 1px 5px;
	background-color: #f4f6f8;
	border: solid 1px #e4e6e8;
	
	font-family: 'Consolas', monospace;
	font-size: 0.9em;
}

code.code-block {
	display: block;
	
	padding: 10px 15px;
	
	white-space: pre;
	font-size: 18px;
	
	tab-size: 4;
	-moz-tab-size: 4;
}

/* Random stuff */

.center {
	text-align: center;
}

/* Table stuff */

table {
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	
	background-color: #f4f6f8;
	border: solid 1px #d4d6d8;
	
	font-size: 18px;
	
	border-collapse: collapse;
}

th {
	font-weight: bold;
}

td, th {
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px;
}

tr:first-child td, tr:first-child th {
	padding-top: 4px;
}

tr:last-child td, tr:last-child th {
	padding-bottom: 4px;
}

td:first-child, th:first-child {
	padding-left: 18px;
}

td:last-child, th:last-child {
	padding-right: 18px;
}

.table-line-h, .table-line-h tr + tr {
	border-top: solid 1px #d4d6d8;
}

td.table-line-v, th.table-line-v, .table-line-v td + td, .table-line-v th + th {
	border-left: solid 1px #d4d6d8;
}

input, textarea, button, .input-style {
	padding: 5px 10px;
	font-family: inherit;
	font-size: 18px;
	font-weight: var(--font-medium);
	background-color: var(--theme-input);
	color: var(--theme-input-text);
	border-radius: 10px;
	border: none;
	outline: none;
}

:is(input, button, .input-style):hover, :is(input, button, .input-style):active, :is(input, .input-style):focus {
	background-color: var(--theme-input-hover);
}

textarea {
	box-sizing: border-box;
}

input[type='text'], textarea {
	background-color: var(--text-input);
	color: var(--text);
}

:is(input[type='text'], textarea):hover, :is(input[type='text'], textarea):active, :is(input[type='text'], textarea):focus {
	background-color: var(--text-input);
	box-shadow: 0 0 1px 1px var(--text-input-hover);
}

input[type='checkbox'] {
	appearance: none;
	--color: white;
	--width: 3px;
	width: 25px;
	height: 25px;
	pointer-events: none;
}

input[type='radio'] {
	appearance: none;
	width: 25px;
	height: 25px;
	pointer-events: none;
	border-radius: 50%;
}

input[type='radio']:checked::after {
	content: '';
	display: inline-block;
	position: absolute;
	background-color: white;
	height: 40%;
	width: 40%;
	border-radius: 50%;
	top: 30%;
	left: 30%;
}

.outer-input {
	--theme-input: white;
	--theme-input-text: var(--text);
	--theme-input-hover: #eee;
	
	box-shadow: 0 4px 8px #0006;
}

boxx-check, input[type='checkbox'], input[type='radio'] {
	display: inline-block;
	position: relative;
}

boxx-check::after, input[type='checkbox']:checked::after {
	content: '';
	display: inline-block;
	position: absolute;
	transform: rotate(45deg);
	height: calc(var(--width) * 3.8);
	width: calc(var(--width) * 1.8);
	border-bottom: var(--width) solid var(--color);
	border-right: var(--width) solid var(--color);
	top: calc(var(--width) * -3 + 50%);
	left: calc(var(--width) * -1.4 + 50%);
}

boxx-play {
	display: block;
	position: relative;
	
	width:  var(--size);
	height: var(--size);
	left: calc(var(--size) * (1 - sqrt(3) * 0.5));
	
	box-sizing: border-box;
	border-style: solid;
	border-width: calc(var(--size) * 0.5) 0px calc(var(--size) * 0.5) calc(var(--size) * sqrt(3) * 0.5);
	border-color: transparent transparent transparent var(--color);
}

boxx-pause {
	display: block;
	position: relative;
	
	width:  var(--size);
	height: var(--size);
}

boxx-pause::before {
	content: '';
	display: block;
	position: absolute;
	background-color: var(--color);
	
	width: calc(var(--size) / 4);
	height: calc(var(--size) * 0.9);
	left: calc(var(--size) * 0.1);
	top: calc(var(--size) * 0.05);
}

boxx-pause::after {
	content: '';
	display: block;
	position: absolute;
	background-color: var(--color);
	
	width: calc(var(--size) / 4);
	height: calc(var(--size) * 0.9);
	left: calc(var(--size) * 0.65);
	top: calc(var(--size) * 0.05);
}

label {
	display: flex;
	align-items: center;
}

/* Screen size stuff */

@media only screen and (max-width: 1100px)  {
	section {
		padding: 10px 50px;
	}
	
	h1, .size1 {
		font-size: 40px;
	}

	h2, .size2 {
		font-size: 32px;
	}

	h3, .size3 {
		font-size: 24px;
	}

	h4, .size4 {
		font-size: 20px;
	}
	
	p, li {
		font-size: 16px;
	}
	
	table {
		font-size: 16px;
	}

	td, th {
		padding-left: 8px;
		padding-right: 8px;
	}
	
	td:first-child, th:first-child {
		padding-left: 16px;
	}

	td:last-child, th:last-child {
		padding-right: 16px;
	}
}

@media only screen and (max-width: 700px)  {
	border-dark {
		border: none;
		border-top: solid white 5px;
		border-bottom: solid white 5px;
		border-radius: 0px;
		
		width: 100%;
		margin: auto;
		margin-bottom: 40px;
	}

	border-light {
		width: 100%;
		padding: 10px 0px;
	}
	
	section {
		padding: 10px 20px;
	}
	
	h1, .size1 {
		font-size: 32px;
	}

	h2, .size2 {
		font-size: 26px;
	}

	h3, .size3 {
		font-size: 21px;
	}

	h4, .size4 {
		font-size: 18px;
	}
	
	p, li {
		font-size: 14px;
	}
	
	table {
		font-size: 14px;
	}

	td, th {
		padding-left: 6px;
		padding-right: 6px;
	}
	
	td:first-child, th:first-child {
		padding-left: 14px;
	}

	td:last-child, th:last-child {
		padding-right: 14px;
	}
}