/* Kaaren Corrigan */

body {
    max-width: 100vw;
}

.game-wrapper {
    margin: 5%;
    overflow: hidden;
    border: solid 2px black;
    background-color: #a5d1ee;
    width: 50rem;
    height: 50rem;
    padding: 2rem;
    position: relative; 
 
}

.splash  img{
    background-repeat: no-repeat;
    object-fit: cover;
    margin: 0;
    position: absolute;
    top: 23rem;
    bottom: 0;
    z-index: 0;
}

header {
     display: flex;
     justify-content: space-between;
}

h1 {
    color: #7da3bd;
    background-color: rgb(255, 255, 103);
    width: 12rem;
    padding: 3rem 2rem;
    border-radius: 50%;
    text-align: center;
    margin: -1rem;
}

.buttons {
    display: flex;
     position: relative;
}

.home,
.play-again,
.quit {
    width: 5rem;
    top: -3.5rem;
    right: 4rem;
    background: none;
    border: none;
    display: flex;
}

.quit img,
.play-again img,
.home img{
    width: 100%;
    margin-top: -.5rem;


}

.help {
    margin-top: rem;
}

.cloud {
    position: absolute;
    top: .5rem;
    left: 13rem;
    width: 23rem;
    z-index: 1;
    height: 13rem;
}

.splash-cloud {
    position: absolute;
    top: 2rem;
    left: 14.5rem;
    width: 20rem;
    z-index: 1;
    height: 10rem;
}

.countdown-timers {
    position: static;
    z-index: 100;
    margin-top: 2.5rem;
    margin-left: 3.5rem;
}


.progress-border {
    border: solid 2px black;
    border-radius: 15px;
    position: static;

}

.clock {
    width: 20rem;
    text-align: center;
    font-size: 1.5rem;
    color: #7da3bd;
    font-weight: bold;
    margin-left: 2rem;
}

.progress {
    background-color: green;
    width: 20rem;
    border-radius: 15px;
}

.flips-name-container{
 position: absolute;
 display: flex;
 width: 20rem;
justify-content: space-evenly;
text-align: center;
 margin-left: 1.75rem;
 font-weight: bold;
 color: #7da3bd;
 border-radius: 50%;
 padding: 2rem;
 margin-top: -1.5rem;
 z-index: -2;

}

.hidden {
    display: none;
}

.help .fas{
    color: #cd8383;
    font-size: xx-large;
    background-color: transparent;
    border: none;
    cursor: help;
    margin-top: .5rem;
}

.splash-controls {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-top: 6rem;
     position: absolute;
     z-index: 2;
     left: 17.5rem;
}

.difficulty-buttons .button {
    margin: .5rem 0;
    display: flex;
    width: 15rem;
    justify-content: center;
    border-radius: 2rem;
}

#easy.button {
    background-color: #baf568;

}

#normal.button {
    background-color: #ffd07e;
    z-index: 2;
}

#hard.button {
    background-color: rgb(255, 146, 148);
    z-index: 2;


}

#play-button {
    background-color: transparent;
    border-radius: 0rem 3rem 3rem 0rem;
    padding: .25rem;
    position: absolute;
    
}

#player-name-input {
    width: 15rem;
    height: 2rem;
    text-align: center;
}


.card-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    column-gap: .5rem;
    row-gap: .5rem;
    position: absolute;
    bottom: .5rem;
    justify-content: space-around;
 
    max-width: 100%;
    left: 0;
}   
.grass {
    width: 100%;
    background-color: rgb(20, 79, 4);
    padding: 20rem 50rem;
    position: absolute;
    border-radius: 50%;
    top: 30rem;
    left: -25rem;
}

.card {
    max-width: 15rem;
    max-height: 15rem;
    display: flex;
    align-self: flex-end;
}

.setup-instructions,
.game-instructions {
    position: absolute;
    background: #bc5e52;
    padding: 2rem;
    box-shadow: 0rem 0rem 30rem 30rem rgba(0, 0, 0, 0.749);
    border-radius: 15px;
    right: 7.5rem;
    width: 30rem;
    top: 15rem;
    color: white;
    z-index: 3;
    text-align: center;
}

.exit {
    position: absolute;
    top: -1rem;
    right: -.5rem;
    background: #bc5e52;
    border-radius: 50%;
    padding: 3px 10px 6px 10px ;
    border: solid 2px white;
    color: white;
}

.card {
    background: transparent;
    border: none;
}

.gameover-title{
    color: #7da3bd;
    font-size: 3rem;
    position: absolute;
    top: 6rem;
    left: 16rem;
    z-index: 1;
}

.win {
    color: #7da3bd;
    font-size: 3rem;
    position: absolute;
    top: 6rem;
    left: 18rem;
    z-index: 1;
}

.scoreboard {
    display: grid;
    grid-template-columns: repeat(2, 12rem);
    grid-template-rows: auto;
    margin: 8rem 8rem;
    background-color: #bc5e52;
    color: white;
    border: solid 2px white;
    border-radius: 15px;
    padding: 2rem;
}


.player-gameover,
.time-gameover,
.matches-gameover,
.flips-gameover,
.score-gameover {
    grid-column: 1/2;
}
.scoreboard-title,
hr {
    grid-column: 1/3;
    text-align: center;

}

#player-name-gameover,
#time-remaining,
#matches,
#flips-gameover-number,
#score {
    display: flex;
    justify-content: flex-end;
}