/*
    Alisson Leiva Salazar
    Created 12/15/18
*/
body{
    margin: 0.5em 0;
    text-align: center;
    background-color: aquamarine;
    background-image: linear-gradient(to left, aquamarine , rgba(255, 255, 102, 0.87))
}
canvas {
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    background-clip: content-box;
    box-shadow: 2px 2px rgb(61, 143, 109);   
}
footer{
    text-align: center;
    position: relative;
    margin-top: 2em;
}

#score-board {
    flex-grow: 1;
    text-align: left;
    padding: 1em;
    margin: 0;
    border-radius: 0;
    background-color: pink;
}
#score-board.lost {
    color: red;
}
#score-board.jackpot {
    color: magenta;
    font-size: 15px;
    text-shadow: 2px 2px rgb(61, 143, 109);
}
#score-board.jackpot:after {
    white-space: pre;
    content: "\aJACKPOT!"
}
#shop {
    display: flex;
    margin: 0.5em 1em;
}
#play-again {
    padding: 1em;
    margin: 0 0 0 0.5em;
    -webkit-appearance: none;
    background-color: pink;
    border: medium dashed palevioletred;
    border-radius: 0;
}
#play-again:disabled {
    opacity: 0.75;
}
.cost {
    color: red;
}

@media only screen and (max-width: 850px) {
    #slots {
        width: 100vw;
        padding: 0;
        margin: 0;   
    }

    canvas {
        width: calc(50vw - 4px);
        max-width: 200px;
        height: calc(50vw - 4px);
        max-height: 200px;
        padding: 1px;
        box-sizing: border-box;
        box-shadow: 2px 2px rgb(61, 143, 109);   
    }
  }