#slides-display {
    background-color: grey;
    padding: 8px 12px;
    border-radius: 9999px;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 90%;

    width: fit-content;
    height: 30px;

    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.slides-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background-color: white;
}

.selected-dot {
    animation: selected 1s forwards;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

img {
    height: 70vh;
    width: auto;
}

.unselected-dot {
    animation: selected 1s reverse;
}

@keyframes selected {
    from {
        width: 10px;
        height: 10px;
    }
    to {
        width: 14px;
        height: 14px;
    }
}