:root {
    --piano-marvel-blue: #019CDB;
    --color-piano-marvel-off-blue: #1db7eb;
    --color-white: #FFF;
    --color-dark-blue: #1d4686;
    --color-magenta: #b13d7e;
    --color-orange: #c64e29;
    --standard-border-radius: 15px;
}

body {
    background-color: var(--color-piano-marvel-off-blue);
}

h1 {
    font-size: 3.5em;
}

h2 {
    font-size: 3em;
    margin-bottom: .75em;
}

h3 {
    margin: 1em 0;
}

p {
    font-size: 1.25em;
}

/* LAYOUT */
.content {
    --scroll-pos: 0px;
    position: relative;
    min-height: 100vh;
    background-color: #1db7eb;
    overflow: hidden;
    z-index: 0;
    color: var(--color-white);
}

.content::before, .content::after {
    content: '';
    position: absolute;
    top: var(--scroll-pos);
    bottom: 0;
    width: 50%;
    background-image: url(/static/images/sight-reading/background.png);
    background-repeat: repeat-y;
    background-size: 100%;
    transition: top 0.01s;
    z-index: -1;
}

.content::before {
    left: 0;
}

.content::after {
    left: 100%;
    transform: scaleX(-1);
    transform-origin: left;
    margin-top: 88vw;
}

.vertical-spacer {
    height: 100px;
}

.content a:not(.btn) {
    color: #FFF;
    text-decoration: underline;
}

/* ELEMENTS */
.title {
    text-align: center;
    margin-top: 1.5rem;
}

.p-large {
    font-size: 2em;
}

.ipad-image {
    position: relative;
    width: 701px;
    max-width: 100%;
}

.ipad-image::after {
    content: '';
    display: block;
    width: 100%;
    padding-top: 88.159%;
    background-image: url(/static/images/sight-reading/ipad.png?v=1);
    background-size: cover;
}

.ipad-image-play-button {
    position: absolute;
    left: 31%;
    top: 9.3%;
    width: 64.1%;
    height: 50%;
    opacity: .95;
    padding: 11% 21%;
    cursor: pointer;
}

.ipad-image-play-button:hover {
    opacity: 1;
}

.pm-logo {
    display: block;
    margin: 5vw auto 2vw;
    max-width: 50%;
}

/* CONTENT LINKS*/
.content-link-box {
    display: inline-block;
    width: 290px;
    height: 308px;
    padding: 10px;
    margin: 0 10px 10px 0;
    background-color: var(--color-magenta);
    border-radius: var(--standard-border-radius);
    text-align: center;
    vertical-align: top;
}
.content-link-box-icon {
    margin: 5px auto;
    width: 100px;
}
.content-link-box-title {
    font-size: 1.5em;
    margin-bottom: 1em;
}
.content-link-box-text {
    font-size: 1.1em;
    height: 52px;
    margin-bottom: 18px;
}

/* CONTENT BLOCK */
.content-block-right {
    padding: 15px;
    margin-right: -15px;
    border-top-left-radius: var(--standard-border-radius);
    border-bottom-left-radius: var(--standard-border-radius);
}
.content-block-left {
    padding: 15px;
    margin-left: -15px;
    border-top-right-radius: var(--standard-border-radius);
    border-bottom-right-radius: var(--standard-border-radius);
}

.content-block-blue {
    background-color: var(--color-dark-blue);
}

.content-block-off-blue {
    background-color: var(--color-piano-marvel-off-blue);
    box-shadow: 0 0 10px 10px var(--color-piano-marvel-off-blue);
}

.content-block-magenta {
    background-color: var(--color-magenta);
}

.content-block-orange {
    background-color: var(--color-orange);
}

.content-block-button-wrapper {
    text-align: center;
    margin: 0 15px;
}

/* CONTENT IMAGE */
.content-image-left {
    max-width: 100%;
    margin-left: -15px;
    margin-bottom: 100px;
    float: left;
    border-top-right-radius: var(--standard-border-radius);
    border-bottom-right-radius: var(--standard-border-radius);
}

.content-image-right {
    max-width: 100%;
    margin-right: -15px;
    margin-bottom: 100px;
    float: right;
    border-top-left-radius: var(--standard-border-radius);
    border-bottom-left-radius: var(--standard-border-radius);
}

/* QUOTES */
.blue-row {
    background-color: var(--color-piano-marvel-off-blue);
    box-shadow: 0 0 20px 20px var(--color-piano-marvel-off-blue);
}

.quote-image {
    display: block;
    border: 3px solid #06367e;
    border-radius: var(--standard-border-radius);
    margin: 10px auto;
}
.quote-mark {
    display: block;
    margin: 10px auto;
}
.quote-text {
    font-size: 1.25em;
    text-align: center;
    max-width: 450px;
    margin: 10px auto;
}
.quote-author {
    margin-top: 16px;
    font-size: 1.25em;
    text-align: center;
}
.quote-author::before {
    content: '- ';
}

/* LOGOS */
.logo-container {
    width: 100%;
    white-space: nowrap;
    text-align: center;
}

.school-logo {
    display: inline-block;
    margin: 5px;
}