*{
    margin: 0px;
    padding: 0px;
}

.a1{
    height: 100vh;
}
video{
    position: fixed;
    z-index: -1;
}
.a12{
    position: fixed;
    z-index: 1000;
}
.main-main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
}
.main{
    /* background-color: rgba(19, 185, 130, 0.384); */
    padding: 10px 5%;
    width: 100%;
    height: 50%;
}
.row{
    height: 100%;
}
/* ------------------ 3 Main Box ------------------- */


.box1{
    flex-basis: 45%;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.box2{
    flex-basis: 20%;
    /* background-color: rgb(55, 0, 255); */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.box3{
    flex-basis: 35%;
    /* background-color: rgb(43, 255, 0); */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}




/* --------------------xo box----------------- */

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 90%;
    width: 90%;
    /* background-color: rgb(0, 195, 255); */
}

.xobox {
    height: 32%;
    width: 30%;
    border-radius: 10px;
    border: none;
    margin-left: 5px;
    margin-top: 0px;
    border: 1px solid #fffefe2a;
    background-color: rgba(0, 0, 0, 0.644);
    /* background-color: blue; */
    background-size: cover;

}

.xobox:hover {
    border: 1px solid #000000;
    background-color: rgba(250, 250, 250, 0.514);
}

#id1,
#id2,
#id3,
#id4,
#id5,
#id6,
#id7,
#id8,
#id9 {
    background-size: cover;
    font-size: 78px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
}


/* -------------------------- Restart btn ---------------------------- */

.restart-center{
    /* background-color: aquamarine; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 50%;
    width: 90%;
}

.restart-btn {
    background-image: url(./mortal-kombat-mk11.gif);
    background-size: cover;
    height: 50%;
    width: 80%;
    color: #ababab;
    border: none;
    border-radius: 10px;

    /* background-image: url(./asset/btn.gif);
    background-size: cover;
    height: 60%;
    width: 50%;
    color: #ababab;
    border: none;
    border-radius: 100%; */
}

.restart-btn a {
    color: rgba(255, 255, 255, 0.603);
    font-size: 30px;
    text-decoration: none;
}


/* -------------------------- Players details --------------------------- */

.win {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: rgba(0, 0, 0, 0.644);
    border-radius: 20px;
    height: 90%;
    width: 70%;
}

.win-img {
    height: 30%;
    width: 35%;
    margin: 5px;
    border-radius: 10px;
}

.play-title {
    color: rgba(255, 255, 255, 0.719);
}

.play-detials {
    color: rgba(255, 255, 255, 0.658);
}

.play-vs {
    color: rgba(255, 255, 255, 0.658);
}

/* ------------------- Responsiveness ------------------------   */

a.last-btn-a{
    text-decoration: none;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bolder;
    color: rgb(255, 255, 255);
}
.last-btn {
    position: absolute;
    opacity: normal;
    height: 100px;
    width: 200px;
    border-radius: 10px;
    top: 75%;
    left: 5%;
    background-image: url(./mortal-kombat-mk11.gif);
    background-size: cover;
}


@media (max-width: 1100px) {
    video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vh; /* Use 100vh to cover the full screen height */
        height: 100vw; /* Use 100vw to cover the full screen width */
        transform: translate(-50%, -50%) rotate(90deg);
        object-fit: cover;
    }
    /* button{ 
        position: absolute;
        z-index: 0;
        top: 50%;
        left: 50%;
        width: 15vh; 
        height: 15vw;
        transform: translate(-50%, -50%) rotate(90deg);
        object-fit: cover;
    } */
    .main{
        position: absolute;
        z-index: 0;
        padding: 10px 10%;
        transform: translate(-50%, -50%) rotate(90deg);
        object-fit: cover;
        top: 50%;
        left: 50%;
        width: 100vh; /* Use 100vh to cover the full screen height */
        height: 100vw; /* Use 100vw to cover the full screen width */
    }
    a.last-btn-a{
        font-size: 15px;
    }
    .last-btn {
        transform: translate(-50%, -50%) rotate(90deg);
        object-fit: cover;
        height: 80px;
        width: 150px;
        border-radius: 10px;
        top: 15%;
        left: 15%;
    }


    .restart-btn {
        height: 30%;
        width: 90%;
    }


    .win {
        height: 80%;
        width: 100%;
    }
    .win-img {
        height: 30%;
        width: 38%;
        margin: 5px;
        border-radius: 10px;
    }
    
    .play-title {
        font-size: 25px;
    }
    
    .play-detials {
        font-size: 22px;
    }
    
    .play-vs {
      font-size: 22px;
    }
    .box {
    height: 70%;
    width: 100%;
}
#id1,
#id2,
#id3,
#id4,
#id5,
#id6,
#id7,
#id8,
#id9 {
    font-size: 58px;
}
    
}