/*=========================================================
---------------------- MOBILE STYLES ----------------------
=========================================================*/

/* GENERAL */
* {
    font-family: Arial, Helvetica, sans-serif;
}

body {
        background-color: teal;
        width: 100%;
        height: 100%;
        min-width: fit-content;
        min-height: 800px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: inset 0px 0px 100px darkslategrey, 
                    inset 0px 0px 30px black;
        margin: 0 auto;
}

/* HEADING */
header {
    background-color: black;
    box-shadow: 0 0 10px black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 50px;
    margin: 5% 2%;
}


/* DRAW CARD AREA */
.drawDisplay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px solid grey;
    padding: 5%;
    margin: 5% 2%;
    background-color: rgba(245, 245, 245, 85%);
}


/* CARD DISPLAY AREA */

.cardDisplay{
    display: flex;
} 

.player, 
.computer {
    display: flex;
    flex-direction: column;
    border: 2px solid grey;
    padding: 0px 10px 0px 10px;
    margin: 5% 2%;
    flex: 1 1 calc(50% - 10px);
    background-color: rgba(245, 245, 245, 85%);
}

.player {
    justify-content: flex-end;
}

#ph3, 
#ch3 {
    justify-self: first baseline;
}

p {
    display: flex;
    align-items: baseline;
}

#p_hand, 
#c_hand {
    min-width: 50px;
    min-height: 100px;
    /* padding: 30px calc(5px - 50%); */
    margin: 0 25% 10%;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border: 4px solid goldenrod;
    background-color: white;
    box-shadow: 7px 5px 10px black, 
                -7px 5px 10px rgb(88, 87, 87), 
                inset 0px 0px 20px gray;
}

/* GAME RESULTS AREA */
.results {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.winnerDisplay {
    padding: 10px 10%;
    justify-content: center;
    align-items: center;
    border: 1px solid lightgrey;
    box-shadow: 0 0 15px grey;
    margin: 5% 2%;
    width: 70%;
    display: flex;
    background-color: rgba(245, 245, 245, 85%);
}

.winnerDisplay.you-win {
    box-shadow: 0px 0px 30px 10px gold;
    font-size: 2rem;
    animation: glow 10s ease-in-out infinite;
}

.player.you-win,
.computer.you-win {
    box-shadow: 0px 0px 30px 10px yellow;
}

@keyframes glow {
    0% {
        box-shadow: 0px 0px 30px 10px yellow;
    }
    50% {
        box-shadow: 0px 0px 50px 40px goldenrod;
        transform-: scale(1.05);
    }
    100% {
        box-shadow: 0px 0px 60px 50px darkgoldenrod;
        transform: scale(1.10);
    }
}


/* BUTTONS */

.button {
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5%;
    font-size: 1.5em;
}

/*=========================================================
---------------------- MEDIA QUERIES ----------------------
=========================================================*/

@media (min-width: 475px) {
    .drawDisplay {
        padding: 2%;
        margin: 3% 2%;
    }
    .player,
    .computer {
        min-height: 300px;
        margin: 3% 2%;
        justify-content: center;
        align-items: center;
    }

    #p_hand, #c_hand {
        width: 150px;
        height: 250px;
        align-items: center;
        font-size: 4rem;
    }
}

@media (min-width: 1200px) {
    body {
        justify-content: start;
    }
    header {
        grid-area: head;
        margin: 10px;
        position: fixed;
        height: 103px;
    }
    main{
        display: block;
    }
    .drawDisplay {
        grid-area: draw;
        margin: 10px;
    }
    .cardDisplay {
        grid-area: card;
    }
    .results {
        grid-area: rslt;
    }
    .winnerDisplay{
        min-height: 300px;
        font-size: 2rem;
    }
    
    main{
        display: grid;
        grid-template-rows: auto ;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas: 
          
            "draw draw draw draw draw draw"
            ". . . . . . "
            "card card card card rslt rslt"
            "card card card card rslt rslt"
            ". . . . . ."
    }
}