/* Brand System by Kristien Harris
v.1 | 2020904
*/


/* Fonts Adobe Typekit https://use.typekit.net/ptp5xze.css */

@font-face {
    font-family: "futura-pt";
    src: url("https://use.typekit.net/af/9b05f3/000000000000000000013365/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/9b05f3/000000000000000000013365/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/9b05f3/000000000000000000013365/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "mrs-eaves";
    src: url("https://use.typekit.net/af/b80d9a/00000000000000003b9adc0d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/b80d9a/00000000000000003b9adc0d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/b80d9a/00000000000000003b9adc0d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "mrs-eaves-roman-all-small-ca";
    src: url("https://use.typekit.net/af/97a164/00000000000000003b9adc08/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/97a164/00000000000000003b9adc08/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/97a164/00000000000000003b9adc08/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
}


/* Structure */

#logoH {
    fill: none;
    stroke: hsl(0, 0%, 0%);
    stroke-width: 2;
    width: 250px;
    height: auto;
}

body {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
    background: hsl(0, 0%, 95%);
}

header,
section {
    margin: 5rem 0;
    padding: 1rem;
}

#fonts section {
    margin: 0;
    padding: 1rem 0;
}

form section {
    margin: 0;
}


/* Note: The container example below scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display. To swap this behavior, you can set max-height to 100% and width to auto (essentially swapping the values). This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display. */

.container {
    width: 50%;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}

.container img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Fonts */

.futura-pt,
h1,
button {
    font-family: "futura-pt";
}

.mrs-eaves,
body {
    font-family: "mrs-eaves", Georgia, 'Times New Roman', Times, serif;
}

.mrs-eaves-roman-all-small-ca,
label,
a {
    font-family: "mrs-eaves-roman-all-small-ca", Georgia, 'Times New Roman', Times, serif;
}

.courier,
code {
    font-family: 'Courier New', Courier, monospace;
}


/* Typography */

html {
    font-size: 20px;
}

body {
    line-height: 1.8;
}

section {
    border-top: 1px solid black;
}

#fonts section,
#interface section {
    border-top: 1px solid lightgray;
    margin: 1rem 0 0 0;
    padding: 2rem 0;
}

nav ul {
    margin-bottom: 1rem;
}

nav ul li,
nav ul li a {
    display: inline-block;
}

nav ul li a {
    border-radius: 1rem;
    display: inline-block;
    margin: 1rem 1rem 0 0;
    padding: 0 1rem;
    text-decoration: none;
    line-height: 2rem;
}

.upppercase,
h1,
h2,
h3,
h4,
button,
input[type=submit] {
    letter-spacing: .3rem;
    text-transform: uppercase;
}

h1 {
    font-size: 1.2rem;
}

h2 {
    font-size: 1rem;
}

h3 {
    font-size: .9rem;
}

h4 {
    font-size: .8rem;
}

h5 {
    font-size: .7rem;
}

h6 {
    font-size: .6rem;
}

label {
    display: block;
}

#colours div {
    padding: 1rem;
}

#colours div ul li {
    border-top: 1px solid white;
}

code {
    font-size: .7rem;
    line-height: 1rem;
    background: lightgrey;
    display: block;
    border-radius: 5px;
    padding: .5rem;
    padding-right: 1.7em;
}

#fonts code::after,
#colours li::after {
    float: right;
    color: white;
}

#fonts code::after {
    content: "CSS";
}

#colours li::after {
    font-size: .6em;
    line-height: 3em;
    opacity: .8;
}

#colours .hex::after {
    content: "HEX";
}

#colours .rgb::after {
    content: "RGB";
}

#colours .hsl::after {
    content: "HSL";
}

.pangram {
    font-size: 1.3rem;
    margin: 1rem 0;
}


/* Colours */

.blue-text {
    background: white;
    color: hsl(229, 100%, 50%);
}

.harris-blue,
a {
    background: hsl(229, 100%, 50%);
    color: white;
}

.harris-blue-hover,
a:hover {
    background: #001780;
    color: white;
}


/* Interface */

input,
button,
input[type=submit],
input[type=checkbox],
select {
    cursor: pointer;
}

input {
    border: 2px solid hsl(229, 100%, 50%);
    padding: .5em 1.5em;
}

button,
input[type=submit] {
    border-radius: 1rem;
    display: inline-block;
    margin: 1rem 1.2rem 0 0;
    padding: 0 1.2rem;
    text-decoration: none;
    line-height: 2rem;
    background: hsl(229, 100%, 50%);
    color: white;
    border: 0;
    letter-spacing: 4px;
    text-align: center;
}

button:hover,
input[type=submit]:hover {
    background: hsl(0, 0%, 0%);
}

#fonts button {
    height: 1rem;
    line-height: 1rem;
    border: none;
    background: grey;
    color: white;
    padding: 0 0.5em;
}

#fonts button:hover {
    background: hsl(0, 0%, 0%);
    color: white;
}

#fonts button:active {
    background: hsl(229, 100%, 50%);
    color: white;
}