/*
*   Medium res desktop - 1366*768 / 1280*768 / 1280*1024
*/

@media screen and (max-width: 630px), (max-height: 860px) {
    h1 {
        font-size: 2em;
        margin: 8px 0 8px 25px;
    }
    
    .panTitle {
        font-size: 1em;
    }

    .panScore {
        height: 85px;
    }

    .bar {
        line-height: 90px;
    }

    .time,
    .move {
        font-size: 2em;
    }

    #bar {
        font-size: 3em;
    }

    .star {
        font-size: 13px;
    }

    .rating {
        margin-top: 4px;
    }

    .board {
        width: 500px;
        height: 500px;
    }

    .card {
        max-width: 112px;
        max-height: 112px;
    }

    #soundFx {
        display: none;
    }   
}

/*
*   Tablet or Low res desktop - 1280*720
*/

@media screen and (max-width: 530px), (max-height: 725px) {
    .container {
        max-width: 630px;
    }
    .panel {
        padding-bottom: 15px;
    }

    .timer,
    .moves {
        margin-top: 11px;
    }

    .stars {
        word-spacing: 1px;
    }

    .board {
        width: 400px;
        height: 400px;
    }

    .card {
        width: 90px;
        height: 90px;
    } 

    .endContainer {
        margin: 10px;
        padding: 30px 30px;
    }
}

/*
*   Typical Mobile Phones
*/

@media screen and (max-width: 430px), (max-height: 610px)  {
    .container {
        max-width: 530px;
    }
    h1 {
        font-size: 1.4em;
        margin: 8px 0 8px 15px;
    }

    .pan {
        width: 20%;
    }
    
    .time,
    .move {
        font-size: 1.5em;
    }

    .panScore {
        width: 34%;
        height: 75px;
        padding-left: 5px;
    }

    .button {
        width: 52px;
        height: 52px;
    }

    .material-icons.md-36 {
        padding-top: 8px;
    }
  
    .record {
        font-size: 0.85em;
    }

    .stars {
        word-spacing: -1px;
    }

    .star {
        font-size: 12px;
    }

    .bar {
        line-height: 65px;
    }

    #bar {
        width: 4px;
    }
    
    .material-icons.md-24 {
        padding-top: 2px;
    }

    .rating {
        margin-top: 0;
        width: 36px;
        height: 36px;
    }

    ul {
        font-size: 12px;
    }

    .board {
        width: 320px;
        height: 320px;
    }

    .card {
        width: 72px;
        height: 72px;
    }

    /* POP UP */

    .endContainer {
        margin: 10px;
        padding: 20px 20px;
    }

    h4 {
        font-size: 1.1em;
    }

    p {
        font-size: 14px;
    }

    .endMsg {
        justify-content: center;
    }

    button {
        width: 66%;
    }
}

/*
*   Old Mobile Devies
*/

@media screen and (max-width: 355px), (max-height: 500px) {
    body {
        margin: 2px;
    }

    h1 {
        font-size: 1.2em;
        margin: 5px 0 5px 10px;
    }

    .time,
    .move {
        font-size: 1.4em;
    }

    .panel {
        padding-bottom: 10px;
    }

    .panTitle {
        text-transform: none;
    }

    .rating {
        display: none;
    }

    .stars {
        font-size: 1.2em;
        font-weight: 500;
        word-spacing: 4px;
    }

    .board {
        width: 300px;
        height: 300px;
    }

    .endContainer {
        margin: 10px;
        padding: 10px 10px;
    }

    h4 {
        font-size: 1em;
    }

    p {
        font-size: 12px;
    }

    .endMsg {
        justify-content: space-between;
    }

    button {
        width: 45%;
    }

}