body, html {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

.strudel {
    margin-left: 9px;
    margin-right: 4px;
}

.banner {
    position: sticky;
    width: 99.4%;
    height: 200px;
    background-image: url('banner.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.3em;
    margin-right: 0.0em;
    margin-top: 2em;
    margin-bottom: 0;
    overflow: hidden;

}

.dude-wrapper {
	position: absolute;
	display: flex;
	align-items: flex-end;
	bottom: 0.1em;
	animation: walking 10s linear infinite;
    overflow: hidden;
}

.girl-wrapper {
	position: absolute;
	display: flex;
	align-items: flex-end;
	bottom: 0.1em;
	animation: walking 12s linear infinite;
}

.dude {
	width: calc(600px / 8);
	height: 132px;
	background-image: url("dude.png");
	animation: dude-motion 1s steps(8) infinite;
}

.girl {
	width: calc(1536px / 6);
	height: 256px;
	background-image: url("girl.png");
	transform: scale(0.5);
	transform-origin: bottom;
	animation: girl-motion 0.7s steps(6) infinite;
}

@keyframes walking {
	from {
		transform: translate(0, 0%);
	}
	to {
		transform: translate(100vw, 0%);
	}
}

@keyframes dude-motion {
	from {
		background-position: 0;
	}
	to {
		background-position: -600px;
	}
}

@keyframes girl-motion {
	from {
		background-position: 0;
	}
	to {
		background-position: -1536px;
	}
}