.repeating-image-selector {
    --active-image-index: 0;

    width: 80%;
    height: 500px;
    justify-self: center;

    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;

    position: relative;
}

.repeating-image {
    animation-fill-mode: forwards;
    animation-timing-function: linear;

    user-select: none;
    pointer-events: none;

    border-radius: 10px;
}

.repeating-image.animation {
    transition: all .2s linear;
}

.repeating-image.animation .monster-wrapper {
    transition: all .2s linear;
}

.repeating-center-image {
    height: 100%;
    width: 800px;
    color: black;
}

.repeating-center-image .monster-wrapper {
    mask-size: 800px 500px;
}

.repeating-side-image {
    filter: brightness(60%);

    height: 80%;
    width: 400px;
    color: transparent;

    pointer-events: none;
}
.repeating-side-image .monster-wrapper {
    mask-size: 400px 400px;
}

.repeating-animation-image {
    filter: brightness(60%);
    
    height: 0%;
    width: 0px;

    font-size: 0;
    color: transparent;
}
.repeating-animation-image .monster-title,
.repeating-side-image .monster-title,
.repeating-animation-image .text-div,
.repeating-side-image .text-div {
    transform: scaleX(0);
}

.repeating-center-image .monster-title,
.repeating-center-image .text-div {
    opacity: 1;
    transform: translate(-50%) scaleX(1);
}

.repeating-animation-image.animation .monster-title,
.repeating-side-image.animaton .monster-title,
.repeating-animation-image.animaton .text-div,
.repeating-side-image.animaton .text-div {
    
    transition: all .2s linear;
}


.repeating-animation-image .monster-wrapper {
    mask-size: 0px 0px;
}

.repeating-image-button {
    position: absolute;
    width: 70%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80px, 100px 100px;

    pointer-events: none;
}

.repeating-image-button:active {
    filter: brightness(80%) sepia(50%);
}

.left-button {
    left: -35%;
    background-image: url("../assets/Images/LeftArrow.png"), url("../assets/Images/CutoutTitlebox.png");
}

.right-button {
    right: -35%;
    background-image: url("../assets/Images/RightArrow.png"), url("../assets/Images/CutoutTitlebox.png");
}

.monster-name {
    text-align: center;
    pointer-events: all;

}

.monster-description {
    margin-bottom: 5px;
}

.monster-relationship {
    pointer-events: all;
    font-size: .75em;
    border: 2px solid rgb(167, 152, 134);
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 1.1em;

    background-color: #ffecd13b;
    width: 100%;

    text-align: center;

    z-index: 100;

    padding: 5px;
}

.monster-relationship:hover {
    background-color: #ffecd197;
}