.mario-visual { background: linear-gradient(#5c94fc 0 68%, #8bd46b 68%); font-family: "Manrope", sans-serif; }
.mario-visual::after { display: none; }
.mario-cloud { position: absolute; width: 150px; height: 42px; border-radius: 40px; background: #fff; box-shadow: 35px -20px 0 4px #fff, 70px 0 0 #fff; opacity: .92; }
.mc1 { left: 8%; top: 17%; transform: scale(.75); }
.mc2 { right: 10%; top: 32%; transform: scale(.5); }
.mario-hill { position: absolute; bottom: 42px; width: 300px; height: 135px; border-radius: 170px 170px 0 0; background: #43b047; }
.mh1 { left: -55px; }
.mh2 { right: -70px; width: 390px; height: 180px; background: #359538; }
.mario-ground { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 55px; border-top: 6px solid #7a2c06; background: repeating-linear-gradient(90deg, #c84c0c 0 46px, #a03a08 46px 51px); }
.question-block { position: absolute; z-index: 3; right: 14%; top: 15%; width: 105px; height: 105px; display: grid; place-items: center; background: #fbd000; color: #fff; border: 7px solid #b86c00; box-shadow: inset 0 0 0 5px #ffe66a, 9px 9px 0 #0003; font: 900 70px "Manrope"; animation: float-block 2.4s ease-in-out infinite; }
.mario-title { position: absolute; z-index: 4; left: 8%; bottom: 20%; font: 900 clamp(58px, 9vw, 135px) "Manrope"; letter-spacing: -7px; color: #e52521; text-shadow: 5px 5px 0 #fff, 10px 10px 0 #049cd8; }
.mario-title span { display: block; margin-top: 4px; font-size: clamp(20px, 3vw, 42px); letter-spacing: -2px; color: #fff; text-shadow: 3px 3px 0 #202020; }
@keyframes float-block { 50% { transform: translateY(-14px); } }
@media (max-width: 520px) { .question-block { width: 72px; height: 72px; font-size: 46px; } .mario-title { letter-spacing: -4px; } }