@font-face { font-family: jedi0; src: url('fonts/Starjedi.ttf'); } 
@font-face { font-family: jedi1; src: url('fonts/SF_Distant_Galaxy_Alternate.ttf'); } 
@font-face { font-family: jedi2; src: url('fonts/SF_Distant_Galaxy_Alternate_Italic.ttf'); } 
@font-face { font-family: jedi3; src: url('fonts/SF_Distant_Galaxy_Outline_Italic.ttf'); } 
@font-face { font-family: jedi4; src: url('fonts/Starjedi.ttf'); } 

/* #game-logo{
    object-fit:cover;
} */
.jedi-zero{
    font-family: jedi0;
    color:yellow;
}

.jedi-one{
    font-family: jedi1;
}

.hidden{
    display: none;
}


#jedi{
    font-family: jedi1;
}

/*PlAYER SLECTION CONTAINER*/

.center{
    text-align: center;

}

.vertical-center {
    position: relative;
    min-height: 100%;  
    min-height: 100vh; 
}    

body{
background-image:url('../images/stars.jpg');
}

.card-text{
    text-align: left;

}

.card-title{
    font-family:jedi1;
}

button{
    font-family:jedi1;
}


.card-img-top {
    width: 100%;
    height: 60vw;
    object-fit: cover;
}


/*BATTLE CONTAINER*/

 #attack-messafe{
    text-align: center;
} 

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    /* body{
        background-color: red;
    } */
    .card-img-top {
        width: 100%;
        height: 50vw;
        object-fit: cover;
    }

    .zoom{
        transition: transform .2s;
    }
    .zoom:hover {
        transform: scale(1.0); /*(150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        /* z-index: 2; */
        border: solid 2px yellow;
      }
 }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    /* body{
        background-color: orange;
    }  */
    .card-img-top {
        width: 100%;
        height: 45vw;
        object-fit: cover;
    }
    .zoom{
        transition: transform .2s;
    }
    .zoom:hover {
         transform: scale(1.0); /*No Zoom*/
        /* z-index: 2; */
        border: solid 2px yellow;
      }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* body{
        background-color: yellow;
    } */
    .card-img-top {
        width: 100%;
        height: 17vw;
        object-fit: cover;
    }
    .zoom{
        transition: transform .2s;
    }
    .zoom:hover {
        transform: scale(1.2); /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        z-index: 2;
        border: solid 2px yellow;
      }
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* body{
        background-color: blue;
    }  */

    .card-img-top {
       /* max-width: 134px;
        max-height:288px; */
        width:90%;
         height: 9vw;
        object-fit: cover; 
    }

    .card{
        max-width:300px;
        max-height:288px;
    }
    .zoom{
        transition: transform .2s;
    }
    .zoom:hover {
        transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        z-index: 2;
        border: solid 2px yellow;
        font-size: 12pt;
      }

      

    
}