.index {
    width: 100%;
    margin-top: var(--header-height);
    /* 화면이 꽉 차도록 높이를 정한다.  */
    height: calc(100% - var(--header-height));
    display: flex;
}

.center {
    /* 퀴즈 메뉴의 기준이다. */
    position: relative;
    /* 위와 양쪽에 공간을 주기 위해서 padding을 준다.*/
    padding: var(--padding-main) var(--padding-main) 0;

}

.img-wrapper {
    /* 이미지가 올라가는데 .img-wrapper가 기준이 된다.*/
    position: relative;   
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.img-wrapper .img-container {
    /* 위치를 절대값으로 정한다. */
    position: absolute;
    /* 너비의 반을 차지하게 한다. */
    width: 50%;
    overflow: hidden;
    /* will-change를 선언해서 조금더 부드럽게 움직이게 한다.*/
    will-change: transform;
}

.img-wrapper .img-container:nth-child(1) {
    /* 첫번째는 왼쪽 반을 차지하게 한다. */
    top: 0;
    left: 0;
    animation: scroll 25s linear infinite;
}

.img-wrapper .img-container:nth-child(2) {
    /* 두번째는 조금 아래서 부터 시작한다. */
    top: -100px;
    /* 두번째는 오른쪽 반을 차지하게 한다. */
    left: 50%;
    animation: scroll 25s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    /* --img-box-height는 js로 정한다. */
    /* 가로와 세로를 같게 한다. */
    /* --img-box-height의 6개 만큼만 움직이게 한다. */   
    /* 사진을 6개 준비하고 복사를 한다. 사진은 총 12개다.  */
    /* 이 부분이 사진 올리기 할 때 중요한 부분이다. */
    100% {
        transform: translate3d(0, calc((var(--img-box-height) * -6)), 0);
    }
}

.img-container .img-box {
    width: 100%;
    /* 높이를 정한다. */
    height: var(--img-box-height);
}

/* 사진이 들어가는 부분이다. */
.img-box .img-hover {
    border-radius: 3%;
    /* 약간의 공간을 두기 위해서 95%로 정한다. */
    width: 95%;
    height: 95%;
    /* 가운데 정렬한다. */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    /* 그림자를 둔다. */
    box-shadow: 2px 2px 5px var(--box-shadow-2);
    /* 스케일이 변하지 않도록 한다. */
    /* transform: scale(1); */
    /* 커질 때 자연스러운 효과를 주기 위해서 설정한다.*/
    /* transition: transform 0.1s ease-in-out; */
}

/* light로 색깔을 정한다. */
/* basic은 색깔이 너무 쎄다. */
.img-hover.normal {
    background-color: var(--color-normal-light);
}

.img-hover.fire {
    background-color: var(--color-fire-light);
}

.img-hover.water {
    background-color: var(--color-water-light);
}

.img-hover.electric {
    background-color: var(--color-electric-light);
}

.img-hover.grass {
    background-color: var(--color-grass-light);
}

.img-hover.ice {
    background-color: var(--color-ice-light);
}

.img-hover.fighting {
    background-color: var(--color-fighting-light);
}

.img-hover.poison {
    background-color: var(--color-poison-light);
}

.img-hover.ground {
    background-color: var(--color-ground-light);
}

.img-hover.flying {
    background-color: var(--color-flying-light);
}

.img-hover.dark {
    background-color: var(--color-dark-light);
}

.img-hover.bug {
    background-color: var(--color-bug-light);
}

.img-hover.rock {
    background-color: var(--color-rock-light);
}

.img-hover.psychic {
    background-color: var(--color-psychic-light);
}

.img-hover.dragon {
    background-color: var(--color-dragon-light);
}

.img-hover.ghost {
    background-color: var(--color-ghost-light);
}

.img-hover.steel {
    background-color: var(--color-steel-light);
}

.img-hover.fairy {
    background-color: var(--color-fairy-light);
}


/* 사진이다. */
.img-hover img {
    position: relative;
    /* 꽉 차도록 한다. */
    display: block;
    width: 70%;
    height: 70%;
    /* 꽉 차도록 한다. */
    object-fit: contain;
    object-position: center;
    /* 커질 때 자연스러운 효과를 주기 위해서 설정한다.*/
    /* transition: transform 0.2s linear; */
}

/*
.img-hover img::after {
    display: block;
    position: absolute;
    content: "";
    background-color: yellow;
    width: 100%;
    height: 100%;
    z-index: 10;
}
*/

.appmenu-wrapper {
    /* 화면에 가운데 있도록 한다. */
    /* .center가 기준이다. */
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 3px var(--box-shadow-1);
}

.appmenu-container {
    /* flex-center-col */
    width: 80%;
    max-width: 420px;
    /* 모바일에서 height를 크게 한다. */
    height: 50%;
    max-height: 550px;
    /* 모바일에서 padding을 작게 한다. */
    padding: var(--gap-3);
    /* 하얀색 */
    background-color: #ffffff;
    border-radius: var(--gap-3);
    box-shadow: 0 0 5px var(--box-shadow-1);
    /* 컨텐츠 내용이 많으면 스크롤 할 수 있도록 한다.  */
    overflow-y: scroll;
    /* 스크롤바 보이지 않게 하기 */
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
}
.appmenu-container::-webkit-scrollbar{
    /* Chrome, Safari, Opera*/
    display: none;    
}

.appmenu-content {
    /* flex-center-col */
    width: 100%;
    flex: 1;
    gap: var(--gap-2);
}
.info{
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.grade-container{
    display: flex;
}

.first ul {
    margin-left: var(--gap-3);
    padding-right: var(--gap-3);
}

.first ul li {
    list-style: circle;
    margin-bottom: var(--gap-1);
    font-size: var(--fontsize-h4);
    font-weight: bold;
}
.grade-icon{
    /* mobile에서는 작게 한다. */
    /* 랭킹 문제가 여러 개이기 때문에 크기를 작게 한다. */
    width: 70px;
    height: 70px;
    animation: heartbeat 1s infinite;
}
.game-name{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: var(--fontsize-h3);
    font-weight: bold;
}
@keyframes heartbeat {
    50% {
        transform: scale(1.1);
    }
}

/* 시작버튼이다. */
.start {
    flex: 1;
    width: 80%;
    /* mobile에서는 작게 한다.*/
    margin-bottom: var(--gap-3);
    max-width: 160px; 
    height: 80px;  
    max-height: 80px;
    font-size: var(--fontsize-h3);
    font-weight: bold;
    color: #000000;
    border-radius: var(--gap-3);
    border: 3px solid var(--site-color-1);
    box-shadow: 0 0 2px var(--box-shadow-1);    
}

.start a {
    width: 100%;
    height: 100%;
    font-weight: bold;
}

/* 모바일 화면이다. */
@media screen and (max-width: 890px) {   
    .appmenu-wrapper {
        box-shadow: none;
    }
    .appmenu-container {
        height: 60%;
        /* 모바일에서 padding을 작게 한다. */
        padding: var(--gap-2);
    }
    .grade-icon{
        /* mobile에서는 작게 한다. */
        /* 랭킹 문제가 여러 개이기 때문에 크기를 작게 한다. */
        width: 50px;
        height: 50px;       
    }
    .game-name{
        font-size: var(--fontsize-h4);
    }
    .start {       
        /* mobile에서는 작게 한다.*/
        margin-bottom: var(--gap-1);
    }
}