index.css

html{
    text-align:center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 30px;
}
body{
    background-image: url(images/istockphoto-1299608766-612x612.jpg);
    background-size: cover;
    margin:0;
    
}
.container{
    margin-top:.33em;
}

h1{
    margin:0;
    color:gold;
    font-size:2rem;
    text-shadow: 2px 2px 5px black;
}
.display{
    color:white;
    font-size:1.2rem;
    text-shadow: 2px 2px 5px black;
    margin:0 auto;
    text-align: center;
}
.buttons-bet{
    margin-top:5%;
}
.buttons, .bet{
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin:0 auto;
    
}
.buttons{
    margin-bottom:.5em;
}
.sumBal{
    
    margin: 0 auto;
    display: flex;
    justify-content:space-evenly;
    
}
#new-card-btn, #restart-game-btn, #stop-btn,
#refill-balance-btn,#bet-all-in, #bet-50, #bet-100, #bet-200{
    margin:0 .5em;
    background-color:aqua;
    border:none;
    border-radius:10px;
    font-family: inherit;
    font-size: .75rem;
    font-weight: bold;
    color:black;
    padding:.6em .8em;
    text-shadow: 1px 1px 0px rgb(10, 10, 10);
    cursor: pointer;
    outline: 0;
    transition: 0.3s linear;
}

#new-card-btn:hover, #restart-game-btn:hover, #stop-btn:hover,
#refill-balance-btn:hover, #bet-all-in:hover, #bet-50:hover, #bet-100:hover, #bet-200:hover{
    background-color:black;
    color:aqua;
    box-shadow:0px 0px 50px rgb(5, 81, 167);
}
#new-card-btn:active, #restart-game-btn:active, #stop-btn:active,
#refill-balance-btn:active, #bet-all-in:active, #bet-50:active, #bet-100:active, #bet-200:active{
    transform:scale(0.5);
}
#refill-balance-btn {
    display:none;
}
#restart-game-btn{
    display:none;
}

#cards{
    display: inline-block;
    height: 4em;
}
/* #img {
    height: 80%;
    
} */
img{
    height: 80%;
    margin: 0 .1em;
    border-radius: 6px;
    animation: cardAnimation 0.25s;
}

#message{
    animation: messageAnimation 0.25s;
}

@keyframes cardAnimation{
    from {
        transform: translateY(-350%);
        opacity: 0;
      }
    
      to {
        transform: translateY(0%);
        opacity: 1;
      }
    }

@keyframes messageAnimation{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}