@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-image: url(./Images/WebBack2.png);
    background-repeat: no-repeat;
    background-size: cover;
}

main {
    width: 800px;
    height: 700px;
    border: solid gray 1px;
    border-radius: 5px;
    margin: 50px;
    position: relative;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    background-image: url(./Images/Indy\ backdrop\ Op4.png)
}

.heading {
    margin-top: 15px;
    margin-bottom: -40px;
    margin-left: -20px;
    z-index: 0;
}

.grid {
    width: 452px;
    height: 452px;
    border: solid gray 1px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    margin-left: 50px;
    background-image: url(./Images/Desert.jpg);
    background-size:cover;
    z-index: 0;
}

.winScreen {
    width: 452px;
    height: 452px;
    border: solid gray 1px;
    border-radius: 5px;
    display: none;
    flex-wrap: wrap;
    flex-direction: column;
    margin: auto;
    margin-left: 50px;
    background-image: url(./Images/Desert.jpg);
    background-size:cover;
    z-index: 0;
    text-align: center;
}

.gameOver {
    width: 452px;
    height: 452px;
    border: solid gray 1px;
    border-radius: 5px;
    display: none;
    flex-wrap: wrap;
    flex-direction: column;
    margin: auto;
    margin-left: 50px;
    background-image: url(./Images/Desert.jpg);
    background-size:cover;
    z-index: 0;
    text-align: center;
}

h2 {
    margin-top: 125px;
}

#idol {
    width: 20%;
    height: 20%;
    margin-left: 175px;
}

#skull {
    width: 15%;
    height: 15%;
    margin-left: 190px;
}

#playAgain {
    font-family: 'Press Start 2P', cursive;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 20px 0px 20px 175px;
    background: rgb(255,18,0);
    background: linear-gradient(214deg, rgba(255,18,0,1) 0%, rgba(255,106,0,1) 50%, rgba(255,252,0,1) 100%);
}

#playAgainTwo {
    font-family: 'Press Start 2P', cursive;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 20px 0px 20px 175px;
    background: rgb(255,18,0);
    background: linear-gradient(214deg, rgba(255,18,0,1) 0%, rgba(255,106,0,1) 50%, rgba(255,252,0,1) 100%);
}

.grid div {
    width: 30px;
    height: 30px;
    /* border: lightgray 1px solid; */
    z-index: 0;
}

.heading img {
    width: 450px;
    margin-left: 50px;
}

.instructions {
    position: absolute;
    width: 180px;
    height: 300px;
    top: 140px;
    right: 60px;
    font-size: 12px;
}

.vitals {
    width: 450px;
    margin-left: 50px;
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
}

button {
    font-family: 'Press Start 2P', cursive;
    width: 80px;
    height: 40px;
    margin: 20px 0px 20px 0px;
    background: rgb(255,18,0);
    background: linear-gradient(214deg, rgba(255,18,0,1) 0%, rgba(255,106,0,1) 50%, rgba(255,252,0,1) 100%);
}

.snake {
    background-image: url(./Images/Snake.svg);
    background-size: cover;
}

.indy {
    background-image: url(./Images/Indy.svg);
    background-size: cover;
}

.whip {
    background-image: url(./Images/Whip.svg); 
    background-size: cover;
    opacity: 30%;
}

.whipped {
    background-image: url(./Images/smoke\ gif.gif);
}

.arrow {
    font-size: 22px;
}

.venom {
    background-image: url(./Images/Venom2.png)
}