html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Courier New', Courier, monospace;
    background-color: #fff;
    color: #000;
}

a {
    text-decoration: none;
    font-size: 2em;
}

a:hover {
    text-decoration: underline;
    color: hotpink;
}

h1 { color: darkorange; }

/* ===============================
   Image Wrapper with Curve
================================= */
.image-wrapper {
    position: relative;
    width: 100%;
    overflow: visible; /* allow text to overlap curve */
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.image-wrapper::after {
    content: "";
    position: absolute;
    bottom: -15%;       /* small negative to let article overlap */
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 40%;
    background: #fff;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
}

/* ===============================
   Article Styles
================================= */
article {
    position: relative;
    z-index: 4;
    max-width: 1222px;
    margin: -50px auto 2em auto; /* overlaps the curve */
    padding: 1em;
    font-size: 1.15em;
    line-height: 2em;
}

/* ===============================
   Dark Mode
================================= */
@media (prefers-color-scheme: dark) {
    body { background-color: #111; color: #fff; }
    .image-wrapper::after { background-color: #111; }
    a { color: #bb86fc; }
}

/* ===============================
   Responsive
================================= */
@media (max-width: 1200px) {
    article { margin: -40px auto 1.5em auto;}
    .image-wrapper::after { bottom: -12%; height: 35%; width: 150%; }
}

@media (max-width: 768px) {
    article { margin: -30px auto 1em auto; }
    .image-wrapper::after { bottom: -10%; height: 30%; width: 160%; }
}

@media (max-width: 480px) {
    article { margin: -20px auto 1em auto;}
    .image-wrapper::after { bottom: -8%; height: 25%; width: 170%; }
}
