/* styling for the header elements */

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* .instructions only displays when canvas z index changes to 1 */
header h1 {
    margin-bottom: .5rem;
}

/* Styling for the main section */

main {
    display: flex;
    justify-content: center;
    position: relative
}

/* z index will switch between 0 and 3. canvas is alwaus at index 1 */
 
.topBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info_screen {
    position: absolute;
    background-color: black;
    display:flex;
    justify-content: center;
    align-items: center;
    border: solid;
    height: 45rem;
    width: 80rem;
    
}
.title {
    z-index: 2;
    background-image: url(https://i.imgur.com/4K3rITe.jpg);
    background-size: cover;
}

.info {
    display: flex;
    flex-direction: column;
    z-index: 0;
    color: white;
    text-align: center;
    font-size: 1.5rem;
    opacity: 0;
   
}

.container {
    border: .15rem solid white;
    display: flex;
    flex-direction: column;
    align-content: center;
}

.movement_info {
  display: flex;
}

/* styling for items inside the info screen */

.game_images {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:30rem;
    padding: 0;
    margin: 0;
}

.game_images img {
    padding: 0 1rem;
    height: 2.5rem;
    width: 2.5rem;
}


.info p {
    padding: 0 2rem;
}

/* styling for DOM screens used ontop of canvas */

.win {
    z-index: 0;
    opacity: 0;
    background-image: url(https://i.imgur.com/mf2RIOj.jpg);
    background-size: cover;  
}

.dead {
    opacity: 0;
    z-index: 0;
    background-image: url(https://i.imgur.com/hpBJ2dm.jpg);
    background-size: cover;    
}

.battle_screen {
    position: absolute;
    opacity: 0;
    z-index: 0;
    background-color: black;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    border: solid;
    height: 45rem;
    width: 80rem;  
    color: white;
    background-image: url(https://i.imgur.com/KrcbJ3h.jpg);
    background-size: cover;  
    background-position-x: 53.5%;
}



.battleText {
    border: solid white;
    text-align: center;
    background-color: rgba(0,0,0, .5);
    font-size: 1.5rem;
}
.battleButtons {
    margin-top: 1rem;
    justify-items: center;
    align-self: center;
 
}


.battleButtons button {
    width: 7rem;
}
/* z index needs to default to 1 otherwise the logic for which screens show up will be messed up*/
.canvas {
    Position: absolute;
    z-index: 1;
    border: solid;
    height: 45rem;
    width: 80rem;
    background-color: black;
}


.play,
.playDead,
.playWin {
    position:absolute;
    height: 2rem;
    width: 10rem;
    font-size: 1rem;
}

.play {
    margin-top: 10rem;
    margin-left: 1rem;
}

.playDead {
    margin-top: 18rem;
    margin-right: 10rem;
}

.playWin {
    margin-top: 3rem;
}

.infoStart,
.difficultySelector {
    height: 2rem;
    width: 10rem;
    font-size: 1rem;
    text-align: center;
}

.infoStart {
    margin: 2rem 1rem;
}

.difficultySelector {
    margin: .5rem 0;
    border: inset;

}

.clock {
    border: inset;
    padding: .25rem 1rem;
    font-size: 1.2rem;
    margin-bottom: 0;
}

.makeround {
    border-radius: 50%;
}