@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,700&display=swap");

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    color: hsl(0, 0%, 100%);
    /* include a semitransparent svg as a repeating background */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.1" viewBox="0 0 100 50"><g stroke="hsl(240, 20%, 15%)" stroke-linecap="square" stroke-linejoin="square" stroke-width="5" fill="none"><path d="M2.5 47.5l47.5-45 47.5 45"/><path d="M2.5 2.5l47.5 45 47.5-45"/></g></svg>'),
        hsl(320, 95%, 40%);
    background-size: 50px;
    font-family: "Noto Sans TC", sans-serif;
    /* center the "tweet" in the viewport */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* by default align the elements in the .tweet container */
.tweet {
    margin: 1rem;
    padding: 1.5rem 2rem;
    border-radius: 5px;
    background: hsl(240, 20%, 15%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0 1px 20px -10px hsla(0, 0%, 0%, 0.2);
    text-align: center;
}
/* by default separate the sibling elements starting with the second */
.tweet > * + * {
    margin-top: 1rem;
}

.tweet h1 {
    font-size: 1.1rem;
}
.tweet h2,
.tweet h3 {
    font-weight: 400;
    font-size: 1rem;
}
/* limit the width of the paragraph */
.tweet p {
    line-height: 2;
    font-size: 1.1rem;
    text-align: left;
    max-width: 320px;
}
/* display the icons in a vertically aligned row */
.icons {
    color: hsl(240, 10%, 60%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.icons svg {
    width: 25px;
    height: 25px;
}

/* bonus: change the color of the stroke when hovering on the icons, thanks to currentColor */
.icons svg:hover {
    color: hsl(320, 95%, 50%);
}
/* bonus: change the color of the text following a highlight
using the pseudo element on the entire document (`::selection {}`) would work as well
using the > direct children selector would skip the time element
*/
.tweet *::selection {
    color: hsl(320, 95%, 50%);
}

/* when the viewport is wider than an arbitrary threshold */
@media (min-width: 550px) {
    /* when grid is supported */
    @supports (display: grid) {
        /* remove the spacing introduced between the elements */
        .tweet > * + * {
            margin-top: initial;
        }
        .tweet {
            /* display the content in a grid with four columns and three rows */
            display: grid;
            gap: 1.5rem;
            grid-template-areas:
                "avatar handle name time"
                "avatar message message message"
                "avatar icons icons icons";
            /* reset the alignment of the nested elements */
            text-align: initial;
        }
        /* assign to each nested element the appropriate grid-area
        align the elements horizontally and vertically as needed
        */
        .tweet > svg {
            grid-area: avatar;
            justify-self: center;
            align-self: center;
        }
        .tweet h1 {
            grid-area: name;
            align-self: baseline;
        }
        .tweet h2 {
            grid-area: handle;
            align-self: baseline;
        }
        .tweet h3 {
            grid-area: time;
            align-self: baseline;
        }
        .tweet p {
            grid-area: message;
        }
        .tweet .icons {
            grid-area: icons;
        }
    }
}