:root {
    /* font sizes (fs) */
    /* 
        0 base
        lX large
        sX small
    */
    --fs-scale: 1.125;
    --fs0: 1rem;

    --fsl1: calc(var(--fs0) * var(--fs-scale));
    --fsl2: calc(var(--fsl1) * var(--fs-scale));
    --fsl3: calc(var(--fsl2) * var(--fs-scale));
    --fsl4: calc(var(--fsl3) * var(--fs-scale));

    --fss1: calc(var(--fs0) / var(--fs-scale));
    --fss2: calc(var(--fss1) / var(--fs-scale));
    --fss3: calc(var(--fss2) / var(--fs-scale));
    --fss4: calc(var(--fss3) / var(--fs-scale));

    /* font weight */
    --fw: 400;
    --fwb: 700;
    --fwl: 100;

    /* font color */
    /* fonts */
    --font: Arial, Helvetica, sans-serif;
    --font-h: 'Courier New', Courier, monospace;
    --font-code: 'Courier New', Courier, monospace;


    /* spacings */
    --spacing-scale: 1.5;
    --max-spacing: 4rem;
    --s5: var(--max-spacing);
    --s4: calc(var(--s5) / var(--spacing-scale));
    --s3: calc(var(--s4) / var(--spacing-scale));
    --s2: calc(var(--s3) / var(--spacing-scale));
    --s1: calc(var(--s2) / var(--spacing-scale));
    --s0: calc(var(--s1) / var(--spacing-scale));

    /* content-width */
    --cw: 620px;

    /* colors */
    --text: hsl(0, 0%, 17%);

    --primary: hsl(200, 25%, 50%);
    --primary-l1: color-mix(in srgb, var(--primary), #fff 20%);
    --primary-l2: color-mix(in srgb, var(--primary), #fff 40%);
    --primary-l3: color-mix(in srgb, var(--primary), #fff 60%);
    --primary-l4: color-mix(in srgb, var(--primary), #fff 80%);
    --primary-d1: color-mix(in srgb, var(--primary), #000 20%);
    --primary-d2: color-mix(in srgb, var(--primary), #000 40%);
    --primary-d3: color-mix(in srgb, var(--primary), #000 60%);
    --primary-d4: color-mix(in srgb, var(--primary), #000 80%);

    --secondary: color-mix(in hsl longer hue, var(--primary), var(--primary) 50%);
    --secondary-l1: color-mix(in srgb, var(--secondary), #fff 20%);
    --secondary-l2: color-mix(in srgb, var(--secondary), #fff 40%);
    --secondary-l3: color-mix(in srgb, var(--secondary), #fff 60%);
    --secondary-l4: color-mix(in srgb, var(--secondary), #fff 80%);
    --secondary-d1: color-mix(in srgb, var(--secondary), #000 20%);
    --secondary-d2: color-mix(in srgb, var(--secondary), #000 40%);
    --secondary-d3: color-mix(in srgb, var(--secondary), #000 60%);
    --secondary-d4: color-mix(in srgb, var(--secondary), #000 80%);

    --text-primary: color-mix(in srgb, var(--primary), #fff 90%);
    --text-secondary: color-mix(in srgb, var(--secondary), #fff 90%);
}

/* Styling of main page elements */

@media only screen and (max-width: 600px) {
    main {
        max-width: 100%;
        padding-left: var(--s1);
        padding-right: var(--s1);
    }    
}

@media screen and (min-width: 600px) {
    main {
        max-width: var(--cw);
    }
}

* {
    /* global properties*/
    font-family: var(--font);
    color: var(--text);
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
}

html {
    margin: 0;
    min-height: 100vh;
}

main {
    flex: 1;
    margin: 0 auto;
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-h);
    margin-top: var(--s4);
    margin-bottom: var(--s0);
}

h1 {
    font-size: var(--fsl4);
}

h2 {
    font-size: var(--fsl3);
}

h3 {
    font-size: var(--fsl2);
}

h4 {
    font-size: var(--fsl1);
}

h5 {
    font-size: var(--fs0);
    font-weight: var(--fwb);
}

h6 {
    font-size: var(--fsl4);
}

hr {
    color: var(--primary);
    border-style: dashed;
    border-bottom: none;
    border-width: 3px;
}

pre {
    font-family: var(--font-code);
    background-color: var(--primary-l4);
    padding: var(--s0);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

main img {
    max-width: 100%;
}

/* inline elements */
a {
    text-decoration: none;
    color: var(--primary);
}

a:hover {
    text-decoration: underline;
    color: var(--primary-d2);
}

abbr[title] {
    border-bottom: 1px dashed;
    text-decoration: none;
    cursor: help;
}

kbd {
    background-color: var(--primary-d3);
    color: var(--text-primary);
    padding: 0 var(--s0);
    border-radius: var(--s0);
}

mark {
    background-color: var(--secondary-l3);
}

code {
    font-family: var(--font-code);
    background-color: var(--primary-l4);
    padding: 0 var(--s0);
    border-radius: 2px;
}

/* lists */

ul,
ol {
    padding-left: var(--s3);
}

li {
    padding-bottom: var(--s0);
}

ul li {
    list-style: square;
}

/* Quote */

blockquote {
    margin-left: 0;
    padding-left: var(--s4);
    border-left: solid var(--primary) 3px;
}

blockquote>footer {
    width: initial;
    margin: initial;
    background-color: initial;
    color: initial;
    padding-bottom: initial;
}

/* Table */

:where(table) {
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
}

table {
    width: 100%;
}

th {
    text-align: inherit;
    padding: var(--s0);
    border-bottom: solid var(--primary) 1px;
}

tr:nth-child(2n) {
    background: var(--primary-l4);
}

td {
    margin: 0;
    padding: var(--s0);
    border-bottom: solid var(--primary-l3) 1px;
}

/* buttons */
a[role='button'] {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
}

a[role='button']:hover {
    text-decoration: none;
}

button,
input[type='button'],
input[type='submit'],
a[role='button'] {
    background-color: var(--primary);
    color: var(--text-primary);
    padding: var(--s1);
    border: none;
    border-radius: var(--s0);
    font-size: var(--fs0);
}

button:hover,
input[type='button']:hover,
input[type='submit']:hover,
a[role='button']:hover {
    background-color: var(--primary-d1);
}

button:disabled,
input[type='button']:disabled,
input[type='submit']:disabled,
a[role='button']:disabled {
    background-color: var(--primary-l2);
}

input[type=checkbox]:checked,
input[type=radio]:checked,
input[type=range] {
    accent-color: var(--primary);
}

/* forms */

label {
    display: inline-block;
    padding-bottom: var(--s0);
}

input,
textarea {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    margin-bottom: var(--s3);
    padding: var(--s1);
    box-sizing: border-box;
    border: solid var(--primary-l2) 1px;
    border-radius: var(--s0);
}

input[type='color'] {
    padding: 0;
    background-color: #fff;
}

label {
    width: 100%;
}

label>input {
    display: inherit;
    width: initial;
    margin-left: var(--s1);
    margin-top: 0;
    margin-bottom: 0;
}

label>input[type='color'] {
    min-width: 170px;
}

/* button classes */

button.secondary,
input[type='button'].secondary,
input[type='submit'].secondary {
    background-color: var(--secondary);
    color: var(--text-secondary);
}

button.secondary:hover,
input[type='button'].secondary:hover,
input[type='submit'].secondary:hover {
    background-color: var(--secondary-d1);
}

button.secondary:disabled,
input[type='button'].secondary:disabled,
input[type='submit'].secondary:disabled {
    background-color: var(--secondary-l2);
}


/* Header specific styling */

header {
    width: 100vw;
    margin: 0;
    margin-bottom: var(--s4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--primary);
    color: var(--text-primary);
}

header img {
    max-height: var(--s5);
    margin-left: var(--s1);
}

header>hgroup {
    flex: 1;
    min-width: calc(var(--cw) / 2);
    margin-right: var(--s5);
    margin-left: var(--s1);
}

header>hgroup>h1 {
    margin-top: var(--s0);
    margin-bottom: var(--s0);
    color: var(--text-primary);
}

header>hgroup>h1>a {
    color: var(--text-primary);
}

header>hgroup>h1>a:hover {
    color: var(--text-primary);
}

header>hgroup>p {
    font-size: var(--fsl1);
    margin-top: var(--s0);
    margin-bottom: var(--s0);
    font-family: var(--font);
    color: var(--text-primary);
}

header>nav>ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    padding-top: var(--s1);
    padding-bottom: var(--s1);
    align-items: center;
    flex-wrap: wrap;
}

header>nav>ul>li {
    float: left;
    margin-right: var(--s1);
    padding: var(--s1);
    color: var(--text-primary);
    list-style-type: none;

}

header>nav>ul>li>a {
    color: var(--text-primary);
}

header>nav>ul>li>a:hover {
    color: var(--text-primary);
}

/* Footer specific styling */

footer {
    width: 100vw;
    margin: 0;
    background-color: var(--primary);
    color: var(--text-primary);
    padding-bottom: var(--s5);
}

footer>div {
    max-width: var(--cw);
    margin: 0 auto;
    color: var(--text-primary);
    text-align: center;
}

footer>nav {
    margin: 0 auto;
    color: var(--text-primary);
}

footer>nav>ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    padding-top: var(--s1);
    padding-bottom: var(--s1);
    align-items: center;
    flex-wrap: wrap;
}

footer>nav>ul>li {
    float: left;
    margin-right: var(--s1);
    padding: var(--s1);
    color: var(--text-primary);
    list-style-type: none;

}

footer a {
    color: var(--text-primary);
}

footer a:hover {
    color: var(--text-primary);
}