html,
        body
{
	width: 100%;
	height: 100%;
	margin: 0;
}

body
{
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient( circle at center, rgba(12, 34, 139, 0.55) 0%, rgba(2, 12, 96, 0.25) 42%, rgba(1, 7, 72, 0) 72% ), linear-gradient( 145deg, #030f72 0%, #020c62 48%, #010750 100% );
}

.image-container
{
	position: relative;
	width: 414px;
	max-width: 80vmin;
	animation: floating 6s ease-in-out infinite;
}

.image-container::before
{
	position: absolute;
	z-index: 0;
	content: "";
	inset: 18%;
	border-radius: 50%;
	background: radial-gradient( circle, rgba(0, 174, 255, 0.25) 0%, rgba(89, 35, 255, 0.16) 45%, rgba(0, 0, 0, 0) 75% );
	filter: blur(32px);
	transform: translateY(24px) scale(1.25);
}

.aeye
{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: radial-gradient( circle at center, #000 0%, #000 52%, rgba(0, 0, 0, 0.9) 57%, transparent 78% );
	mask-image: radial-gradient( circle at center, #000 0%, #000 52%, rgba(0, 0, 0, 0.9) 57%, transparent 78% );
	filter: drop-shadow( 0 28px 30px rgba(0, 0, 0, 0.35) );
}

@keyframes floating {
            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-12px);
            }
        }

@media (prefers-reduced-motion: reduce)
{
	.image-container { animation: none; }
}