@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Source+Code+Pro|Source+Sans+Pro:400,600&display=swap");

:root {
	/* Font family stacks */
	--heading: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
		sans-serif;
	--body: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
		"Helvetica Neue", sans-serif;
	--monospace: "Source Code Pro", monospace;

	/* Type scale
   Based on 16px x 1.25 and rounded to nearest pixel
   (Except some of the smaller ones) */
	--font-size-xxs: 0.625rem;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-xxl: 2rem;
	--font-size-xxxl: 2.5rem;

	/* Greyscale palette with blue tint */
	--white: #fff;
	--grey-lightest: #fafafa;
	--grey-lighter: #f0f2f2;
	--grey-light: #dee0e0;
	--grey-medium: #c8cbcc;
	--grey-dark: #717676;
	--grey-darker: #363e40;
	--black: #1b2526;

	/* Brand-specific colours */
	--brand: #30c0d8;
	--brand-dark: #0baecd;
	--brand-light: #caf5fc;

	/* State-based colours */
	--info-light: #e3f4fc;
	--info: #afe1fa;
	--info-dark: #30a0d9;

	--success-light: #e3fcf0;
	--success: #aaf2ce;
	--success-dark: #30d984;

	--warning-light: #faf6e1;
	--warning: #faedaf;
	--warning-dark: #e6c832;

	--error-light: #fcefed;
	--error: #fab5af;
	--error-dark: #d93e30;

	--danger: #d93e30;
	--danger-dark: #b80f00;
}

* {
	box-sizing: border-box;
	font-family: var(--body);
	margin: 0;
}

html,
body {
	background-color: var(--brand-dark);
	height: 100%;
	padding: 0;
}
a {
	color: var(--brand);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.header {
	color: var(--white);
}

.header__title {
	font-family: var(--heading);
	font-size: var(--font-size-lg);
	font-weight: 700;
}

.header__link {
	color: inherit;
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

.header__link:hover {
	border-bottom-color: var(--white);
}

.main {
	background-color: var(--white);
}

.main__intro {
	font-size: var(--font-size-xl);
	font-weight: 600;
}

.main__body,
.main__cta {
	font-size: var(--font-size-lg);
	line-height: 1.5;
	margin-top: 2rem;
}

.main__cta {
	font-weight: 600;
	margin: 2rem 0;
}

.input {
	border-radius: 50%;
	border: 0.125rem solid var(--brand);
	caret-color: transparent;
	cursor: pointer;
	height: 1.5rem;
	margin-left: 0.25rem;
	outline: none;
	padding: 0rem;
	position: relative;
	resize: none;
	top: 0.3125rem;
	transition: background 0.1s ease;
	width: 1.5rem;
}

.input:focus {
	background: var(--brand);
}

.output {
	border-radius: 0.1875rem; /* Not working because no overflow:hidden but that clips the childs focus outline */
	font-variant-ligatures: none;
	display: block;
	pointer-events: none;
	position: relative;
}

.output::before,
.output::after {
	content: "";
	height: 2rem;
	left: 0;
	width: 100%;
	position: absolute;
}

.output::before {
	background: linear-gradient(
		to bottom,
		var(--grey-darker) 0%,
		transparent 100%
	);
	top: 0;
}

.output::after {
	background: linear-gradient(to top, var(--grey-darker) 0%, transparent 100%);
	bottom: 0;
}

.output__pre {
	background-color: var(--grey-darker);
	border-radius: 0.1875rem;
	color: var(--grey-lighter);
	height: 20rem;
	overflow-y: auto;
	padding: 2rem;
	pointer-events: auto;
}

.output__pre:focus {
	outline: 4px solid var(--brand);
}

.output__code {
	font-family: var(--monospace);
	font-size: var(--font-size-sm);
	pointer-events: auto;
	white-space: pre-wrap;
}

.footer {
	color: var(--white);
}

.footer a {
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	color: var(--white);
	display: inline-block;
	text-decoration: none;
}

.footer a:hover {
	border-bottom-color: var(--white);
}

.footer .footer__logo {
	border-bottom: 0;
	transition: all 0.1s ease-in-out;
}

.footer__logo:hover {
	opacity: 0.9;
	transform: scale(0.95);
}

.footer__logo svg {
	height: 3rem;
}

@media screen and (min-width: 40rem) {
	.footer__logo svg {
		height: 5rem;
	}
}

.footer__about {
	font-family: var(--body);
	font-size: var(--font-size-md);
	grid-area: "about";
}

@media screen and (min-width: 40rem) {
	.footer__about {
		font-size: var(--font-size-lg);
	}
}

.footer__about p:last-of-type {
	margin-top: 1rem;
}

/* Layout padding stuff */
.header {
	padding: 1rem 2rem;
}
.main {
	overflow: hidden;
	padding: 4rem 2rem;
}
.footer {
	display: grid;
	grid-gap: 2rem;
	grid-template-areas: "logo about";
	grid-template-columns: auto 1fr;
	padding: 2rem;
}

@media screen and (min-width: 40rem) {
	.header {
		align-items: baseline;
		display: flex;
		justify-content: space-between;
		padding: 1rem 4rem;
	}
	.main {
		padding: 4rem;
	}
	.footer {
		grid-gap: 2rem;
		padding: 4rem;
	}
}

@media screen and (min-width: 53rem) {
	.header {
		padding: 1rem 8rem;
	}
	.main {
		padding: 4rem 8rem;
	}
	.footer {
		padding: 4rem 8rem;
	}
}

@media screen and (min-width: 80rem) {
	.header {
		padding: 1rem 16rem;
	}
	.main {
		padding: 4rem 16rem;
	}
	.footer {
		padding: 4rem 16rem;
	}
}

@media screen and (min-width: 40rem) {
	.footer {
		grid-gap: 2rem;
	}
}