/* === Intro section === */

#intro h2 {
    text-align: center;
}

@media (max-width: 30em) {
    #intro h2 {
        display: flex;
        flex-direction: column;
    }

    #intro h2 .intro-first {
        text-align: left;
    }

    #intro h2 .intro-second {
        text-align: right;
    }
}

#intro h3 {
    text-align: center;
}

/* === About Us page === */

#about-us {
    display: flow-root;
}

#about-us section {
    clear: both;
}

#about-us div.image {
    text-align: center;
    margin: 0.25cm auto;
}

#about-us div.image img {
    border: 1px solid #000000;
    max-width: 100%;
}

@media (min-width: 50em) {
    #about-us div.image {
        float: right;
        clear: right;
        width: 33%;
        margin: 0 0 0.5cm 0.75cm;
        text-align: right;
    }

    #about-us div.image img {
        width: 100%;
    }
}

/* === Throbbing shimmer animation for "paint, pixels, and code" === */

.shimmer-word {
    display: inline-block;
}

@keyframes word-throb {
    0% {
        transform: scale(1);
        background-position: 100% center;
    }
    35% {
        transform: scale(1.14);
    }
    50% {
        background-position: 50% center;
    }
    100% {
        transform: scale(1);
        background-position: 0% center;
    }
}

.shimmer-word.throbbing {
    background-image: linear-gradient(
        90deg,
        #444444 0%,
        #444444 28%,
        #888888 40%,
        #dddddd 50%,
        #888888 60%,
        #444444 72%,
        #444444 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: word-throb 0.9s ease-in-out forwards;
}