%markdown { h1 { margin-bottom: 0.25rem; @media (min-width: 901px) { font-size: 3rem; } @media (max-width: 900px) { font-size: 2rem; } + h2 { margin-top: 2rem; } } h2 { @media (min-width: 901px) { font-size: 2rem; } @media (max-width: 900px) { font-size: 1.5rem; } + h3 { margin-top: 1rem; } } h3 { @media (min-width: 901px) { font-size: 1.5rem; } @media (max-width: 900px) { font-size: 1.25rem; } } h4 { letter-spacing: 0.05rem; text-transform: uppercase; @media (min-width: 901px) { font-size: 1.25rem; } @media (max-width: 900px) { font-size: 1.15rem; } } h5 { font-size: 1rem; } sup { @include font-mono; } blockquote { left: 2px; line-height: 1.5; margin-bottom: 0.5rem; position: relative; @media (min-width: 601px) { margin-left: 15%; padding: 0.5rem 0 0.05rem 2rem; font-size: 1.5rem; width: 70%; } @media (max-width: 600px) { font-size: 1.25rem; padding: 0.5rem 0 0.05rem 0; } @media (min-width: 376px) and (max-width: 600px) { margin-left: 5%; width: 90%; } p { font-size: inherit; line-height: inherit; } &::before { @include font-serif; width: 150px; height: 100px; top: 3rem; left: -2rem; color: rgba($teal, 0.2); content: "\201C"; font-size: 20rem; line-height: 0.5; position: absolute; } } p, ol, ul, table { code { background-color: $black; border-radius: 3px; color: $white; font-size: 60%; letter-spacing: 0.05rem; padding: 0.3rem 0.5rem; vertical-align: middle; @media (max-width: 900px) { position: relative; top: -1px; } } } p, ol, ul { margin-bottom: 1rem; position: relative; @media (min-width: 901px) { font-size: 1.25rem; line-height: 1.6; } @media (max-width: 900px) { font-size: 1.05rem; line-height: 1.55; } } ol, ul { padding-top: 0.5rem; li { &:not(:last-of-type) { margin-bottom: 0.25rem; } } + h2, + h3, + h4, + h5 { padding-top: 2rem; } } ol { list-style-type: lower-roman; padding-left: 1.6rem; } ul { padding-left: 1.25rem; } img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } p { img { float: right; } } a:not(.__button-black):not(.button):not(.header-anchor):not(.newsletter-standalone__submit):not(.__plain) { @include underline($teal, $white); color: $teal; code { background-color: $teal; text-shadow: none; } } pre { font-size: 1rem; } h2, h3, h4, h5 { + table { margin-top: 0.5em; } } table { background-color: $white; border: 1px solid rgba($gray, 0.3); border-spacing: 0; margin-bottom: 2rem; position: relative; width: 100%; @media (max-width: 1030px) { display: inline-grid; thead { display: none; } tbody, tr, td { display: block; } tbody tr:last-of-type td:not(:last-of-type) { border-bottom: 1px solid rgba($gray, 0.3); } } thead { background-color: $black; color: $white; cursor: default; position: relative; tr { position: relative; z-index: 1; } &:not(*:root) { &::after { z-index: -1; } } &::after { width: calc(100% + 2px); height: calc(100% + 2px); top: -1px; left: -1px; background-color: $black; content: ""; position: absolute; z-index: 0; } } tbody { line-height: 1.55; } tr:nth-of-type(even) { background-color: rgba($black, 0.025); } th, td { padding: 0.5rem 1rem; } th { font-size: 0.8rem; letter-spacing: 0.1rem; text-transform: uppercase; } tbody tr:not(:last-of-type) td { border-bottom: 1px solid rgba($gray, 0.3); } td { font-size: 1rem; } } }