html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-image: url(/static/Image/anhnentextgame.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    margin: 0;
    padding: 0;

}

.BackGroundElement{
    width: 100%;
    height: 100%;position: relative;

}

.TextTroChoi{
    width: 90vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 15vh;
}

.NhanVatGiua{
    width: 100%;
    height: 30vh;
    position: absolute;
    top: 39vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.NenNgoiSao{
    width: 50%;
    
    transform: rotate(-90deg);
}

.contho{
    height:80%;
    position: absolute;
}

.PlayButton{
    width: 40vw;
    position: absolute;
    top: 70vh;
    left: 50%;
    transform: translateX(-50%);
   
}

.NutTextGame{
    width: 100%;
    animation: bounce 0.6s infinite;
    transition: transform 0.4s ease-in-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
/* 
.content {
    width: 100%;
    height: 100%;
    overflow: hidden; 
    position: relative;
} */

.headerContainer{
    width: 100vw;
    transform: translateX(-55%);
    top: 4vh;

}

.headerContainer ul{
    gap: 10px;
}

.headerContainer ul li{
    width: 25%;
    height: 60%;
    border-radius: 10px;
}

.headerContainer ul li a{
    font-size: 0.8em;
}

.headerContainer ul li img{
    top: -10%;
    left: -5%;
}