/* Degen Island — additions on top of the minimal theme's main.css
 *
 * NOTE: this theme loads Bootstrap 3, which sets `html { font-size: 10px }`.
 * That makes `rem` mean 10px here, not 16px, so sizes below are in px
 * deliberately. Do not "tidy" them into rem without checking the render.
 */

/* `body` is a column flexbox and `main` is a flex item. Flex items default to
   min-width:auto, so a wide table's min-content width was stretching main past
   the viewport and scrolling the whole page sideways on mobile. min-width:0
   lets it shrink so .table-wrap can do the scrolling instead. */
/* Bootstrap sets body{font-size:14px; line-height:1.43} and the theme never
   overrode it. That is too small and too tight for long-form reading, so body
   copy is set here instead. */
main {
    text-align: left;
    width: 100%;
    min-width: 0;
    font-size: 18px;
    line-height: 1.7;
}

.content {
    overflow-wrap: break-word;
}

.content p,
.content li {
    font-size: 18px;
    line-height: 1.7;
}

.content li {
    margin-bottom: 6px;
}

.content h2 {
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 14px;
}

.content h3 {
    font-size: 24px;
    margin-top: 32px;
    margin-bottom: 12px;
}

.content blockquote p {
    font-size: 19px;
}

main h1,
main h2,
main h3,
main h4 {
    text-align: left;
}

/* The theme styles .intro as a full-viewport splash — translateY(22vh) with
   12vh headings — which assumes the homepage has nothing below it. The homepage
   now has real content, and the transform made the heading overlap it. */
.intro {
    transform: none;
    padding: 16px 0 8px;
    text-align: center;
}

.intro > h1 {
    font-size: 52px;
    line-height: 1.1;
    margin: 0 0 8px;
    text-align: center;
}

.intro > h2 {
    font-size: 19px;
    line-height: 1.45;
    margin: 0;
    text-align: center;
}

@media (max-width: 600px) {
    .intro > h1 {
        font-size: 36px;
    }
}

/* ---------- Homepage path cards ---------- */

.paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 32px 0 16px;
    padding: 0;
    list-style: none;
}

.path-card {
    display: block;
    padding: 20px 22px;
    border: 1px solid #e2e2e2;
    border-top: 4px solid var(--accent);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
    height: 100%;
}

.path-card:hover,
.path-card:focus {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}

.path-card .eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 6px;
}

.path-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--accent);
}

.path-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #444;
}

/* ---------- Callouts ---------- */

.callout {
    border-left: 4px solid var(--accent);
    background: #fbf7f7;
    padding: 16px 20px;
    margin: 28px 0;
    border-radius: 0 4px 4px 0;
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout .callout-title {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 8px;
}

/* ---------- Table of contents ---------- */

.toc {
    border: 1px solid #e6e6e6;
    border-left: 4px solid var(--accent);
    border-radius: 0 4px 4px 0;
    background: #fafafa;
    padding: 18px 22px;
    margin: 0 0 36px;
}

.toc-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8a8a8a;
    font-weight: 700;
    margin: 0;
    cursor: pointer;
    /* Own chevron rather than the UA marker, which the theme's CSS reset
       swallows in some browsers — without it the collapsed box on mobile looks
       like an inert label. */
    list-style: none;
}

.toc-title::-webkit-details-marker {
    display: none;
}

.toc-title::after {
    content: "\25B8";
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    transition: transform .15s ease;
}

.toc[open] .toc-title::after {
    transform: rotate(90deg);
}

.toc[open] .toc-title {
    margin-bottom: 10px;
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content .toc li {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 8px;
}

.toc a {
    font-weight: 600;
}

.toc-note {
    display: block;
    font-size: 14px;
    color: #777;
}

.toc-sub {
    margin-top: 6px !important;
    padding-left: 18px !important;
    border-left: 2px solid #e6e6e6;
}

.content .toc-sub li {
    font-size: 15px;
    margin-bottom: 4px;
}

.toc-sub a {
    font-weight: 400;
}

/* The navbar is fixed, so an anchor jump would otherwise land with the target
   heading hidden underneath it. */
.content h2,
.content h3 {
    scroll-margin-top: 70px;
}

/* ---------- Tables ---------- */

.content .table-wrap {
    overflow-x: auto;
    margin: 24px 0;
}

.content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.content th,
.content td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
    vertical-align: top;
}

.content thead th {
    border-bottom: 2px solid #ccc;
    font-weight: 700;
    white-space: nowrap;
}

.content tbody tr:hover {
    background: #fafafa;
}

/* ---------- FAQ ---------- */

.faq {
    margin-top: 48px;
}

.faq-item {
    padding-top: 20px;
}

.faq-item + .faq-item {
    border-top: 1px solid #eee;
}

.content .faq-item h3 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 8px;
}

.content .faq-item p {
    font-size: 17px;
    color: #444;
}

/* ---------- Page meta + related links ---------- */

main > div > h5 {
    font-size: 17px;
    line-height: 1.55;
    color: #666;
    margin: 8px 0 0;
}

.page-meta {
    font-size: 14px;
    color: #8a8a8a;
    margin: 4px 0 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.related {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.related h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #8a8a8a;
    margin-bottom: 12px;
}

.related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.disclaimer {
    font-size: 13px;
    line-height: 1.6;
    color: #777;
    background: #f7f7f7;
    padding: 14px 18px;
    border-radius: 4px;
    margin-top: 32px;
}

/* ---------- Misc ---------- */

.content ul,
.content ol {
    text-align: left;
}

.content blockquote {
    font-style: normal;
    color: #555;
}

footer .copyright {
    font-size: 13px;
}