* {
    font-family: 'Bubblegum Sans', cursive;
}

p {
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:xx-small;
}

footer {
    margin-top: 20px;
    border-top: solid black 1px;
    padding-top: 10px;
    width: 99%;

}

/*div {border: dashed black 1px} /* DEV TOOLS */

.game-space {
    position: fixed;
    min-height: 100%;
    width: 99%;
    min-width: 480px;
    display: inline-block;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.arena {
    min-width: 100%;
    min-height: 40%;
    display: flex;
    justify-content: stretch;
    flex-basis: 1 1 initial;
    box-sizing: border-box;
}

.result {
    max-width: 100%;
    z-index: 1;
    position: relative;
    top: 0%;
    left: 0%;
    font-size: 4em;
    padding: auto;
    display: flex;
    justify-content: center;
    text-transform: uppercase;
}


button {
    font-size: 32px;
    color: white;
    background: linear-gradient(135deg, rgba(34,193,195,1) 55%, rgba(253,187,45,1) 100%);
    padding: 10px 40px;
    border: none;
    border-radius: 10px;
    transition: all ease-in-out 0.2s;
}

button:hover:enabled {transform: scale(1.05);}
button:active:enabled {transform: scale(0.95);}
button:disabled {background: grey;}

.score {
    min-width: 20%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 1 1 initial;
    box-sizing: border-box;
    font-family: 'Bubblegum Sans', cursive;
    font-size: 4em;
}

.controller {
    width: 95%;
    min-height: 30%;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px auto;
}

.hands, .options {
    min-width: 30%;
    min-height: 100%;
    display: flex;
    padding: 0 20px;
    justify-content: center;
    align-items: center;
    flex-basis: 1 1 initial;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 0 10px 0 10px;
}

.options:disabled {
    background: grey;
}




.title {
    min-width: 100%;
    min-height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 1 1 initial;
    box-sizing: border-box;

}

.title-content {
    font-family: 'Bubblegum Sans', cursive;
    font-size: 1.5em;
    margin: 0 auto;
    padding: 0 auto;
    text-align: center;
}


/* ANIMATION STATION */

img {
    width: 250px;
    height: auto;
    flex-basis: 1 1 auto;
}

.options img {
    width: 150px;
    height: auto;
}

img.animated {
    transition: all ease-in 0.01s;
    animation-iteration-count: 1;
}

img.animated#lefthand { animation: RoShamBoLeft 2s; }
img.animated#righthand { animation: RoShamBoRight 2s; }

.winner {
    transition: all ease-in-out;
    animation: winnerShake;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/*.loser {
    transition: all ease-in-out 3s; 
    transform: scale(0.50) translate(0px, -5px);
}*/



@keyframes RoShamBoLeft {
    15%, 45%, 75% { transform: translate(10px, 0) rotate(-40deg); }
    30% { transform: translate(-5px, 0) rotate(10deg) scale(1.1); }
    60% { transform: translate(-5px, 0) rotate(10deg) scale(1.2); }
    90% { transform: translate(-5px, 0) rotate(10deg) scale(1.3); }
    100% { transform: rotate(-90deg) scale(1.5); }
}

@keyframes RoShamBoRight {
    15%, 45%, 75% { transform: translate(10px, 0) rotate(40deg); }
    30% { transform: translate(-5px, 0) rotate(-10deg) scale(1.1); }
    60% { transform: translate(-5px, 0) rotate(-10deg) scale(1.2); }
    90% { transform: translate(-5px, 0) rotate(-10deg) scale(1.3); }
    100% { transform: rotate(90deg) scale(1.5); }
}

@keyframes winnerShake {
    0%, 100% { transform: rotate(-6deg) scale(1.3);} 
    50% { transform: rotate(6deg) scale(1.3); }
}

/* Loser animation simple transfrom in .loser class */