body{
   cursor: url("../assets/cursor/yugicursor.png"), default;
}
button, a, img:hover{
   cursor: url("../assets/cursor/yamiyugicursorGLOW.png"), auto;
}
.bg-video{
   position: absolute;
   z-index: -2;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;
   justify-content: center;
}
.bg-video video{
   height: 100vh;
}
.bg-video::after{
   height: 100vh;
   width: 100vw;
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   background: linear-gradient(
   90deg,
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,0.8) 50%,
   rgba(0,0,0,1) 100%
   );
}

.container{
   position: relative;
   z-index: 1;
   display: flex;
   height: 100vh;
}

.container__left{
   width: 35%;
   min-width: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
}

.container__right {
   width: 65%;
}

.score_box{
   background-color: #fff;
   padding: 30px;
   width: 100%;
}

.frame{
   border: 3px solid #000;
   border-radius: 5px;
}

.card_detail{
   background-color: #fff;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   height: 6rem;
   width: 100%;
}

#card-image{
   height: 250px;
}
#card-name{
   font-size: 0.8rem;
}

#card-type {
   font-size: 1rem;
}

.card-box__container{
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 0.3rem;
}

.card-versus__container{
   display: flex;
   flex-direction: column;
   justify-items: center;
   align-content: center;
   padding-top: 0.1rem;
   height: 300px;
}

.versus-top,
.versus-bottom{
   display: flex;
   align-items: center;
   justify-content: center;
}

.versus-bottom {
   margin-bottom: 1rem;
}

#next-duel{
   display: none;
}

.card-box{
   height: 9rem;
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;

}

.card-infield{
   height: 11.2rem;
   width: 8rem;
   border: 1px solid #fff;
   border-radius: 8px;
}


.card{
transition: transform 0.2s;
}

.card:hover{
   transform: scale(1.2);
}

.debug{
   border: 1px solid red;
}

.hidden{
   visibility: hidden;
}