body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23FF8DA1' stroke='%23FF8DA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-45 12 12)' d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 50px 50px;
    background-color: lightpink;

    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    min-height: 100dvh;
    padding: 1rem;
    box-sizing: border-box;
}

button {
    background: hotpink;
    border-radius: 16px;
    box-shadow: 2px 2px 0 #000;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    font-size: medium;
    cursor: pointer;
    border: none;
    touch-action: manipulation;
}

.card {
    background: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 8px 8px 0 #000;
    border: 1px solid #000;
    padding: 2rem 4rem;
    max-width: 90vw;
    box-sizing: border-box;
}

.card h1 {
    margin: 0 0 1.5rem 0;
    word-wrap: break-word;
}

.card img {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
}

/* Small phones */
@media screen and (max-width: 400px) {
    body {
        background-size: 35px 35px;
    }

    .card {
        padding: 1.5rem 1.25rem;
    }

    .card h1 {
        font-size: 1.25rem;
    }

    button {
        padding: 0.5rem 1rem;
        font-size: small;
    }
}

/* Tablets and larger phones */
@media screen and (min-width: 401px) and (max-width: 768px) {
    .card {
        padding: 2rem 2.5rem;
    }

    .card h1 {
        font-size: 1.5rem;
    }
}

/* Landscape orientation on small devices */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .card {
        padding: 1rem 2rem;
    }

    .card h1 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .card img {
        max-height: 40vh;
        width: auto;
    }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        min-height: auto;
    }

    .card {
        box-shadow: none;
        border: 2px solid #000;
    }

    button {
        display: none;
    }
}