body {
    background: linear-gradient(135deg, #ffb6e6 0%, #b5b9ff 50%, #7afcff 100%);
    color: #222;
}

h1,
h2 {
    font-family: 'Courier New', Courier, monospace;
}

h2 {
    font-size: xx-large;
}

p {
    font-size: 1.5rem;
}

a {
    font-size: 1.25rem;
}

body>header {
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;

    @media screen and (min-width: 1024px) {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    background-color: #fff;
    border-radius: 0.2rem;
    box-shadow: 2px 2px 8px rgba(153, 3, 173, 0.4);
}

body>footer {
    text-align: center;

    background-color: #fff;
    border-radius: 0.2rem;
    box-shadow: 2px 2px 8px rgba(153, 3, 173, 0.4);
}

#main-flex {
    @media screen and (min-width:1024px) {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }
}

body>* {
    margin-left: 1rem;
    margin-right: 1rem;

    @media screen and (min-width:1024px) {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

body>div>main {
    @media screen and (min-width: 1024px) {
        max-width: 640px;
        /* margin-left: auto; */
        /* margin-right: auto; */
        padding-left: 1rem;
        padding-right: 1rem;

        flex: 0 0 640px;
        order: 1;
    }

    background-color: #fff;
    border-radius: 0.2rem;
    box-shadow: 0 2px 8px rgba(184, 26, 184, 0.4);
}

body>div>aside {
    @media screen and (min-width: 1024px) {
        padding-right: 1rem;
        padding-right: 1rem;

        flex: 0 0 200px;
        order: 2;
    }

    background-color: #fff;
    border-radius: 0.2rem;
    box-shadow: 0 2px 8px rgba(13, 158, 0, 0.1);
}