:root { font-size: 16px; } body { font-family: 'Source Sans Pro', sans-serif; margin: 0 auto; padding-bottom: 20px; /* Prevent overlay on the bottom of the iframe */ max-width: 660px; color: #1a1a1a; } h1 { font-size: 48px; line-height: 50px; font-weight: 700; margin-top: 1.5em; } h2 { font-size: 36px; line-height: 40px; font-weight: 700; margin-top: 1em; } h3 { font-size: 28px; line-height: 32px; font-weight: 700; margin-top: 1em; } a { color: #1a1a1a; text-decoration: underline; } p { line-height: 1.75; font-size: 1.1rem; margin: 1em 0 3em 0; } ul, ol { line-height: 1.5; font-size: 1.1rem; margin: 1em 0 3em 0; } li { margin: 0.25em; padding: 0; } .lead p { font-size: 20px; font-weight: 600; } .quote { position: relative; } .quote p::before { content: "«"; color: #4dd898; font-size: 3em; position: absolute; top: -0.6em; left: 0; font-style: normal; } .quote p::after { content: "»"; color: #4dd898; font-size: 3em; position: absolute; bottom: -0.5em; left: 0; font-style: normal; } .quote p { font-size: 24px; font-style: italic; line-height: 32px; padding-left: 1em; margin: 3em 0; } .info-box { margin-top: 3em; margin-bottom: 3em; padding: 1em 0; border-top: #4dd898 2px solid; border-bottom: #4dd898 2px solid; border-left: none; border-right: none; background-color: inherit; } .info-box ul li::marker { color: #4dd898; } .info-box li p { color: black; margin: 1em 0; } .doi-box { border: none; padding: 0; margin: 0; } .button { margin-top: 2em; margin-bottom: 1em; border: #1a1a1a 1px solid; padding: 0.75em 1em; text-decoration: none; } .button-blue { margin-top: 2em; margin-bottom: 1em; color: white; background-color: #4159AC; padding: 0.75em 1em; text-decoration: none; } .button-secondary { margin-top: 2em; margin-bottom: 1em; border: #4159AC 1px solid; color: #4159AC; padding: 0.75em 1em; text-decoration: none; } .download-button { margin-top: 2em; margin-bottom: 1em; border: #1a1a1a 1px solid; padding: 0.75em 1em 0.75em 2.5em; text-decoration: none; background: url('data:image/svg+xml;utf8,') no-repeat left center; } .download-button-blue { margin-top: 2em; margin-bottom: 1em; padding: 0.75em 1em 0.75em 2.5em; text-decoration: none; background: url('data:image/svg+xml;utf8,') no-repeat left center; background-color: #4159AC; color: white; } .download-button-secondary { margin-top: 2em; margin-bottom: 1em; border: #4159ac 1px solid; padding: 0.75em 1em 0.75em 2.5em; text-decoration: none; background: url('data:image/svg+xml;utf8,') no-repeat left center; color: #4159AC; } @media screen and (max-width: 768px) { .hide-mobile { display: none; } body { margin: 0 20px; } h1 { font-size: 36px; line-height: 40px; } h2 { font-size: 32px; line-height: 36px; font-weight: 700; margin-top: 1em; } h3 { font-size: 28px; line-height: 32px; font-weight: 700; margin-top: 1em; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .hide-tablet { display: none; } } @media screen and (min-width: 1024px) { .hide-desktop { display: none; } } .plot-title { font-weight:bold; margin-bottom: 15px; } .caption p { text-align:left; font-size:0.7rem; color:#4e4d47; line-height:1.25; }