@import "style.css";
:root {
    --color-eye-container: var(--color-background);
    --color-eyelid: var(--color-accent);
    --color-eye: var(--color-background);
    --color-pupil: var(--color-accent);
    --color-pupil-highlight: var(--color-background);

    --size-globe-width: 60vw;
    --size-globe-width-max: 40rem;

    --size-logo-width: var(--size-globe-width);
    --size-logo-width-max: var(--size-globe-width-max);

    --size-padding: calc(var(--size-globe-width) / 40);
    --size-padding-max: calc(var(--size-globe-width-max) / 40);

    --size-eye-width: calc(var(--size-globe-width) / 2);
    --size-eye-width-max: calc(var(--size-globe-width-max) / 2);

    --size-eye-height: calc(var(--size-eye-width) / 2);
    --size-eye-height-max: calc(var(--size-eye-width-max) / 2);

    --size-eyelid-width: var(--size-eye-width);
    --size-eyelid-width-max: var(--size-eye-width-max);

    --size-eyelid-height: var(--size-eye-height);
    --size-eyelid-height-max: var(--size-eye-height-max);

    --size-eye-container-padding: var(--size-padding);
    --size-eye-container-padding-max: var(--size-padding-max);

    --size-eye-container-width: calc(var(--size-eyelid-width) + var(--size-padding) + var(--size-eye-container-padding));
    --size-eye-container-width-max: calc(var(--size-eyelid-width-max) + var(--size-padding-max) + var(--size-eye-container-padding-max));

    --size-pupil: calc(var(--size-eyelid-width) / 3);
    --size-pupil-max: calc(var(--size-eyelid-width-max) / 3);

    --size-pupil-highlight: calc(var(--size-eyelid-width) / 8);
    --size-pupil-highlight-max: calc(var(--size-eyelid-width-max) / 8);

    --size-pupil-highlight-left: calc(var(--size-pupil-highlight) / 2.5);
    --size-pupil-highlight-left-max: calc(var(--size-pupil-highlight-max) / 2.5);

    --size-pupil-highlight-top: calc(var(--size-pupil-highlight-left) / -3);
    --size-pupil-highlight-top-max: calc(var(--size-pupil-highlight-left-max) / -3);

    --spacing-pupil-top-default: 2%;
    --spacing-pupil-top-blink-default: calc(var(--spacing-pupil-top-default) * 3);
    --spacing-pupil-top-shifted: calc(var(--size-eye-height) - var(--size-pupil) - var(--spacing-pupil-top-blink-default));
    --spacing-pupil-top-shifted-max: calc(var(--size-eye-height-max) - var(--size-pupil-max) - var(--spacing-pupil-top-blink-default));

    --spacing-pupil-top-shifted-blink: calc(var(--size-eye-height) - var(--size-pupil) - var(--spacing-pupil-top-default));
    --spacing-pupil-top-shifted-blink-max: calc(var(--size-eye-height-max) - var(--size-pupil-max) - var(--spacing-pupil-top-default));

    --spacing-pupil-left-shift: 20%;
    --spacing-pupil-left-default: calc((var(--size-eye-width) - var(--size-pupil)) / 2);
    --spacing-pupil-left-default-max: calc((var(--size-eye-width-max) - var(--size-pupil-max)) / 2);

    --spacing-pupil-left-shift-right: calc(var(--spacing-pupil-left-default) + var(--spacing-pupil-left-shift));
    --spacing-pupil-left-shift-right-max: calc(var(--spacing-pupil-left-default-max) + var(--spacing-pupil-left-shift));

    --spacing-pupil-left-shift-left: calc(var(--spacing-pupil-left-default) - var(--spacing-pupil-left-shift));
    --spacing-pupil-left-shift-left-max: calc(var(--spacing-pupil-left-default-max) - var(--spacing-pupil-left-shift));
}




.logo-container {
    position: relative;
    width: var(--size-logo-width);
    max-width: var(--size-logo-width-max);
    line-height: 0;
    margin: auto;
}

.eye-container {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    background-color: var(--color-eye-container);
    width: var(--size-eye-container-width);
    max-width: var(--size-eye-container-width-max);
    padding: var(--size-eye-container-padding);
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

.globe {
    display: block;
    width: var(--size-globe-width);
    max-width: var(--size-globe-width-max);
    height: auto;
}

.eyelid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.15s ease-in;
    background-color: var(--color-eyelid);
    margin: 0;
    width: var(--size-eyelid-width);
    max-width: var(--size-eyelid-width-max);
    height: var(--size-eyelid-height);
    max-height: var(--size-eyelid-height-max);
    padding: var(--size-padding);
    border-radius: 50%;
    .eye {
        text-align: center;
        display: flex;
        background-color: var(--color-eye);
        border-radius: 50%;
        -webkit-animation-name: blink;
        -webkit-animation-duration: 15s;
        -webkit-animation-iteration-count: infinite;
        -webkit-transform-origin: 50%;
        animation-play-state: running;
    }

    &:hover {
        cursor: help;
    }
}

.eye {
    text-align: center;
    display: flex;
    width: var(--size-eye-width);
    max-width: var(--size-eye-width-max);
    height: var(--size-eye-height);
    max-height: var(--size-eye-height-max);
}

.pupil {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    width: var(--size-pupil);
    max-width: var(--size-pupil-max);
    height: var(--size-pupil);
    max-height: var(--size-pupil-max);
    background-color: var(--color-pupil);
    z-index: 8976;
    margin: auto;
    &:after {
        position: absolute;
        top: var(--size-pupil-highlight-top);
        left: var(--size-pupil-highlight-left);
        width: var(--size-pupil-highlight);
        max-width: var(--size-pupil-highlight-max);
        height: var(--size-pupil-highlight);
        max-height: var(--size-pupil-highlight-max);
        background: var(--color-pupil-highlight);
        border-radius: 50%;
        content: " ";
    }

    -webkit-animation-name: eyeball;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 30%;
    animation-play-state: running;
}

@keyframes blink {
    0% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    10% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    10.5% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
    }
    11% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    40% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    40.5% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
    }
    41% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    70% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    70.5% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
    }
    71% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    100% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
}

@keyframes eyeball {
    0% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-default);
        margin-top: var(--spacing-pupil-top-default);
    }
    10% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-default);
        margin-top: var(--spacing-pupil-top-default);
    }
    10.5% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
        margin-left: var(--spacing-pupil-left-default);
        margin-top: var(--spacing-pupil-top-blink-default);
    }
    11% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-default);
        margin-top: var(--spacing-pupil-top-default);
    }
    40% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-default);
        margin-top: var(--spacing-pupil-top-default);
    }
    40.5% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
        margin-left: var(--spacing-pupil-left-shift-right);
        margin-top: var(--spacing-pupil-top-shifted-blink);
    }
    41% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-shift-right);
        margin-top: var(--spacing-pupil-top-shifted);
    }
    70% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-shift-right);
        margin-top: var(--spacing-pupil-top-shifted);
    }
    70.5% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
        margin-left: var(--spacing-pupil-left-shift-left);
        margin-top: var(--spacing-pupil-top-shifted-blink);
    }
    71% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-shift-left);
        margin-top: var(--spacing-pupil-top-shifted);
    }
    100% {
        -webkit-transform: scaleX(1) scaleY(1);
        margin-left: var(--spacing-pupil-left-shift-left);
        margin-top: var(--spacing-pupil-top-shifted);
    }
}