body {
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    tab-size: 4;
    
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;

    main {
        width: 100%;
        margin-right: auto;
        margin-left: auto;

        box-sizing: border-box;

        min-height: 100svh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 0rem;

        article {
            margin-bottom: 1rem;
            padding: 1rem 1rem;
            border-radius: 0.25rem;

            background-color: #181c25;

            box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);;

            display: block;

            width: 100%;
            max-width: 900px;

            h1 {
                color: #f0f1f3;
                line-height: 1.125;

                display: block;
                margin-block-start: 0.67em;
                margin-block-end: 0.67em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;

                margin: 0;
                text-align: center;
                font-size: 60px;
                font-family: "Patrick Hand";
                font-weight: 500;
            }
        }
    }
}

@media only screen and (prefers-color-scheme: dark) {
    body {
        background-color: rgb(19, 22.5, 30.5);
        color: #c2c7d0;
    }
}

@media only screen and (prefers-color-scheme: light) {
    body {
        background-color: #fff;
        color: #373c44;
    }
}

@media (min-width: 576px) {
    main {
        max-width: 510px;
    }
}

@media (min-width: 768px) {
    main {
        max-width: 700px;
    }
}

@media (min-width: 1024px) {
    main {
        max-width: 950px;
    }
}

@media (min-width: 1280px) {
    main {
        max-width: 1200px;
    }
}

@media (min-width: 1536px) {
    main {
        max-width: 1450px;
    }
}