@import url('reset.css');
@font-face{
    font-family: LF;
    src: url(LF.ttf);
}
html {
    background: white;
}

h1 {
    font-family: LF, serif;
    color: black;
}

h2 {
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    color: black;
}
body {
    display: inline-block;
}
nav {
    width: 100vw;
    height: 10vh;
    position: absolute;
}
nav p {
    margin: 0em;
    margin-left: 38vw;
    margin-top: 5vh;
    font-size: 2em;
    font-family: LF, serif;
    cursor: default;
}
::-webkit-scrollbar {
    display: none;
}
div#sansinfon,
div#serifinfon {
    margin-top: 3em;
    cursor: default;
}
div#sansinfox,
div#serifinfox {
    margin-top: 4.5em;
    cursor: default;
}
div#sansinfoc,
div#serifinfoc {
    margin-top: 6em;
    cursor: default;
}
a#sansinfol,
a#serifinfol {
    margin-top: 7.5em;
}
p {
    color: black;
    margin: 1em;
    font-size: 4em;
    cursor: pointer;
}
#plus {
    font-family: LF, serif;
    position: absolute;
    top: 35vh;
    left: 40vw;
    padding: 0;
}
div.infosans {
    width: 30vw;
    position: absolute;
    left: 10vw;
    top: 70vh;
    font-family: Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 2em;
    padding-left: 4em;
    padding-top: 0em;
    padding-bottom: .5em;
    padding-right: 0em;
}
div.infoserif {
    width: 30vw;
    position: absolute;
    left: 60vw;
    top: 70vh;
    font-family: LF, serif;
    font-size: 1em;
    line-height: 2em;
    padding-left: 4em;
    padding-top: 0em;
    padding-bottom: .5em;
    padding-right: 0em;
}
a.infosans {
    width: 30vw;
    position: absolute;
    left: 10vw;
    top: 70vh;
    font-family: Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 2em;
    padding-left: 4em;
    padding-top: 0em;
    padding-bottom: .5em;
    padding-right: 0em;
    cursor: pointer;
}
a.infoserif {
    width: 30vw;
    position: absolute;
    left: 60vw;
    top: 70vh;
    font-family: LF, serif;
    font-size: 1em;
    line-height: 2em;
    padding-left: 4em;
    padding-top: 0em;
    padding-bottom: .5em;
    padding-right: 0em;
    cursor: pointer;
}
div#sans {
    width: 40vw;
    height: 60vh;
    overflow: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 10vh;
    left: 5vw;
}
div#sans p {
    width: 30vw;
}
div#serif {
    width: 40w;
    height: 60vh;
    overflow: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 10vh;
    right: 5vw;
}
div#serif p {
    width: 30vw;
}
div#bar {
    width: 10vw;
    height: 10vh;
    position: absolute;
    left: 41vw;
    bottom: 12vh;
}
p.chartx {
    height: 2.5vh;
    background: black;
    color: red;
    font-family: Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1em;
    margin: 0;
    cursor: default;
}
p.chartc {
    height: 2.5vh;
    background: red;
    color: black;
    font-family: LF, serif;
    font-weight: 700;
    font-size: 1em;
    margin:0;
    cursor: default;
}
img {
    position: absolute;
    width: 40vw;
    left: 15vw;
}
p.intro {
    color: black;
    font-family: LF, serif;
    position: absolute;
    left: 60vw;
    width: 20vw;
    font-size: 1em;
    margin: 0;
    cursor: default;
    line-height: 1.2em;
}
#img1 {
    top: 25vh;
}
#intro1 {
    top: 40vh;
}
#img2 {
    top: 85vh;
}
#intro2 {
    top: 100vh;
}
#img3 {
    top: 145vh;
}
#intro3 {
    top: 160vh;
}
#img4 {
    top: 205vh;
}
#intro4 {
    top: 220vh;
}
#img5 {
    top: 265vh;
}
#intro5 {
    top: 280vh;
}
#img6 {
    top: 325vh;
}
#intro6 {
    top: 340vh;
}
#intro7 {
    top: 380vh;
    color: red;
    padding-bottom: 20vh;
}