<main>
    <article>
        <section>
            <aside>
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" width="554" height="554" viewBox="0 0 554 554" style="null" class="basketball">
                    <path d="M50.8 494.6a28.7 28.7 0 0 0-3.4 40.4 29.5 29.5 0 0 0 40.4 3.4l71.6-60.5c4.7-4 8-9.4 9.4-15.4l10.6-46 45.8 24.8V526a28.7 28.7 0 0 0 57.3 0V424.2c0-10.5-5.7-20.2-15-25.2l-41.4-22.5L201.4 232l38.2-49.8c2.9-3.8 4.5-8.4 4.5-13.1v-52.5a21.5 21.5 0 0 0-43 0v45.2l-22.2 28.8-72.7 12.5-21.7-25.3 6.2-76.2c1-11.8-7.9-22.2-19.7-23.1-11.8-.9-22.2 8-23.2 19.7l-6.9 85a21.4 21.4 0 0 0 5.2 15.8l53.8 62.8 25.4 134-10.2 44.5-64.3 54.3z"/>
                    <path d="M159.9 176.5a46.7 46.7 0 1 0-31.4-88 46.7 46.7 0 0 0 31.4 88z"/>
                    <path d="M357.5 208.5h9.8a144 144 0 0 1 10.6 86.4 4.8 4.8 0 1 0 9.5 1.7c1.2-7 1.8-13.6 2.2-20h34.3V299a4.8 4.8 0 0 0 9.5 0v-22.3h32c.3 6.4 1 13 2.2 20a4.8 4.8 0 1 0 9.4-1.7c-7-40.2 3.3-70.8 10.7-86.4h12a14.3 14.3 0 1 0 0-28.7H357.6a14.3 14.3 0 1 0 0 28.7zm76 0H477c-2.8 6.3-5.6 14.3-7.8 23.7h-35.9v-23.7zm0 33.3h33.8c-1.3 7.7-2 16.1-2.1 25.3h-31.8v-25.3zm-9.6 25.3h-34.1c0-9.2-.8-17.6-2.2-25.3H424V267zm0-58.6v23.7h-38.2c-2.2-9.4-5-17.4-7.8-23.7h46z"/>
                </svg>
                <div class="circle"></div>
                <div class="thought">?!</div>
            </aside>
            <h1>408 request timeout - sorry, we lost your ball!</h1>
            <p>The animation only plays once, so just refresh!</p>
        </section>
    </article>
</main>

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
body, article, section {
    background-color: #fff;
    margin: 0;
    font-family: Raleway, sans-serif;
}
article {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
section {
    overflow: hidden;
    border: 4px solid black;
    border-radius: 15px;
    padding: 0 1em;
    width: 50vw;
}
aside {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding-top: 1em;
}
.basketball {
    width: 100%;
    height: 100%;
}
@keyframes throw {
    0% {
        top: 10%;
        left: 24%;
        border-radius: 50%;
        width: 20%;
        height: 20%;
    }
    25% {
        top: 10%;
        left: 24%;
        border-radius: 50%;
        width: 20%;
        height: 20%;
    }
    75% {
        top: -50%;
        left: 40%;
        border-radius: 50%;
        width: 12%;
        height: 12%;
    }
    100% {
        top: -50%;
        left: 40%;
        border-radius: 50%;
        width: 12%;
        height: 12%;
    }
}
.circle {
    position: absolute;
    background-color: #ff6f00;
    border: 4px solid #bf360c;
    z-index: -1;
    animation-name: throw;
    animation-duration: 4s;
}
h1,p {
    text-align: center;
}
.thought {
    position: absolute;
    font-size: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
    top: 0.5em;
    left: 1em;
    width: 2em;
    height: 2em;
    border: 4px solid black;
    border-radius: 2em;
    color: #000;
    background-color: #fff;
    visibility: hidden;
    transition-property: visibility;
}
.thought.show {
    visibility: visible;
}
.thought:before,
.thought:after {
    content: "";
    position: absolute;
    border: 4px solid black;
    border-radius: 2em;
    width: 1em;
    height: 1em;
    background-color: #fff;
    left: 1em;
    top: 1em;
}
.thought:before {
    z-index: -1;
} 
.thought:after {
    width: 0.5em;
    height: 0.5em;
    background-color: #fff;
    z-index: -2;
    left: 1.7em;
    top: 1.7em;
}

/*
Thanks to the following resources:

SVG - https://www.svgrepo.com/svg/14188/basketball-player
Rough CSS3 animation - https://www.w3schools.com/Css/css3_animations.asp (I feel dirrrty)
Centering Flexbox - https://alligator.io/css/centering-using-flexbox/
Resizable SVG - https://codepen.io/copist/pen/vLLmPB
Adding clases - https://alligator.io/js/classlist/
*/
setTimeout(function(){
    document.querySelector('.thought').classList.add('show');
}, 4500);