* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: #1f1e1d;
    color: #b0aea5;
    font-family: "Newsreader", "Times New Roman", serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ---- Phone dimensions: edit these ----
   --screen-width / --screen-height: the app's screen size at full size
     (390 x 844 is an iPhone 14/15). The app lays itself out at this width.
   --bezel: thickness of the black border around the screen.
   --margin-side: minimum space left/right of the phone when the window is narrow.
   --margin-bottom: space reserved under the phone for the caption.
   On smaller windows the frame shrinks to fit: width and height shrink
   separately, so a short laptop window makes the phone shorter, not narrower. */
:root {
    --screen-width: 390px;
    --screen-height: 844px;
    --bezel: 12px;
    --margin-side: 6px;
    --margin-bottom: 34px;
}

.phone {
    position: relative;
    width: min(calc(var(--screen-width) + 2 * var(--bezel)), calc(100vw - 2 * var(--margin-side)));
    height: min(calc(var(--screen-height) + 2 * var(--bezel)), calc(100vh - var(--margin-bottom) - 8px));
    height: min(calc(var(--screen-height) + 2 * var(--bezel)), calc(100dvh - var(--margin-bottom) - 8px));
    padding: var(--bezel);
    border-radius: 56px;
    background: #0a0a0a;
    box-shadow: 0 0 0 2px #3d3d3a, 0 20px 60px rgba(0, 0, 0, .5);
    flex-shrink: 0;
}

.phone-notch {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 30%;
    height: 30px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: #0a0a0a;
    z-index: 2;
    pointer-events: none;
}

.phone-screen {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 44px;
    background: #fff;
}

/* Real phones: slimmer bezel so more room goes to the app */
@media (max-width: 600px) {
    :root {
        --bezel: 8px;
    }
    .phone {
        border-radius: 44px;
    }
    .phone-screen {
        border-radius: 36px;
    }
    .phone-notch {
        top: 16px;
        height: 24px;
    }
}

.phone-caption {
    margin: 8px 0 0;
    font-size: .85rem;
    line-height: 1.2;
}