body,html{
    font: 16px/1.4 Georgia,serif;
}    

body {
    accent-color: #f59662;
}

@media only screen and (max-width: 500px){
    body,html {
        font-size: 14px;
    }    
}    

.page{
    max-width: 400px;
    padding: 2rem;
    margin: 0 auto;
    text-align: center;
    user-select: none;
}    
h1{
    font: 2rem/1.2 Georgia,serif;
    margin-bottom: 1em;
}    
.gameShuffle{
    pointer-events: none;
    opacity: .8;
    cursor: default;
}    
.gameShuffle .item{
    transition: transform 70ms
}    
.fifteen{
    width: 100%;
    padding-bottom: 100%;
    margin-top: 30px;
    background: #ddc5af;
    margin-bottom: 1.5rem;
    position: relative;
    border-radius: 15px;
}    
.fifteen .item{
    outline: 0;
    position: absolute;
    left: 2%;
    top: 2%;
    width: 24%;
    height: 24%;
    margin: 0;
    padding: 0;
    border: 5px solid #ddc5af; 
    /*border: 2px outset #a38060;*/
    border-radius: 15px;
    background: #f59563;
    color: #f9f6f2;
    font-size: 2rem;
    cursor: pointer;
    box-shadow:  inset -1px 0px 1px 1px #645744;
    transition: transform .2s,filter .5s;
}    
.fifteen .itemVal{
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 84%;
    height: 84%;
    margin: 8%;
    box-shadow: inset 0 0 0 2px #f59563;
    */
    width: 94%;
    height: 94%;
    margin: 3%;
    border-radius: 15px;
    background: #f2b179;
    box-shadow: inset 0 0 0 10px #f59563;
}    
.fifteenWon .item{
    filter: brightness(200%)
}    
  
.button:hover{
    background: #f59662;
}    

.size-wrapper {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 1rem;
}

.size {
    margin-right: -3px;
    margin-left: 5px;
}

.buttons-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.bubble {
    align-items: center;
    border-radius: 3px;
    background: #8f7a66;
    box-shadow: inset 1px 2px 10px 3px #f59662;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    color: #f9f6f2;
    height: 40px;
    line-height: 42px;
    justify-content: center;
    min-width: 25%;
    padding: 0px 10px;
    position: relative;
}

@media only screen and (max-width: 400px){
    .bubble {
        font-size: 0.6rem;
    }
    .fifteen .itemVal {
        font-size: 1rem;
    }
}

.game-container--stats {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.game-params {
    max-width: 40px;
    margin-right: 10px;
}

#win{
    color: #FF0000;
    font-size: 1rem;
    margin-top: -22.5px;
    display: none;
}

.head {
    display: flex;
    justify-content: space-around;
}

.sound-button_mute {
    background: url(../img/mute.png) no-repeat center;
    background-size: contain;
    width: 45px;
    height: 45px;
    border: none;
}

.sound-button {
    width: 45px;
    height: 45px;
    background: url(../img/volume.png) no-repeat center;
    background-size: contain;
    border: none;
}