/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html {
    color: #000;
    background: #FFF;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
figure,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

input,
textarea,
select {
    *font-size: 100%;
}

legend {
    color: #000;
}

#yui3-css-stamp.cssreset {
    display: none;
}





/* My styles */

html {
    font-size: 16px;

}

main {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(21, .5fr);
    /* width: 95vw; */
    margin: 5%;
}

.height {
    height: 300vh;
}

main.oxygenFont {
    font-family: 'Oxygen',
        sans-serif;

}

main.orbitron {
    font-family: 'Orbitron',
        sans-serif;


}

main.unna {
    font-family: 'Unna',
        serif;
    grid-template-rows: repeat(12, .5fr);
}

h1.oxygen {
    font-weight: 700;
    font-size: calc(1rem + 20vmax);
    color: #EE9900;
}

h1.orbitron {
    font-weight: 700;
    font-size: calc(1rem + 10vmax);
    color: #0d47a1;
}

h1.unna {
    font-weight: 700;
    font-size: calc(1rem + 20vmax);
    color: #7cb342;
}

h2.oxygen {
    font-size: calc(1rem + 3vmax);
    color: #EE9900;
}

h2.orbitron {
    font-size: calc(1rem + 3vmax);
    color: #0d47a1;
}

h2.unna {
    font-size: calc(1rem + 3vmax);
    color: #7cb342;
}

h2.bookTitle {
    font-size: calc(1rem + 5vmax);
}

h3.oxygen {
    font-size: calc(1rem + 2vmax);
}

p.oxygen {
    font-family: 'Oxygen',
        sans-serif;
    line-height: 2em;
}

#titleOxygen {
    grid-column: 9 / span 2;
    grid-row: 1/ span 8;
    writing-mode: vertical-rl;

}

#titleOrbitron {
    grid-column: 5/9;
    grid-row: 1/3;
    z-index: 1;
}

#titleUnna {
    grid-column: 2/ span 5;
    grid-row: 1/3;
}

#aboutOxygen {
    grid-column: 2/5;
    grid-row: 1/2;
    place-self: end start;
}

#aboutOrbitron {
    grid-column: 2/5;
    grid-row: 3/4;
    place-self: end start;
}

#aboutUnna {
    grid-column: 6/9;
    grid-row: 3/4;
    place-self: end start;
}

#descriptionOrbitron {
    grid-column: 2/7;
    grid-row: 4/ span 5;
    padding: 10%;
    border: 7px double;
    font-size: calc(1rem + 1max);
    line-height: 1.5em;
}

#descriptionOxygen {
    grid-column: 2/6;
    grid-row: 2 / span 2;
    font-size: calc(1rem + 1max);
    border: 7px double;
    text-align: center;
    place-self: center;
    padding: 5%;
}

#descriptionUnna {
    grid-column: 6/11;
    grid-row: 3/6;
    font-size: calc(1rem + 1max);
    border: 7px double;
    text-align: center;
    place-self: center;
    padding: 5%;

}

#alphabetOxygen {
    grid-column: 2/6;
    grid-row: 5/7;
    font-size: calc(1rem + 2vmax);

}

#alphabetOrbiton {
    grid-column: 6/10;
    grid-row: 10/14;
    font-size: calc(1rem + 2vmax);
    text-align: center;
    line-height: 2em;

}

#alphabetUnna {
    grid-column: 1/11;
    grid-row: 6/9;
    font-size: calc(1rem + 6vmax);
    text-align: center;
    line-height: 2em;

}

#weightsOxygen {
    grid-column: 3/7;
    grid-row: 7/10;
    border: 7px double;
    padding: 5%;
    place-self: center;
}

#weightsOrbtron {
    grid-column: 8/12;
    grid-row: 6/8;
    border: 7px double;
    padding: 5%;
    place-self: center;
}

#weightsUnna {
    grid-column: 2/6;
    grid-row: 9/11;
    border: 7px double;
    padding: 5%;
    place-self: center;
    font-size: calc(1rem + 2vmax);
}

#decorativeLineOne {
    grid-column: 8/ 9;
    grid-row: 2/9;
    border: 7px double;
}

#decorativeLineTwo {
    grid-column: 5/ 12;
    grid-row: 2/3;
    border: 7px double;
}

#decorativeLineThree {
    grid-column: 2/ span 6;
    grid-row: 2/3;
    border: 7px double;
    z-index: -1;
}

#charactersOxygen {
    grid-column: 4/10;
    grid-row: 11/13;
    font-size: calc(1rem + 4vmax);
}

#charactersOrbitron {
    grid-column: 2/6;
    grid-row: 15/17;
    font-size: calc(1rem + 2vmax);
    text-align: center;
    line-height: 2em;
}

#charactersUnna {
    grid-column: 1/11;
    grid-row: 11/13;
    font-size: calc(1rem + 6vmax);
    text-align: center;
    line-height: 2em;
}


#excerptTitle {
    grid-column: 2/ span 4;
    grid-row: 13/ span 2;
}

#excerpt {
    grid-column: 2/8;
    grid-row: 15 /span 7;
    border-top: 7px double;
}

#author {
    grid-column: 6/8;
    grid-row: 20 /21;
}

#or-largeLetterOne {
    grid-column: 2/8;
    overflow: hidden;
    font-size: calc(1rem + 200vmax);
    place-content: end center;
    grid-row: 3/13;
    z-index: -1;
    color: rgba(0, 0, 0, 0.1);
}

#or-largeLetterTwo {
    grid-column: 2/11;
    overflow: hidden;
    font-size: calc(1rem + 100vmax);
    place-content: end center;
    grid-row: 14/21;
    z-index: -1;
    color: rgba(0, 0, 0, 0.1);
}

.paddingTop {
    padding-top: 5%;
}

.font-weightLight {
    font-weight: 300;
}

.font-weightRegular {
    font-weight: 400;
}

.font-weightRegular {
    font-weight: 500;
}

.font-weightRegularItalic {
    font-weight: 400;
    font-style: italic;
}


.font-weightBold {
    font-weight: 700;
}

.font-weightBoldItalic {
    font-weight: 700;
    font-style: italic;

}

.font-weightBlack {
    font-weight: 900;
}

/* nav styles */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 35%;
}

li {
    float: left;
    padding-left: 5%;
    padding-right: 5%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;

}

li a.unna {
    font-family: 'Unna',
        serif;
}

li a.oxygen {
    font-family: 'Oxygen',
        sans-serif;
}

li a.orbitron {
    font-family: 'Orbitron',
        sans-serif;
}




li a:hover {
    background-color: #111;
}