body {
    margin: 0;
display: flex;
    align-items: stretch;
    min-height: 100%;
    color: #222222;
}

body > div {
    flex-grow: 1;
    min-width: 5vw;
}

body > div.left {
    background-color: #fe66c3;
}

body > div.right {
    background-color: #ffdc59;
}

body.a2 > div.left {
    background-color: #8a57fe;
}

body.a2 > div.right {
    background-color: #5ddee6;
}

main {
    margin: 0 auto;
    max-width: 1200px;
    flex-grow: 1;
}

main > img {
    max-width: 100%;
}

article {
    margin: 10vh 5vw;
    font-size: 1.2em;
}

h1, h2, h3 {
    font-family: sans-serif;
    text-align: left;
}

article h1 {
    font-size: 2em;
}

article h3 {
    color: #444444;
    margin-left: 2vw;
}

article p {
    margin: 1.5em 0;
    line-height: 1.5em;
}

article p.intro {
    font-family: sans-serif;
    color: #666666;
    font-weight: bold;
    font-style: italic;
    margin: 3vh 0;
}

a {
    font-family: sans-serif;
    font-weight: bold;
    color: #444444;
}

div.comments {
    margin: 5vh 5vw;
}

div.comments form textarea {
    resize: none;
    padding: .8em;
    border-radius: 2em;
}

div.comments div.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

div.comments div.comment {
    border: solid 2px #ddd;
    border-radius: 2em;
    padding: .8em;
    max-width: 80%;
    font-family: cursive;
    display: inline-block;
    min-width: 10em;
    max-width: 20em;
}

div.comments div.comment p {
    margin: 0;
}

footer {
    height: 5vh;
    background-image: linear-gradient(to right, #fe66c3 , #ffdc59);
}

footer.a2 {
    height: 5vh;
    background-image: linear-gradient(to right, #8a57fe , #5ddee6);
}