.evolution .game-wrapper{
    overflow-y:hidden;
}
.evolution .game-container{
    /* hidden해서 아래로 스크롤 되지 않도록 한다. */
    overflow-y : hidden ;
}
.game-content{
    flex: 1;
    width: 100%;
    padding: var(--gap-3);
}
.pokemon-name{
    /* 글자마다 높이가 달라지기 때문에 높이를 고정한다. */
    height: 35px;
    padding-bottom: 5px;
    font-size: var(--fontsize-p);
    font-weight: bold;
    overflow: hidden;
}
.img-wrapper{
    width: 100%;
    height: 100%;
}
.img-container{   
    display: grid;
    gap: var(--img-gap);
    /* grid에서 가운데 정렬한다. */
    place-items: center;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(4, 1fr);
}
.img-content{
    /* 정사각형 모양으로 크기를 정한다. js로 정한다. */
    width: var(--img-size);
    height: var(--img-size);    
    background-size: cover;    
    visibility: hidden;
    opacity: 0;
}
/* show 클래스가 추가되면 보인다. */
.img-content.show{
    visibility: visible;
    opacity: 1;
}
/* 이미지를 추가하면 fill 클래스를 추가한다. */
.img-content.selected{
    border-radius: var(--gap-1);
    box-shadow: 0 0 2px var(--box-shadow-1);
    border: 2px solid var(--site-color-1); 
}
.img-content.answer{  
    border: none;
    box-shadow: none;
    animation: answer var(--answer-delay) forwards ease-in-out;    
}
@keyframes answer { 
    10%{
        transform: scale(1.2);
    }  
    50%{
        transform: scale(0);
    }
    100%{
        transform: scale(0);
    }
}
.img-content.wrong{   
    animation: wrong var(--wrong-delay);
    background-color: var(--wrong-color);
    border-color: var(--wrong-color);
}
@keyframes wrong {
    10%,
    90% {
        transform: translate3d(-1px,0,0);
    }

    20%,
    80% {
        transform: translate3d(2px,0,0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px,0,0);
    }

    40%,
    60% {
        transform: translate3d(4px,0,0);
    }
}
i.delete-btn{
    font-size: calc(var(--img-size) / 3);
    padding: var(--gap-2);
    border-radius: 50%;
    background: var(--site-color-1);
    box-shadow: 0 0 2px var(--box-shadow-1);
}