body {
	width: 100vw;
	height: 100vh;
	background-color: black;
	color: white;
}

.layout-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.gestalt-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.dot-section {
	position: relative;
	display: flex;
	width: 25%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.dot-section img {
	position: absolute;
	width: 70%;
	visibility: hidden;
	animation: gestalt 10s infinite;
}

footer {	
	padding-bottom: 1rem;
	overflow: hidden;
	white-space: nowrap;
}

.footer-text {
	padding-right: 0.8rem;
	display: inline-block;
	font-size: 3rem;
	font-weight: 600;
    animation: move-text 5s linear infinite;
}

img:nth-child(1) { animation-delay: 0s }
img:nth-child(2) { animation-delay: 1s }
img:nth-child(3) { animation-delay: 2s }
img:nth-child(4) { animation-delay: 3s }
img:nth-child(5) { animation-delay: 4s }
img:nth-child(6) { animation-delay: 5s }
img:nth-child(7) { animation-delay: 6s }
img:nth-child(8) { animation-delay: 7s }
img:nth-child(9) { animation-delay: 8s }
img:nth-child(10) { animation-delay: 9s }


@keyframes gestalt {
	0% { visibility: visible; }
	9.9% { visibility: visible; }
	10% { visibility: hidden; }
	100% { visibility: hidden; }
}

@keyframes move-text {
	from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}