wtf(css)layout you can see happening
← wtf(css)
Explain the wtf

height: 100% does nothing

MediumThe famous WTFsW01

The loading screen is supposed to fill the window. It is 64px tall — exactly as tall as the spinner in it. height: 100% is right there in the stylesheet, applying, not crossed out in DevTools.

.splash is meant to cover the whole window while the app boots. It is currently as tall as its own contents. Make it the full height of the window, and keep it that way when the window is a different size. The declaration in the starter is not a typo and it is not being overridden. It is doing exactly what it is defined to do, and the result is nothing.

Hint

A percentage is a percentage OF something. Which box is that, and does that box have a height yet?

Live preview800×600
Your stylesheet
checked in a real browser, four ways
The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="splash"><div class="spinner"></div></div>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
.splash { background: #16161d; }
.spinner { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #ffd166; }