:root {
    --main-bg-color: #D2E5F3;
    --position-x: 0;
    --position-y: 0;
    
    font-size: 100%; /* 1rem = 16px */
}

body {
    font-weight: normal;
    font-style: normal;
    padding: 0;
    margin: 0;
    background-color: var(--main-bg-color);
}
.amoeba {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1 / 1;
    width: 25vw;
    max-width: 25rem;
    min-width: 15rem;
}
.amoeba .body,
.amoeba .body .item,
.amoeba .eye .item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
.amoeba .body {
    width: 100%;
    height: 100%;    
}
.amoeba .body .item,
.amoeba .eye .item {
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
}
.item.current {
    opacity: 1 !important;
    z-index: 50 !important;
}
.item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.amoeba .eye {
    position: absolute;
    z-index: 100;
    opacity: .65;
    aspect-ratio: 1 / 1;
    width: 21%;
    left: var(--position-x);
    top: var(--position-y);
}