* {
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: #222;
}

.eye-holder {
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: -.36px;
    color: #00194e;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    width: 10em;
    height: 10em;
    position: absolute;
    top: 30%;
    left: 50%;
}




.eye {
    line-height: 1.8;
font-weight: 400;
letter-spacing: -.36px;
color: #00194e;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: 16px;
margin: 1em 40px;
margin-bottom: 2.5rem;
display: inline-block;
width: 100%;
height: 100%;
border-radius: 100%;
position: relative;
background: radial-gradient(circle at 50% 40%,#fcfcfc,#efeff1 66%,#9b5050 100%);
}

.eye::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    border-radius: 100%;
    background: radial-gradient(circle at top,white,rgba(255,255,255,0) 58%);
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index: 2;
}

.shadow {
    line-height: 1.8;
    font-family: avenirnextltw01-regular,Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: -.36px;
    color: #00194e;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,rgba(0,0,0,0.4),rgba(0,0,0,0.1) 40%,rgba(0,0,0,0) 50%);
    transform: rotateX(90deg) translateZ(-160px);
    z-index: 1;
}

.iris {
    line-height: 1.8;
font-family: avenirnextltw01-regular,Helvetica,Arial,sans-serif;
font-weight: 400;
letter-spacing: -.36px;
color: #00194e;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: 16px;
width: 40%;
height: 40%;
margin: 30%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,#208ab4 0%,#6fbfff 30%,#4381b2 100%);
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
animation: move-eye-skew 5s ease-out infinite, iris-color 120s ease-in-out infinite alternate;
}

.iris2 {
    animation: move-eye-skew2 5s ease-out infinite;
}


.iris::before {
    content: "";
    display: block;
    position: absolute;
    width: 37.5%;
    height: 37.5%;
    border-radius: 50%;
    top: 31.25%;
    left: 31.25%;
    background: #000; 
}


.iris::after {
    content: "";
    display: block;
    position: absolute;
    width: 31.25%;
    height: 31.25%;
    border-radius: 50%;
    top: 18.75%;
    left: 18.75%;
    background: rgba(255,255,255,.2) url('jupiter.gif');
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center center;
    animation: move-iris 90s 5s ease-out infinite alternate;
    opacity: 0.1;
}


.eye-scale {
    animation: move-eye-scale 80s 5s ease-in infinite alternate;
    z-index:95;
    /*width: 800em;
    height: 800em;
    transform: translate(-402em, -380em);*/
}

.iris::after {

    /*top: 34%;
    left: 34%;*/
}

.eye-holder2 {
    width: 10em;
    height: 10em;
    top: 30%;
    left: 30%;
    z-index: 90;
}

@keyframes move-eye-scale
{
    0% {
        width: 10em;
        height: 10em;
    }
    75% {
        width: 800em;
        height: 800em;
        transform: translate(-402em, -380em);
    }
    100% {
        width: 800em;
        height: 800em;
        transform: translate(-402em, -380em);
    }
}

@keyframes move-iris
{
    0% {
        top: 34%;
        left: 34%;
        opacity: 0;
    }
    60% {
        top: 34%;
        left: 34%;
        opacity: 0.2;
    }
    100% {
        top: 34%;
        left: 34%;
        opacity: 0.6;
    }
}

@keyframes iris-color
{
    0% {
        background: #4381b2;
    }
    60% {
    }
    100% {
        background: #000;
    }
}


@keyframes move-eye-skew
{
    0% {
        transform: none;
    }
    20% {
        transform: translateX(-1em) scale(.98);
    }
    40% {
        transform: none;
    }
    60% {
        transform: translateX(1.25em) scaleX(.98);
    }
    80%, 100% {
        transform: none;
    }
}


@keyframes move-eye-skew2
{
    0% {
        transform: none;
    }
    30% {
        transform: translateX(-2em) translateY(1em) skewX(15deg) skewY(-10deg) scale(.95);
    }
    45%, 60% {
        transform: none;
    }
    70% {
        transform: translateX(2em) translateY(-2em) skewX(5deg) skewY(2deg) scaleX(.95);
    }
    80%, 100% {
        transform: none;
    }
}