/* Base styles (desktop first) */
body {
    background-color: #fbefff;
    padding: 20px;
    text-align: center;
    font-family: monospace;
    max-width: 800px;   /* desktop width limit */
    margin: 0 auto;     /* center content */
}

h1 {
    color: #5C6AC4;
    font-size: 36px;   /* smaller on desktop */
}

t1 {
    color: #8c94c9;
    font-size: 18px;
}

p1 {
    font-size: 15px;
}

p {
    font-size: 21px;
}

.responsive-img {
    width: 100%;
    max-width: 450px;  /* smaller on desktop */
    height: auto;
    display: block;
    margin: 0 auto;
    transform: translateX(-4.5%);
}

/* Mobile override */
@media (max-width: 1200px) {
    h1 {
        font-size: 6vw;   /* scale with screen */
    }

    t1 {
        font-size: 3.5vw;
    }

    p1 {
        font-size: 2.5vw;
    }

    p {
        font-size: 4vw;
    }

    .responsive-img {
        max-width: 95%;   /* slightly bigger image on mobile */
    }

    body {
        padding: 5vw;     /* smaller padding relative to mobile screen */
    }
}