sscaffold-css/sscaffold.css

/******************************************************************************
*
*  RESET
*
*  Following rules are intended to fix layout quirks in different browsers.
* 
******************************************************************************/

*,
*:after,
*:before {
	/* Set universal box sizing with inheritance. [3] */
	box-sizing: inherit;
}


html {
	/* Fix the line height in all browsers. [1] */
	line-height: 1.15;
	/* Prevent adjustments of font size after orientation changes in iOS. [1] */
	-webkit-text-size-adjust: 100%;
	/* Set universal box sizing with inheritance. [3] */
	box-sizing: border-box;
}


body {
	/* Smoothly scroll between anchors. [4] */
	scroll-behavior: smooth;
	/* optimizeLegibility may cause some performance issues in some browsers
	   (https://marco.org/2012/11/15/text-rendering-optimize-legibility) -- not sure if
	   this is still current. Probably safe to assume that an appropriately legible
	   font will be used anyway. [4] */
	text-rendering: optimizeSpeed;
}


body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
dl,
li,
blockquote,
figure,
figcaption,
button,
input,
optgroup,
select,
textarea {
	/* Remove the default margin for these elements in all browsers. [1],[4] */
	margin: 0;
}


main,
details {
	/* Render <main> consistently in IE and add the correct display for <details>
	   in Edge, IE 10+, and Firefox. [1] */
	display: block;
}


summary {
	/* Add the correct display in all browsers. [1] */
	display: list-item;
}


template {
	/* Add the correct display in IE 10+. [1] */
	display: none;
}


h1 {
	/* Fix the font size and margin on 'h1' elements in 'section' and 
	   'article' contexts in Chrome, Firefox, and Safari. [1] */
	font-size: 2em;
	margin: 0.67em 0;
}


hr {
	/* Add the correct box sizing in Firefox. [1] */
	box-sizing: content-box;
	height: 0;
	/* Show the overflow in Edge and IE. [1] */
	overflow: visible;
}


pre,
code,
kbd,
samp {
	/* Fix the inheritance and scaling of font size in all browsers. [1] */
	font-family: monospace, monospace;
	/* Fix the odd 'em' font sizing in all browsers. [1] */
	font-size: 1em;
	/* Ensure that these are block-level elements by default. */
	display: block;
	/* Ensure that these elements don't soft-wrap by default. [2] */
	white-space: pre;
	/* Since white-space is set to "pre", ensure that the element has
	   scrollbars as necessary. */
	overflow: auto;
}


p > pre,
p > code,
p > kbd,
p > samp {
	/* Render code blocks contained by <p> blocks as inline. */
	display: inline;
}


ul[class],
ol[class],
dl[class] {
	/* Remove default padding from list elements that have a class attribute. [4] */
	padding: 0;
	/* Reset list style for lists with class attributes. [4] */
	list-style: none;
}


img {
	/* Remove the border on images inside links in IE 10. [1] */
	border-style: none;
	/* Go ahead and make these block-level elements. I'm not sure about this. [4] */
	display: block;
	/* [2] */
	max-width: 100%;
}


a {
	/* Remove the gray background on active links in IE 10. [1] */
	background-color: transparent;
}


a:not([class]) {
	/* Makes links a bit more readable while avoiding conflicts. [4] */
	text-decoration-skip-ink: auto;
}


abbr[title] {
	/* Remove the bottom border in Chrome 57-. [1] */
	border-bottom: none;
	/* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. [1] */
	text-decoration: underline;
	text-decoration: underline dotted;
}


b,
strong {
	/* Add the correct font weight in Chrome, Edge, and Safari. [1] */
	/* This has been changed from [1] because the 'bolder' value is not well
	   enough supported in common fonts: https://css-tricks.com/almanac/properties/f/font-weight/ */
	font-weight: bold;
}


small {
	/* Enforce the correct font size in all browsers. [1] */
	font-size: 80%;
}


sub,
sup {
	/* Prevent 'sub' and 'sup' elements from affecting the line height
	   in all browsers. [1] */
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}


sub {
	/* Enforce 'sub' positioning in all browsers. [1] */
	bottom: -0.25em;
}


sup {
	/* Enforce 'sup' positioning in all browsers. [1] */
	top: -0.5em;
}


table {
	/* [2] */
	width: 100%;
}


td:not([align]),
th:not([align]) {
	/* Borrow a rule from [5], modifying a rule from [2] to give table cells
	   a default left alignment unless alignment is specified in the element. */
	text-align: left;
}


button,
input,
optgroup,
select,
textarea {
	/* Set the font styles to match the rest of the document in
	   all browsers. [1],[4] */
	font: inherit;
	line-height: 1.15;
	/* Remove the margin in Firefox and Safari. [1] */
	margin: 0;
}


button,
input {
	/* Show the overflow in Edge. [1] */
	overflow: visible;
}


button,
select {
	/* Remove the inheritance of text transform in Edge, Firefox, and IE. [1] */
	text-transform: none;
}


.button,
button,
[type="button"],
[type="reset"],
[type="submit"] {
	/* Fix the inability to style clickable types in iOS and Safari. [1] */
	-webkit-appearance: button;
	/* Set the correct cursor for these elements. [2] */
	cursor: pointer;
}


.button[disabled],
button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
	/* Reset the cursor for disabled button elements. [2] */
	cursor: default;
}


button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	/* Remove the inner border and padding in Firefox. [1] */
	border-style: none;
	padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	/* Restore the focus styles unset by the previous rule. [1] */
	outline: 1px dotted ButtonText;
}


fieldset {
	/* Fix 'fieldset' padding in Firefox. [1] */
	padding: 0.35em 0.75em 0.625em;
}


legend {
	/* Fix text wrapping in Edge and IE. [1] */
	box-sizing: border-box;
	display: table;
	max-width: 100%;
	white-space: normal;
	/* Fix color inheritance from 'fieldset' elements in IE. [1] */
	color: inherit;
	/* Remove padding so developer are not surprised when they zero out
	   'fieldset' elements in all browsers. [1] */
	padding: 0;
}


textarea {
	/* Remove the default vertical scrollbar in IE 10+. [1] */
	overflow: auto;
}


[type="checkbox"],
[type="radio"] {
	/* Add the correct box sizing in IE 10. [1] */
	box-sizing: border-box;
	/* Remove the padding present in IE 10. [1] */
	padding: 0;
}


[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	/* Fix the cursor style of increment and decrement buttons in Chrome. [1] */
	height: auto;
}


[type="search"] {
	/* Fix appearance in Chrome and Safari. [1] */
	-webkit-appearance: textfield;
	/* Fix the outline style in Safari. [1] */
	outline-offset: -2px;
}


[type="search"]::-webkit-search-decoration {
	/* Remove the inner padding in Chrome and Safari on MacOS. [1] */
	-webkit-appearance: none;
}


::-webkit-file-upload-button {
	/* Fix the inability to sytle clickable types in iOS and Safari. [1] */
	-webkit-appearance: button;
	/* Fix the font properties in Safari. [1] */
	font: inherit;
}


progress {
	/* Add the correct vertical alignment in Chrome, Firefox, and Opera. [1] */
	vertical-align: baseline;
}


[hidden] {
	/* Add the correct display in IE 10. [1] */
	display: none;
}


@media (prefers-reduced-motion: reduce) {
	* {
		/* Prevent animations and transitions for users that want that. [4] */
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}



/******************************************************************************
*
*   FLEXBOX-BASED COLUMNS
*
*   These classes provide the flexbox-based row-and-column layout from
*   milligram.css [2].
* 
******************************************************************************/

main article,
main section {
	padding: 7.5rem 1.0rem;
	position: relative;
	width: 100%;
}


main section > *,
main article > * {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
}


.row {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	width: 100%;
}


.row.row-no-padding {
	padding: 0;
}


.row.row-no-padding > .column {
	padding: 0;
}


.row.row-wrap {
	flex-wrap: wrap;
}


.row.row-top {
	align-items: flex-start;
}


.row.row-bottom {
	align-items: flex-end;
}


.row.row-center {
	align-items: center;
}


.row.row-stretch {
	align-items: stretch;
}


.row.row-baseline {
	align-items: baseline;
}


.row .column {
	display: block;
	flex: 1 1 auto;
	margin-left: 0;
	max-width: 100%;
	width: 100%;
}


.row .column.column-offset-10 {
	margin-left: 10%;
}


.row .column.column-offset-20 {
	margin-left: 20%;
}


.row .column.column-offset-25 {
	margin-left: 25%;
}


.row .column.column-offset-33, .row .column.column-offset-34 {
	margin-left: 33.3333%;
}


.row .column.column-offset-50 {
	margin-left: 50%;
}


.row .column.column-offset-66, .row .column.column-offset-67 {
	margin-left: 66.6666%;
}


.row .column.column-offset-75 {
	margin-left: 75%;
}


.row .column.column-offset-80 {
	margin-left: 80%;
}


.row .column.column-offset-90 {
	margin-left: 90%;
}


.row .column.column-10 {
	flex: 0 0 10%;
	max-width: 10%;
}


.row .column.column-20 {
	flex: 0 0 20%;
	max-width: 20%;
}


.row .column.column-25 {
	flex: 0 0 25%;
	max-width: 25%;
}


.row .column.column-33, .row .column.column-34 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}


.row .column.column-40 {
	flex: 0 0 40%;
	max-width: 40%;
}


.row .column.column-50 {
	flex: 0 0 50%;
	max-width: 50%;
}


.row .column.column-60 {
	flex: 0 0 60%;
	max-width: 60%;
}


.row .column.column-66, .row .column.column-67 {
	flex: 0 0 66.6666%;
	max-width: 66.6666%;
}


.row .column.column-70 {
	flex: 0 0 70%;
	max-width: 70%;
}


.row .column.column-75 {
	flex: 0 0 75%;
	max-width: 75%;
}


.row .column.column-80 {
	flex: 0 0 80%;
	max-width: 80%;
}


.row .column.column-90 {
	flex: 0 0 90%;
	max-width: 90%;
}


.row .column .column-top {
	align-self: flex-start;
}


.row .column .column-bottom {
	align-self: flex-end;
}


.row .column .column-center {
	-ms-grid-row-align: center;
			align-self: center;
}


@media (min-width: 40rem) {
	.row {
		flex-direction: row;
	}
	.row .column {
		margin-bottom: inherit;
		padding: 0 1.0rem;
	}
}



/******************************************************************************
*
*   12 COLUMN GRID
*
*   These classes provide the 12-column grid from skeleton.css [6]. skeleton.css
*   set these columns to only work on displays wider than 550px, so for
*   compatibility, all of these rules are inside a media query. Instead of 550px,
*   the media query starts at the same 40rem as milligram's does.
*
*   The margin-left values are specific to skeleton.css and conflict with
*   milligram.css's margin-less columns, so that margin is applied only to
*   elements that match skeleton's selector style.
* 
******************************************************************************/

@media (min-width: 40rem) {

	.one.column,
	.one.columns,
	.two.columns,
	.three.columns,
	.four.columns,
	.five.columns,
	.six.columns,
	.seven.columns,
	.eight.columns,
	.nine.columns,
	.ten.columns,
	.eleven.columns,
	.twelve.columns,
	.one-third.column,
	.two-thirds.column,
	.one-half.column {
		margin-left: 4%;
		padding: 0;
	}

    .one.column:first-child,
    .one.columns:first-child,
    .two.columns:first-child,
    .three.columns:first-child,
    .four.columns:first-child,
    .five.columns:first-child,
    .six.columns:first-child,
    .seven.columns:first-child,
    .eight.columns:first-child,
    .nine.columns:first-child,
    .ten.columns:first-child,
    .eleven.columns:first-child,
    .twelve.columns:first-child,
    .one-third.column:first-child,
    .two-thirds.column:first-child,
    .one-half.column:first-child {
    	margin-left: 0;
    }

	.one.column,
	.one.columns {
		width: 4.66666666667%;
	}

	.two.columns {
		width: 13.3333333333%;
	}

	.three.columns {
		width: 22%;
	}

	.four.columns {
		width: 30.6666666667%;
	}

	.five.columns {
		width: 39.3333333333%;
	}

	.six.columns {
		width: 48%;
	}

	.seven.columns {
		width: 56.6666666667%;
	}

	.eight.columns {
		width: 65.3333333333%;
	}
	
	.nine.columns {
		width: 74.0%;
	}

	.ten.columns {
		width: 82.6666666667%;
	}

	.eleven.columns {
		width: 91.3333333333%;
	}

	.twelve.columns {
		width: 100%;
	}

	.one-third.column {
		width: 30.6666666667%;
	}

	.two-thirds.column {
		width: 65.3333333333%;
	}

	.one-half.column {
		width: 48%;
	}

	.offset-by-one.column,
	.offset-by-one.columns {
		margin-left: 8.66666666667%;
	}

	.offset-by-two.column,
	.offset-by-two.columns {
		margin-left: 17.3333333333%;
	}

	.offset-by-three.column,
	.offset-by-three.columns {
		margin-left: 26%;
	}

	.offset-by-four.column,
	.offset-by-four.columns {
		margin-left: 34.6666666667%;
	}

	.offset-by-five.column,
	.offset-by-five.columns {
		margin-left: 43.3333333333%;
	}

	.offset-by-six.column,
	.offset-by-six.columns {
		margin-left: 52%;
	}

	.offset-by-seven.column,
	.offset-by-seven.columns {
		margin-left: 60.6666666667%;
	}

	.offset-by-eight.column,
	.offset-by-eight.columns {
		margin-left: 69.3333333333%;
	}

	.offset-by-nine.column,
	.offset-by-nine.columns {
		margin-left: 78.0%;
	}

	.offset-by-ten.column,
	.offset-by-ten.columns {
		margin-left: 86.6666666667%;
	}

	.offset-by-eleven.column,
	.offset-by-eleven.columns {
		margin-left: 95.3333333333%;
	}

	.offset-by-one-third.column,
	.offset-by-one-third.columns {
		margin-left: 34.6666666667%;
	}

	.offset-by-two-thirds.column,
	.offset-by-two-thirds.columns {
		margin-left: 69.3333333333%;
	}

	.offset-by-one-half.column,
	.offset-by-one-half.columns {
		margin-left: 52%;
	}

}



/******************************************************************************
*
*   LAYOUT
*
*   Rules that impact the positioning of major layout elements.
* 
******************************************************************************/

body {
	/* Ensure that the page body fills the display even if the content does not. [4] */
	min-height: 100vh;
	/* The following two rules allow the header and footer elements to be positioned
	   correctly assuming they're all direct descendants of the <body> element. */
	display: flex;
	flex-direction: column;
}


header,
footer {
	/* Prevent these two eleemnts from shrinking when content is added to the <body>
	   element. */
	flex-shrink: 0;
}


main {
	/* Allow the <main> element to grow as necessary. */
	flex-grow: 1;
}



/******************************************************************************
*
*   UTILITY CLASSES
*
*   A handful of common utility classes.
* 
******************************************************************************/

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
}


.float-left {
	float: left;
}


.float-right {
	float: right;
}



/******************************************************************************
*
*   BASE THEME
*
*   The rest of these rules set a default look-and-feel based on milligram.css [2].
*   Override these as needed in your own css to set a custom look-and-feel.
* 
******************************************************************************/

/**
 * Typography: font, letter-spacing, line-height, text-*, list-style-type.
 */

html {
	/* Font size is set to 62.5% so that all future rem sizes are based on a 10px font. [6] */
	font-size: 62.5%;
}


body {
    font-family: "Montserrat", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
	font-size: 2.0em;
	font-weight: 300;
	line-height: 1.6;
}


code {
	font-size: 86%;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Crimson Text", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
	font-weight: 300;
}


h1 {
	font-size: 4.6rem;
	line-height: 1.2;
}


h2 {
	font-size: 3.6rem;
	line-height: 1.25;
}


h3 {
	font-size: 2.8rem;
	line-height: 1.3;
}


h4 {
	font-size: 2.2rem;
	line-height: 1.35;
}


h5 {
	font-size: 1.8rem;
	line-height: 1.5;
}


h6 {
	font-size: 1.6rem;
	line-height: 1.4;
}


dl {
	list-style: none;
}


ol {
	list-style: decimal inside;
}


ul {
	list-style: disc inside;
}


dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
	font-size: 90%;
}


.button,
button,
[type="button"],
[type="reset"],
[type="submit"] {
	font-family: Verdana;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .1rem;
	line-height: 3.8rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}


label,
legend {
	font-size: 1.6rem;
	font-weight: 700;
}


label.inline,
legend.inline {
	font-weight: normal;
}


/**
 * Layout: Display, margin, padding, height, and width.
 */

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
	margin-bottom: 2.5rem;
}


blockquote {
	padding: 1rem 1.5rem;
}


blockquote *:last-child {
	margin-bottom: 0;
}


code {
	margin: 0 .2rem;
	padding: .2rem .5rem;
}


pre > code {
	padding: 1rem 1.5rem;
}


hr {
	margin: 3.0rem 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 2.0rem;
	margin-bottom: 1.0rem;
}


dl,
ol,
ul {
	margin-top: 0;
	padding-left: 0;
}


dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
	margin: 1.5rem 0 1.5rem 3.0rem;
}


dd,
dt,
li {
	margin-bottom: 1.0rem;
}


table {
	border-spacing: 0;
}


td,
th {
	padding: 1.2rem 1.5rem;
}


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


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


input,
select,
fieldset,
textarea {
	margin-bottom: 1.5rem;
}


textarea {
	min-height: 6.5rem;
}


.button,
button,
[type="button"],
[type="reset"],
[type="submit"] {
	display: inline-block;
	height: 3.8rem;
	padding: 0 3.0rem;
	margin-bottom: 1.0rem;
}


[type='email'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='url'],
textarea,
select {
	height: 3.8rem;
	padding: .6rem 1.0rem;
	width: 100%;
}


[type='checkbox'],
[type='radio'] {
	display: inline;
}


select {
	padding-right: 3.0rem;
}


label,
legend {
	display: block;
	margin-bottom: .5rem;
}


label.inline,
legend.inline {
	display: inline-block;
	margin-left: .5rem;
}


fieldset {
	border-width: 0;
	padding: 0;
}


/**
 * Colors, borders, outline, box-shadow, appearance, and opacity.
 */

body {
	color: #606c76;
}


a {
	color: #5680cc;
	text-decoration: none;
}


a:focus, a:hover {
	color: #606c76;
}


blockquote {
	border-left: 0.3rem solid #d1d1d1;
}


pre,
code {
	background: #f4f5f6;
}


pre {
	border-left: 0.3rem solid #5680cc;
}


code {
	border-radius: .4rem;
}


pre > code {
	border-radius: 0;
}


hr {
	border: 0;
	border-top: 0.1rem solid #f4f5f6;
}


td,
th {
	border-bottom: 0.1rem solid #e1e1e1;
}


/**
 * Button styling. All buttons start with the "outline" style defined in
 * milligram.css [2]. Buttons with a "submit" type or a "default" attribute
 * or class get the default style defined in milligram.
 */

.button,
button,
[type="button"],
[type="reset"],
[type="submit"] {
	border: 0.1rem solid #5680cc;
	border-radius: .4rem;
	white-space: nowrap;
	background-color: transparent;
	color: #5680cc;
	vertical-align: text-bottom;
	-webkit-appearance: none;
}


.button:focus,
.button:hover,
button:focus,
button:hover,
[type="button"]:focus,
[type="button"]:hover,
[type="reset"]:focus,
[type="reset"]:hover,
[type="submit"]:focus,
[type="submit"]:hover {
	outline: 0;
	background-color: transparent;
	border-color: #606c76;
	color: #606c76;
}


/**
 * Disabled buttons.
 */

.button[disabled],
button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
	opacity: .5;
}


.button[disabled]:focus,
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
[type="button"][disabled]:focus,
[type="button"][disabled]:hover,
[type="reset"][disabled]:focus,
[type="reset"][disabled]:hover,
[type="submit"][disabled]:focus,
[type="submit"][disabled]:hover {
	border-color: inherit;
	color: #5680cc;
}


/**
 * Submit buttons and buttons with a "default" class or attribute.
 */

.button.default,
button.default,
[type="button"][default],
[type="button"].default,
[type="reset"].default,
[type="submit"] {
	background-color: #5680cc;
	color: #fff;
}


.button.default:focus,
.button.default:hover,
button.default:focus,
button.default:hover,
[type="button"][default]:focus,
[type="button"][default]:hover,
[type="button"].default:focus,
[type="button"].default:hover,
[type="reset"].default:focus,
[type="reset"].default:hover,
[type="submit"]:focus,
[type="submit"]:hover {
	background-color: #606c76;
	border-color: #606c76;
	color: #fff;
}


.button.default[disabled]:focus,
.button.default[disabled]:hover,
button.default[disabled]:focus,
button.default[disabled]:hover,
[type="button"][default][disabled]:focus,
[type="button"][default][disabled]:hover,
[type="button"].default[disabled]:focus,
[type="button"].default[disabled]:hover,
[type="reset"].default[disabled]:focus,
[type="reset"].default[disabled]:hover,
[type="submit"].default[disabled]:focus,
[type="submit"].default[disabled]:hover {
	background-color: #5680cc;
	border-color: #5680cc;
}


/**
 * Other form elements.
 */

[type='email'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='url'],
textarea,
select {
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
	background-color: transparent;
	border: 0.1rem solid #d1d1d1;
	border-radius: .4rem;
	box-shadow: none;
}


[type='email']:focus,
[type='number']:focus,
[type='password']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='text']:focus,
[type='url']:focus,
textarea:focus,
select:focus {
	border-color: #5680cc;
	outline: 0;
}


select {
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDI5IDE0IiB3aWR0aD0iMjkiPjxwYXRoIGZpbGw9IiNkMWQxZDEiIGQ9Ik05LjM3NzI3IDMuNjI1bDUuMDgxNTQgNi45MzUyM0wxOS41NDAzNiAzLjYyNSIvPjwvc3ZnPgo=') center right no-repeat;
}


select:focus {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyOSAxNCIgd2lkdGg9IjI5Ij48cGF0aCBmaWxsPSIjOWI0ZGNhIiBkPSJNOS4zNzcyNyAzLjYyNWw1LjA4MTU0IDYuOTM1MjNMMTkuNTQwMzYgMy42MjUiLz48L3N2Zz4K');
}


@media (min-width: 40rem) {
	body {
		font-size: 1.8em;
	}
}


/******************************************************************************
*
*   CREDITS
* 
*   [1] normalize.css, https://github.com/necolas/normalize.css/
*   [2] milligram.css, https://github.com/milligram/milligram/
*   [3] https://css-tricks.com/box-sizing/
*   [4] https://hankchizljaw.com/wrote/a-modern-css-reset/
*   [5] https://github.com/jgthms/minireset.css/
*   [6] skeleton.css, https://github.com/dhg/Skeleton
* 
******************************************************************************/