*{box-sizing: border-box;}
html, body{
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-osx-font-smoothing: grayscale;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background: #F2F048;
}

/* Globals */
h1, h2, h3, h4, a, ul, ol, li, p, em {
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    margin: 0;
    padding: 0;
}
figure {margin: 0; padding: 0;}
.clear {clear: both;}
a {text-decoration: none; color: #000;}
:root {
    --palette-0: #999999;
    --palette-1: #99B5C7;
    --palette-2: #9FCFBA;
    --palette-3: #A1E38D;
    --palette-4: #B0CA45;
    --palette-5: #B8B935;
    --palette-6: #D6CE09;
    --palette-7: #CD992E;
    --palette-8: #D17F46;
    --palette-9: #DD738A;
    --palette-10: #E88DB8;
    --palette-11: #F8CBDD;
    --font-1: 'Print Char 21';
    --font-2: 'ChiKareGo';
    --font-3: 'Shaston Hi 320';
    --font-4: 'truth-fb';
    --font-5: 'Nu Sans Mono Demo';
    --font-6: 'Myriad Pro';
    --font-7: 'Geneva';
    --font-8: 'Lucida Grande';
    --font-9: 'Helvetica';
    --font-10: 'SFProText';
}
.palette-0 {background: var(--palette-0); border-color: var(--palette-0);}
.palette-1 {background: var(--palette-1); border-color: var(--palette-1);}
.palette-2 {background: var(--palette-2); border-color: var(--palette-2);}
.palette-3 {background: var(--palette-3); border-color: var(--palette-3);}
.palette-4 {background: var(--palette-4); border-color: var(--palette-4);}
.palette-5 {background: var(--palette-5); border-color: var(--palette-5);}
.palette-6 {background: var(--palette-6); border-color: var(--palette-6);}
.palette-7 {background: var(--palette-7); border-color: var(--palette-7);}
.palette-8 {background: var(--palette-8); border-color: var(--palette-8);}
.palette-9 {background: var(--palette-9); border-color: var(--palette-9);}
.palette-10 {background: var(--palette-10); border-color: var(--palette-10);}
.palette-11 {background: var(--palette-11); border-color: var(--palette-11);}

.font-color-0 {color: var(--palette-0);}
.font-color-1 {color: var(--palette-1);}
.font-color-2 {color: var(--palette-2);}
.font-color-3 {color: var(--palette-3);}
.font-color-4 {color: var(--palette-4);}
.font-color-5 {color: var(--palette-5);}
.font-color-6 {color: var(--palette-6);}
.font-color-7 {color: var(--palette-7);}
.font-color-8 {color: var(--palette-8);}
.font-color-9 {color: var(--palette-9);}
.font-color-10 {color: var(--palette-10);}
.font-color-11 {color: var(--palette-11);}

/* Header font change */
.font-1 {font-family: var(--font-1); font-size: 25px !important;}
.font-2 {font-family: var(--font-2); font-size: 13px;}
.font-3 {font-family: var(--font-3); font-size: 15px !important;}
.font-4 {font-family: var(--font-4);}
.font-5 {font-family: var(--font-5); font-size: 13px;}
.font-6 {font-family: var(--font-6);}
.font-7 {font-family: var(--font-7);}
.font-8 {font-family: var(--font-8);}
.font-9 {font-family: var(--font-9);}
.font-10 {font-family: var(--font-10);}

/* Header */
header {
    /* position: fixed; */
    top: 0;
    background: #F2F048;
    z-index: 1000;
    text-align: center;
    width: 100%;
    position: relative;
}
header h2 {margin-bottom: 0 !important;}
#spiral {
    width: 40px;
    height: 40px;
    background: url("https://cdn.filestackcontent.com/A8NpTjwAR8mJarKboKZA") no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat !important;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px
}
#title, h1, nav, main h2, .snapshot{
    font-family: Courier,'Courier New', monospace;
}
h1, h2, h3 {
    text-transform: uppercase;
}
#title {
    padding: 1em 4em 0 4em;
}
h1 { font-size: 50px; text-transform: uppercase; }
#title h2 {font-size: 22px; text-transform: none;}
#title h1 {padding: 0 !important; margin-bottom: -10px;}
#title h3 {margin-top: .5em; margin-bottom: -1em;}
#title a {text-decoration: underline;}
  
/* Nav */
nav {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
}
nav a {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.sticky {
    position: fixed;
    top: 0;
    z-index: 1000;
}
em {
    padding: 8px;
    border: 1px solid transparent;
}
em.current {
    border: 1px solid #000;
    border-radius: 100%;
}

/* Nav Keys */
.key {
    position: absolute;
    top: 100%;
    background: #fff;
    width: 20vw;
    padding: 10px;
    text-align: left;
    display: none;
    border-style: solid;
    border-width: 5px;
    z-index: 1000;
}
nav a:hover .key {
    display: block;
}
nav a div {line-height: 1.3;}
.hinge-left {left:0}
.hinge-right {right:0}
.palette-1 div {font-family: var(--font-1); font-size: 13px;}
.palette-2 div {font-family: var(--font-2); font-size: 20px;}
.palette-3 div {font-family: var(--font-3); font-size: 13px;}
.palette-4 div {font-family: var(--font-4);}
.palette-5 div {font-family: var(--font-5); font-size: 13px;}
.palette-6 div {font-family: var(--font-6);}
.palette-7 div {font-family: var(--font-7);}
.palette-8 div {font-family: var(--font-8);}
.palette-9 div {font-family: var(--font-9);}
.palette-10 div {font-family: var(--font-10);}

/* Content */
main {
    display: block;
}
main a {
    text-decoration: underline;
}
h2, h3, p, ul li, .snapshot {
    line-height: 1.5em;
    margin-bottom: 1em !important;
}
p:last-child, ul li:last-child {
    margin-bottom: 0 !important;
}
main h2 {
    font-size: 30px;
}
main h3 {

}
main img {max-width: 100%;}
main h1, main h2, main p, .snapshot, .insights, .link-module {
    max-width: 600px;
    margin: 0 auto;
    right: 100px;
    display: block;
    position: relative;
}
section {
    background: #fff;
    padding: 4em 2em;
}
h1 {
    padding: .5em 0;
}
ul {
    list-style-type: none;
}

/* Overrides */
#section-6 {
    padding-bottom: 16em;
}
#credit {
    background: #F2F048;
    padding: 10px;
    font-style: italic;
}

/* Snapshot */
.snapshot {
    background: #F2F048;
    padding: 20px;
}
.snapshot ul li::before {
    content: '';
    width: 0.9em;
    height: 0.7em;
    border: 1px solid #000;
    border-radius: 100%;
    margin-right: .5em;
    display: inline-flex;
    justify-content: baseline;
}

/* Insights */
.insights {
    margin-top: 40px;
}
.insights h3 {
    display: inline-block;
    padding: 3px 5px;
}
.insights p {
    right: 0;
    font-style: italic;
}

.graph:hover #image-viewer {
    display: block;
}

/* Link module */
.link-module {
    margin-bottom: 1em;
    text-decoration: none;
    padding: 20px;
    background: #fffbe0;
    border: 1px dotted #5f5f5f;
}
.link-module figure {
    margin-bottom: 0;
}
.link-module h2 {
    right: 0;
    font-size: 18px;
    line-height: 1.7;
    text-transform: initial;
    font-family: Georgia, 'Times New Roman', Times, serif;
    width: 100%;
}
.two-up {
    display: grid;
    grid-template-columns: 1fr 3fr;
}
.two-up figure {margin-right: 18px;}

/* Graphs */
.graph {
    max-width: 300px;
    position: absolute;
    right: 80px;
    z-index: 1;
}
figure {
    margin-bottom: 2em;
    cursor: zoom-in;
}
.caption {
    font-family: 'Courier New', Courier, monospace;
    color: #535353;
    margin-bottom: 1em;
}
.caption h2 {
    text-transform: uppercase;
}
.caption h2, .caption p {
    /* margin: initial;
    padding: initial; */
    right: 0;
    font-size: 16px;
    line-height: 1.4em;
}

/* Image Viewer */
#image-viewer {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: zoom-out;
}
#image-viewer img {
    max-width: 60vw;
    position: absolute;
    border: 5px solid #808080;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}

/* Quotes */
#quote-cloud {
    margin: 4em 0;
    position: relative;
    /* height: 800px; */
    /* background-color: red; */
    display: block;
}
.quote {
    max-width: 600px;
    font-size: 18px;
    padding: 5px;
    line-height: 2em;
    cursor: zoom-in;
}
.quote a {
    text-decoration: underline;
}
.quote:hover {
    animation-name: quote-enlarge;
    animation-duration: .1s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes quote-enlarge {
    /* 0% {font-size: red;} */
    100% {font-size: 25px;}
}
@media(max-width: 1200px) {
    #title h1, main h1 {font-size: 40px;}
    #title h2, #title h3, #title h3 a {font-size: 18px;}
    .graph, main h1 {
        position: relative;
        right: 0;
    }
    main h2, main p, .snapshot, .graph, .insights, .link-module {
        right: 0;
        /* background: blue; */
    }
    .graph {
        max-width: 600px;
        margin: 20px auto;
        padding: 0;
    }
    .graph figure {
        width: 100%;
        margin-bottom: 10px;
    }
    #section-6 {padding-bottom: 4em !important;}
    figure {cursor: initial}
}
@media(max-width: 1000px) {
    #title h1, main h1 {font-size: 30px;}
    #title h2, #title h3, #title h3 a {font-size: 15px;}
    nav a {padding: 0;}
    nav a:nth-child(1) {display: none;}
    nav a:nth-child(12) {
        grid-column: 5/7;
        grid-row: 2/3;
    }
    nav {grid-template-columns: repeat(6, minmax(10px, 1fr));}
}
@media(max-width: 565px) {
    .quote {
        width: 100%;
        margin-left: 0 !important;
        font-size: 18px;
        cursor: text;
    }
    section {padding: 2em 1em;}
    main h1 {padding: .5em;}
    #title h1, main h1 {font-size: 25px;}
    #title h2, #title h3, #title h3 a {font-size: 14px;}
    main h2 {font-size: 20px;}
    nav a:hover .key {display: none;}
    .two-up {grid-template-columns: 1fr;}
    .two-up figure {margin-right: 0; margin-bottom: 1em;}
    #image-viewer img {max-width: 100vw;}
}