/* root */

:root {
	--black: #333;
	--white: #fff;
	--darkgray: #757575;
	--gray: #c5c5c5;
	--lightgray: #f5f5f5;
	--darkblue: #024a97;
	--blue: #3b88fd;
	--lightblue: #a0cefe;
	--orange: #fc642d;
	--transition-time: .2s;
	--focus-color: var(--lightblue);
	--focus-border-style: 0 0 0 3px var(--focus-color);
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

/**
 * 1. prevent adjustments of font size after orientation changes in iOS
 * 2. remove gray highlight when tapping elements in iOS
 */

html {
	-webkit-text-size-adjust: 100%; /* 1 */
	-webkit-tap-highlight-color: transparent; /* 2 */
}

/**
* 1. set background color to white for some rare browser who does not have that default
* 2. use nice system font:
*     -apple-system: macOS/iOS
*     Segoe UI: Windows
*     Roboto: Android
*     Ubuntu: Ubuntu
*     Cantarell: Gnome
*     Open Sans: fallback Linux
*     sans-serif: fallback
*/

body {
	margin: 1.375em;
	background-color: var(--white); /* 1 */
	font-family: -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Open Sans", sans-serif; /* 2 */
	color: var(--black);
	line-height: 1.375;
}

/* anchor */

a {
	color: var(--blue);
	transition: box-shadow var(--transition-time);
}

a:visited {
	color: var(--darkblue);
}

a:active {
	color: var(--orange);
}

a:focus {
	outline: 1px dotted var(--darkgray);
	outline-offset: 1px;
}

a:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--white), 0 0 0 7px var(--focus-color);
	border-radius: 2px;
}

/* address */

/**
 * 1. set font-style of address from italic to normal
 */

address {
	font-style: normal; /* 1 */
}

/* code */

code {
	padding: .188em;
	background-color: var(--lightgray);
}

pre code {
	display: block;
	padding: 1.5em;
	border-left: 2px solid var(--blue);
	line-height: 1.5;
	white-space: pre-wrap;
}

/* horizontal ruler */

/*
 * 1. set border-style to solid;
 *    set border-bottom-style to none to set height to 1px
 */

hr {
	margin-top: 2em;
	margin-bottom: 2em;
	border-style: solid solid none; /* 1 */
	border-color: var(--gray);
}

/* stylelint-disable no-descending-specificity */

/* form */

/**
 * 1. update styling for fieldset
 */

fieldset {
	margin: 1.25em 0; /* 1 */
	padding: 1.5em; /* 1 */
	border: 1px solid var(--gray); /* 1 */
}

/**
 * 1. remove padding from legend
 * 2. let it look more like a h3
 * 3. reset default fieldset position inside of the border
 */

legend {
	padding-right: 0; /* 1 */
	padding-left: 0; /* 1 */
	margin-bottom: 1em; /* 2 */
	font-size: 1.17em; /* 2 */
	font-weight: bold; /* 2 */
	float: left; /* 3 */
	width: 100%; /* 3 */
}

legend + * {
	clear: left; /* 3 */
}

/* global */

button,
input,
select,
textarea {
	--border: 1px solid var(--gray);
	--border-radius: 5px;
	--height: 2.5em;
	--input-padding-h: .5em;
	--button-padding-h: 1em;
	--padding-v: .625em;
	--control-size: 1.5rem;
	margin: 0;
	transition: border-color var(--transition-time), box-shadow var(--transition-time);
	-moz-appearance: none;
	-webkit-appearance: none;
}

/* text like inputs */

input[type="date"],
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"] {
	height: var(--height);
	padding-right: var(--input-padding-h);
	padding-left: var(--input-padding-h);
	border: var(--border);
	border-radius: var(--border-radius);
	font: inherit;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus {
	outline: 0;
	border-color: var(--blue);
	box-shadow: var(--focus-border-style);
}

input[type="date"]:not(:focus):-moz-ui-invalid,
input[type="datetime-local"]:not(:focus):-moz-ui-invalid,
input[type="email"]:not(:focus):-moz-ui-invalid,
input[type="month"]:not(:focus):-moz-ui-invalid,
input[type="number"]:not(:focus):-moz-ui-invalid,
input[type="password"]:not(:focus):-moz-ui-invalid,
input[type="search"]:not(:focus):-moz-ui-invalid,
input[type="tel"]:not(:focus):-moz-ui-invalid,
input[type="text"]:not(:focus):-moz-ui-invalid,
input[type="time"]:not(:focus):-moz-ui-invalid,
input[type="url"]:not(:focus):-moz-ui-invalid,
input[type="week"]:not(:focus):-moz-ui-invalid {
	box-shadow: none; /* 3 */
}

/* radio & checkbox */

input[type="checkbox"],
input[type="radio"] {
	width: var(--control-size);
	height: var(--control-size);
	background-color: var(--white);
	border: var(--border);
	font-size: inherit;
	cursor: pointer;
	vertical-align: bottom;
}

input[type="checkbox"]:before,
input[type="radio"]:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
	outline: 0;
	border-color: var(--blue);
	box-shadow: var(--focus-border-style);
}

input[type="checkbox"] {
	border-radius: 5px;
}

input[type="checkbox"]:before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18 1.5 L8 17 L1.5 12" stroke-width="4" stroke="%233b88fd" fill="none" /></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 75%;
	opacity: 0;
	transition: opacity var(--transition-time);
}

input[type="checkbox"]:checked:before {
	opacity: 1;
}

input[type="radio"] {
	border-radius: 100%;
	padding: .125em;
}

input[type="radio"]:before {
	border-radius: inherit;
	transition: background-color var(--transition-time);
}

input[type="radio"]:checked:before {
	background-color: var(--blue);
}

/* textarea */

textarea {
	padding: var(--input-padding-h) var(--padding-v);
	font: inherit;
	border: var(--border);
	border-radius: var(--border-radius);
}

textarea:focus {
	outline: 0;
	border-color: var(--blue);
	box-shadow: var(--focus-border-style);
}

textarea:not(:focus):-moz-ui-invalid {
	box-shadow: none; /* 3 */
}

/* select */

select {
	border: var(--border);
	border-radius: var(--border-radius);
	font: inherit;
	cursor: pointer;
}

select:focus {
	outline: 0;
	border-color: var(--blue);
	box-shadow: var(--focus-border-style);
}

select:-moz-focusring {
	color: transparent; /* 2 */
	text-shadow: 0 0 0 black; /* 2 */
}

select:not([multiple]):not([size]) {
	height: var(--height);
	padding-right: 1.75em;
	padding-left: var(--padding-v);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M20 5 L10 15 L0 5" stroke="currentColor" stroke-width="2" fill="none"></path></svg>');
	background-repeat: no-repeat;
	background-position: right .5em center;
	background-size: .813em;
}

select[multiple],
select[size] {
	padding: 0;
	height: auto;
}

option {
	padding: var(--padding-v) var(--button-padding-h);
}

optgroup {
	padding-right: var(--button-padding-h);
	padding-left: var(--button-padding-h);
	font-style: normal;
}

optgroup option {
	padding-right: calc(var(--button-padding-h) * 3);
	padding-left: calc(var(--button-padding-h) * 3);
	margin-left: calc(var(--button-padding-h) * -1.5);
	margin-right: calc(var(--button-padding-h) * -1.5);
}

/*
 * 1. fixing the height of the input in Safari by remoeving the delete cancel
 *    button
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none; /* 1 */
}

input[type="date"] {
	cursor: pointer;
}

input[type="range"] {
	-webkit-appearance: none;
	background-color: var(--gray);
	height: .25em;
	border-radius: 5px;
	outline: 0;
}

input[type="range"][disabled] {
	background-color: var(--gray);
}

input[type="range"]::-moz-focus-outer {
	border: 0;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: var(--control-size);
	width: var(--control-size);
	border-radius: 100%;
	border: 1px solid var(--gray);
	background-color: var(--white);
	cursor: grab;
	-webkit-transition: border-color var(--transition-time), box-shadow var(--transition-time);
	transition: border-color var(--transition-time), box-shadow var(--transition-time);
}

input[type="range"]:focus::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
	border-color: var(--blue);
	box-shadow: var(--focus-border-style);
}

input[type="range"]:active::-webkit-slider-thumb {
	cursor: grabbing;
}

input[type="range"][disabled]::-webkit-slider-thumb {
	cursor: not-allowed;
	border-color: var(--gray);
}

input[type="range"]::-moz-range-thumb {
	height: var(--control-size);
	width: var(--control-size);
	border-radius: 100%;
	border: 1px solid var(--gray);
	background-color: var(--white);
	cursor: grab;
	-moz-transition: border-color var(--transition-time), box-shadow var(--transition-time);
	transition: border-color var(--transition-time), box-shadow var(--transition-time);
}

input[type="range"]:focus::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
	border-color: var(--blue);
	box-shadow: var(--focus-border-style);
}

input[type="range"]:active::-moz-range-thumb {
	cursor: grabbing;
}

input[type="range"][disabled]::-moz-range-thumb {
	cursor: not-allowed;
	border-color: var(--gray);
}

/*
 * 1. remove yellow background-color from autocomplete inputs in Chrome
 */

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 99em #fff inset; /* 1 */
}

/* button */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	height: var(--height);
	padding: 0 var(--button-padding-h);
	background-color: #f5f5f5;
	border: 1px solid #c5c5c5;
	border-radius: 5px;
	font: inherit;
	cursor: pointer;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
	border-width: 0;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: var(--darkgray);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
	outline: 0;
	border-color: var(--blue);
	box-shadow: var(--focus-border-style);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: var(--darkgray);
	box-shadow: inset 0 0.15em 0.3em var(--gray);
}

button[disabled]:active,
input[type="button"][disabled]:active,
input[type="reset"][disabled]:active,
input[type="submit"][disabled]:active {
	box-shadow: none;
}

/* disabled */

button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
	border-color: var(--gray);
	background-color: var(--lightgray);
	cursor: not-allowed;
	opacity: .5;
}

/* figure */

figure {
	margin-right: 0;
	margin-left: 0;
}

/* image */

/**
 * 1. make image scalable if viewport < img width
 * 2. set height relative to width if viewport < img width
 */

img {
	max-width: 100%; /* 1 */
	height: auto; /* 2 */
}

/* table */

table {
	max-width: 100%;
	border-spacing: 0;
}

tbody > tr:hover {
	background-color: var(--lightgray);
}

th,
td {
	padding: .5em .75em;
	border-bottom: 1px solid var(--gray);
}

th {
	text-align: left;
}

tr:last-child > td {
	border-bottom: 0;
}

progress {
	height: 1em;
	border-width: 0;
	background-color: var(--lightgray);
}

progress::-webkit-progress-bar {
	background-color: var(--lightgray);
}

progress::-webkit-progress-value {
	background-color: var(--blue);
}

progress::-moz-progress-bar {
	background-color: var(--blue);
}

@media only screen and (min-width: 480px) {

body {
	margin: 2.75em;
}

}