* {
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    background: #0c0c0c url('images/bg.png') repeat;
}

a {
    color: #c0c0c0;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #c0c0c0;
}

p {
    color: #c0c0c0;
    font-family: 'Indie Flower', serif;
    font-size: 1.6rem;
    line-height: 3.5rem;
}

img {
    max-width: 100%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

section {
    padding: 14vh 0;
}

header {
    padding: 3vh 0;
    /* display: flex; */
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

header,
section:not(.eight):not(.ten) {
    width: 80%;
    margin: auto;
}

.centered-text {
    text-align: center;
}

.logo {
    margin-right: 100vh;
    font-size: 2.5rem;
}

/* 
nav a,
header a {
    color: white;
    font-family: 'Amatic SC', sans-serif;
    font-size: 1.5em;
    text-decoration: none;
    padding: 10px 20px;
} */

.back-to-top {
    color: gray;
    font-family: 'Amatic SC', sans-serif;
    font-size: 1.25em;
    position: fixed;
    display: block;
    bottom: 20px;
    right: 20px;
    transition: 1s ease-in-out;
}

.back-to-top:hover {
    color: white;
}

.red {
    color: red;
}

/* Sections */

.title {
    background: url(images/title-bg.png) no-repeat center;
    height: 100vh;
    width: 100%;
    margin: 10vh auto;
    top: -6%;
    position: absolute;
}

.title img {
    display: block;
    margin: 20vh auto 0;
    width: 60%;
    justify-content: center;
    align-items: center;
    top: 50%;
}

.one {
    padding-top: 100vh;
}

.one-head {
    font-family: 'Amatic SC', sans-serif;
    font-size: 4rem;
    text-align: left;
    margin: 0;
}

.one-content {
    padding: 30px 0 50px;
    width: 70%;
}

.two,
.four {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.two img {
    width: 30%;
    margin-right: 5%;
}

.three-content {
    margin: 2vh 0 15vh;
}

.three-medium {
    font-size: 2.5em;
    margin: 50vh 0 5vh;
}

.three-large {
    margin: 50vh 0 35vh;
    text-align: center;
}

.four-highlight {
    font-size: 16vw;
    font-family: 'Amatic SC', sans-serif;
    margin: 10vh;
    line-height: 2em;
}

.four img {
    width: 30%;
    padding: 0 10rem;
}

.five,
.six,
.seven,
.eleven,
.twelve,
.thirteen,
.fifteen {
    text-align: center;
}

.seven,
.nine,
.seventeen {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seven-content {
    font-family: 'Amatic SC', sans-serif;
    font-size: 4rem;
}

.seven img {
    margin-top: 30vh;
}

.eight {
    text-align: center;
    width: 100%;
}

.eight p {
    padding-bottom: 25vh;
}

.nine p {
    font-size: 2rem;
    margin: 20vh 0 50vh;
    line-height: 10vh;
}

.ten p {
    width: 50%;
    margin: 15vh auto 30vh;
}

.eleven p,
.twelve p,
.thirteen p {
    margin: 20vh 0 30vh;
}

.thirteen p {
    font-family: 'Amatic SC', sans-serif;
    font-size: 5.5rem;
}

.fourteen p {
    padding: 2rem 0;
    width: 70%;
    margin: auto;
}

.police {
    font-family: 'Amatic SC', sans-serif;
    font-size: 3.5rem;
}

.sixteen p {
    margin: 0 0 10vh;
}

.sixteen img {
    display: block;
    width: 50%;
    margin: auto;
}

.seventeen img {
    margin: 20vh 0;
    width: 70%;
}

.seventeen p,
.eighteen p {
    text-align: left;
}

.eighteen {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.eighteen img {
    width: 30%;
}

.eighteen p:not(.revelation) {
    font-size: 1.6rem;
    width: 100%;
    line-height: 2.25em;
    padding: .75rem 0;
}

.revelation {
    font-family: 'Amatic SC', sans-serif;
    margin-top: 10rem;
}

.nineteen p,
.twentyone p {
    font-size: 1.8rem;
    text-align: center;
    margin: 40vh 0 56vh;
}

.twenty {
    background-image: url('images/9.png');
    background-repeat: no-repeat;
    width: 100% !important;
    height: 100vh;
}

.twenty p {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 10vh;
    line-height: 2em;
}

.twentyone img:nth-child(1) {
    width: 50%;
    margin: auto;
}

.injection {
    width: 30%;
    margin: auto;
    display: block;
}

.hi-there {
    width: 100%;
    height: 100vh;
    position: absolute;
    padding: 15vh 0;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 80%;
    text-align: center;
    padding: 0 0 2em;
}

.divider {
    color: white;
}

.end {
    padding: 5vh 0;
}

.end img {
    width: 500px;
}

.creds {
    padding: 2vh 0;
    width: 50%;
}

.role {
    font-size: 1.2em;
    color: gray;
}

.credit {
    font-size: 2em;
    font-family: 'Amatic SC', sans-serif;
    color: #c0c0c0;
    letter-spacing: 1px;
}