/* ===================================================================
 * # settings and variables
 *
 * ------------------------------------------------------------------- */


:root {

	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-1: "Roboto", var(--font-base);
	--font-2: "Cambria", var(--font-base);
	--font-3: serif;

    /* monospace
     */
	--font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {

    /* color-1(#0A369D)
     * color-2(#C1292E)
     */
    --color-1: hsla(180, 1%, 39%, 1);
    --color-2: hsla(0, 0%, 16%, 1);

    /* theme color variations
     */
	
    --color-1-light  : hsla(0, 0%, 45%, 1);
    --color-1-lighter: hsla(180, 1%, 51%, 1);
    --color-1-dark   : hsla(180, 1%, 35%, 1);
    --color-1-darker : hsla(180, 1%, 31%, 1);
    --color-2-lighter: hsla(180, 2%, 24%, 1);
    --color-2-light  : hsla(180, 1%, 20%, 1);
    --color-2-dark   : hsla(0, 0%, 12%, 1);
    --color-2-darker : hsla(0, 0%, 4%, 1);

    /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675), 
     * color-info(#d7ecfb), color-notice(#fff099)
     */
    --color-error          : hsla(359, 100%, 91%, 1);
    --color-success        : hsla(76, 69%, 68%, 1);
    --color-info           : hsla(205, 82%, 91%, 1);
    --color-notice         : hsla(51, 100%, 80%, 1);
    --color-error-content  : hsla(359, 50%, 50%, 1);
    --color-success-content: hsla(76, 29%, 28%, 1);
    --color-info-content   : hsla(205, 32%, 31%, 1);
    --color-notice-content : hsla(51, 30%, 30%, 1);

    /* shades 
     * generated using 
     * Tint & Shade Generator 
     * (https://maketintsandshades.com/)
     */
    --color-black  : #000000;
    --color-gray-19: #0a0a0a;
    --color-gray-18: #141414;
    --color-gray-17: #1e1e1e;
    --color-gray-16: #282828;
    --color-gray-15: #323333;
    --color-gray-14: #3b3d3d;
    --color-gray-13: #454747;
    --color-gray-12: #4f5151;
    --color-gray-11: #595b5b;
    --color-gray-10: #636565;
    --color-gray-9 : #737474;
    --color-gray-8 : #828484;
    --color-gray-7 : #929393;
    --color-gray-6 : #a1a3a3;
    --color-gray-5 : #b1b2b2;
    --color-gray-4 : #c1c1c1;
    --color-gray-3 : #d0d1d1;
    --color-gray-2 : #e0e0e0;
    --color-gray-1 : #eff0f0;
    --color-white  : #ffffff;

    /* text
     */
    --color-text: var(--color-gray-9);
    --color-text-dark: var(--color-gray-14);
    --color-text-light: var(--color-gray-7);
    --color-placeholder: var(--color-gray-7);

    /* buttons
     */
    --color-btn: var(--color-black);
    --color-btn-text: var(--color-white);
    --color-btn-hover: var(--color-gray-14);
    --color-btn-hover-text: var(--color-white);
    --color-btn-primary: var(--color-1);
    --color-btn-primary-text: var(--color-white);
    --color-btn-primary-hover: var(--color-1-darker);
    --color-btn-primary-hover-text: var(--color-white);
    --color-btn-stroke: var(--color-black);
    --color-btn-stroke-text: var(--color-black);
    --color-btn-stroke-hover: var(--color-black);
    --color-btn-stroke-hover-text: var(--color-white);

    /* others
     */
    --color-bg: var(--color-white);
    --color-border: #eeeeee;
}

/* ------------------------------------------------------------------- 
 * ## vertical spacing and typescale
 * ------------------------------------------------------------------- */
:root {
	
	--admin-bar: 32px;

    /* spacing
     * base font size: 16px 
     * vertical space unit : 32px
     */
    --base-size: 62.5%;
    --base-font-size: 1.6rem;
    --space: 3.2rem;

    /* vertical spacing 
     */
    --vspace-0_125: calc(0.125 * var(--space));
    --vspace-0_25 : calc(0.25 * var(--space));
    --vspace-0_5  : calc(0.5 * var(--space));
    --vspace-0_75 : calc(0.75 * var(--space));
    --vspace-0_875: calc(0.875 * var(--space));
    --vspace-1    : calc(var(--space));
    --vspace-1_25 : calc(1.25 * var(--space));
    --vspace-1_5  : calc(1.5 * var(--space));
    --vspace-1_75 : calc(1.75 * var(--space));
    --vspace-2    : calc(2 * var(--space));
    --vspace-2_5  : calc(2.5 * var(--space));
    --vspace-3    : calc(3 * var(--space));
    --vspace-3_5  : calc(3.5 * var(--space));
    --vspace-4    : calc(4 * var(--space));
    --vspace-4_5  : calc(4.5 * var(--space));
    --vspace-5    : calc(5 * var(--space));

    /* type scale
     * ratio 1:2 | base: 16px
     * -------------------------------------------------------
     *
     * --text-display-3 = (77.40px)
     * --text-display-2 = (64.50px)
     * --text-display-1 = (53.75px)
     * --text-xxxl      = (44.79px)
     * --text-xxl       = (37.32px)
     * --text-xl        = (31.10px)
     * --text-lg        = (25.92px)
     * --text-md        = (21.60px)
     * --text-size      = (18.00px) BASE
     * --text-sm        = (15.00px)
     * --text-xs        = (12.50px)
     *
     * -------------------------------------------------------
     */
    --text-scale-ratio: 1.2;
    --text-size       : var(--base-font-size);
    --text-xs         : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm         : calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md         : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg         : calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl         : calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl        : calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl       : calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1  : calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2  : calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3  : calc(var(--text-display-2) * var(--text-scale-ratio));

    /* default button height
     */
    --vspace-btn: var(--vspace-1_25);
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
        --base-font-size: 1.4rem;
		--text-scale-ratio: 1.175;
        --space: 2.8rem;
    }
}

/* ------------------------------------------------------------------- 
 * ## grid variables
 * ------------------------------------------------------------------- */
:root {

    /* widths for rows and containers
     */
    --width-full    : 100%;
    --width-max     : 1200px;
    --width-wide    : 1400px;
    --width-wider   : 1600px;
    --width-widest  : 1800px;
    --width-narrow  : 1000px;
    --width-narrower: 800px;
    --width-grid-max: var(--width-max);

    /* gutters
     */
    --gutter-lg : 2.4rem;
    --gutter-md : 1rem;
    --gutter-mob: 0.5rem;
}


/* ==========================================================================
 * # normalize
 * normalize.css v8.0.1 | MIT License |
 * github.com/necolas/normalize.css
 *
 * -------------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## document
 * ------------------------------------------------------------------- */

/* 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.*/

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/* ------------------------------------------------------------------- 
 * ## sections
 * ------------------------------------------------------------------- */

/* Remove the margin in all browsers. */

body {
    margin: 0;
}

/* Render the `main` element consistently in IE. */

main {
    display: block;
}

/* Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari. */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* ------------------------------------------------------------------- 
 * ## grouping
 * ------------------------------------------------------------------- */

/* 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE. */

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/* 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers. */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* ------------------------------------------------------------------- 
 * ## text-level semantics
 * ------------------------------------------------------------------- */

/* Remove the gray background on active links in IE 10. */

a {
    background-color: transparent;
}

/* 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    /* 2 */
}

/* Add the correct font weight in Chrome, Edge, and Safari. */

b, strong {
    font-weight: bolder;
}

/* 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers. */

code, kbd, samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Add the correct font size in all browsers. */

small {
    font-size: 80%;
}

/* Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers. */

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* ------------------------------------------------------------------- 
 * ## embedded content
 * ------------------------------------------------------------------- */

/* Remove the border on images inside links in IE 10. */

img {
    border-style: none;
}

/* ------------------------------------------------------------------- 
 * ## forms
 * ------------------------------------------------------------------- */

/* 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari. */

button, input, optgroup, select, textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/* Show the overflow in IE.
 * 1. Show the overflow in Edge. */

button, input {
    /* 1 */
    overflow: visible;
}

/* Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox. */

button, select {
    /* 1 */
    text-transform: none;
}

/* Correct the inability to style clickable types in iOS and Safari. */

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

/* Remove the inner border and padding in Firefox. */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Restore the focus styles unset by the previous rule. */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/* Correct the padding in Firefox. */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/* 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers. */

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera. */

progress {
    vertical-align: baseline;
}

/* Remove the default vertical scrollbar in IE 10+. */

textarea {
    overflow: auto;
}

/* 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10. */

[type="checkbox"], [type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/* Correct the cursor style of increment and decrement buttons in Chrome. */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/* 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari. */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/* Remove the inner padding in Chrome and Safari on macOS. */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari. */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* ------------------------------------------------------------------- 
 * ## interactive
 * ------------------------------------------------------------------- */

/* Add the correct display in Edge, IE 10+, and Firefox. */

details {
    display: block;
}

/* Add the correct display in all browsers. */

summary {
    display: list-item;
}

/* ------------------------------------------------------------------- 
 * ## misc
 * ------------------------------------------------------------------- */

/* Add the correct display in IE 10+. */

template {
    display: none;
}

/* Add the correct display in IE 10. */

[hidden] {
    display: none;
}


/* ===================================================================
 * # basic/base setup styles
 *
 * ------------------------------------------------------------------- */
html {
    font-size: 62.5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*, *::before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    font-weight: normal;
    line-height: 1;
    word-wrap: break-word;
    -moz-font-smoothing: grayscale;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: none;
}

/* ------------------------------------------------------------------- 
 * ## media
 * ------------------------------------------------------------------- */
svg, img, video embed, iframe, object {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------- 
 * ## typography resets
 * ------------------------------------------------------------------- */
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

p {
    font-size: inherit;
    text-rendering: optimizeLegibility;
}

em, i {
    font-style: italic;
    line-height: inherit;
}

strong, b {
    font-weight: bold;
    line-height: inherit;
}

small {
    font-size: 60%;
    line-height: inherit;
}

ol, ul {
    list-style: none;
}

li {
    display: block;
}

/* ------------------------------------------------------------------- 
 * ## links
 * ------------------------------------------------------------------- */
a {
    text-decoration: none;
    line-height: inherit;
}

a img {
    border: none;
}

/* ------------------------------------------------------------------- 
 * ## inputs
 * ------------------------------------------------------------------- */
fieldset {
    margin: 0;
    padding: 0;
}

input[type="email"], 
input[type="number"], 
input[type="search"], 
input[type="text"], 
input[type="tel"], 
input[type="url"], 
input[type="password"], 
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}