body {
    font-family: ff-more-web-pro, serif;
    font-size: 1.5rem;
}
main {
    font-size: 0.5em;
}
@media only screen and (min-width: 425px) {
    main {
        font-size: 0.75em;
    }
}
@media only screen and (min-width: 768px) {
    main {
        font-size: 1em;
    }
}

h1{
    font-size: 6em;
    font-family: "ivypresto-headline", serif;
    font-weight: 700;
    font-style: normal;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
}

h1:first-letter {
    font-size: 150%;
}

.cta-btn {
    font-family: "ivypresto-display", serif;
    font-weight: 700;
    text-shadow: 0px 3px 8.4px rgba(0, 0, 0, 1);
    transform:scaleX(1.5);
}

#hero .cta-btn {
    font-size: 1.75em;
}

.section-header {
    color: #fff;
    text-align: center;
    text-shadow: 0 3px 6px #000;
}

#media .section-header,
#features .section-header,
#characters .section-header {
    color: #000;
    text-shadow: 0 3px 6px #fff;
}

#buy .section-header {
    color: #000;
    text-shadow: none;
}

#hero .release-date {
    font-family: ff-more-web-pro-condensed, serif;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.5em;
}

#hero .copy h2 {
    font-family: ff-more-web-pro-condensed, serif;
    font-weight: 700;
    font-size: 3em;
    line-height: 2em;
}

#hero .creators-copy {
    font-family: ff-more-web-pro, serif;
    font-weight: 400;
    font-size: 1.5em;
}

#hero .creator .title {
    font-family: ff-more-web-pro-condensed, serif;
    font-weight: 700;
    font-size: 1em;
}

#hero .creator .name {
    font-family: ff-more-web-pro, serif;
    font-weight: 400;
    font-size: 1.5em;
}

#characters .character-name {
    font-family: ff-more-web-pro-condensed, serif;
    font-weight: 700;
    font-size: 2.5em;
    text-transform: uppercase;
}

#characters .character-description {
    font-family: ff-more-web-pro, serif;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.75em;
}