body {
    justify-items: center;
    align-items: center;
    display: flex;
    font-family: "Oxanium", sans-serif;
    text-align: center;
    background: #ffffff url("dot-grid.png.jpeg") repeat center center;
    background-size: 22em;
}

h1 {
    font-size: 44px;
    margin-block: 0.67em;
    margin: 0;
}

p, h1 {
    padding: 0 1rem;
}

b {
    font-weight: bold;
    display: block;
}

a {
    color: black;
    opacity: 50%;
    font-size: small;
}

a:hover {
    opacity: 100%;
    color: blue;
}

article {
    justify-items: center;
    align-items: center;
    margin: 20% auto 0;
    display: grid;
    gap: 1em;
}


@media (max-width: 599px) {
    h1 {
        grid-row: 1;
        grid-column: 1 / 3;
        order: 0;
    }

    article p:first-of-type {
        grid-row: 2;
        grid-column: 1 / 2;
    }
}

@media (min-width: 600px) {
    a {
        font-size: unset;
    }
    article {
        display: flex;
        flex-direction: row;
    }

    article p:first-of-type {
        order: -1;
        text-align: right;
    }

    article p:last-of-type {
        text-align: left;
    }
}