body{
    background-color: black;
}

h1{
 color: black;
}

@font-face {
    font-family: 'Press Start 2P';
    src: url('./fonts/PressStart2P-Regular.ttf') format('truetype');
}

#container {
    text-align: center;
    margin: 0 auto;
    max-width: 1024px;
}

#gameWrapper {
    position: relative;
    width: 1024px;
    margin: 0 auto;  
}

#titleCard{
   image-rendering: pixelated;
    width: 920px;
}

.ImgButtons{
    image-rendering: pixelated;
    
    width: 220px;
    height: 90px;
    
}

#rules{
    margin-bottom: 8em;
   image-rendering: pixelated;
   max-width: 500px; 
}


#controlDescription {
    color: white;
    display: flex;
    font-family: 'Press Start 2P', cursive;
}

#carrotControl {
    color: darkgreen;
    padding-right: 2em;
}

#broccoliControl {
    color: orangered;
    padding-left: 2em;
}

#healthBarContainer {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 1024px;
    top: 0;
    left: 0;
}

#winner {
    image-rendering: pixelated;
    width: 400px;
    height: 200px;
}

#background1 {
   text-align: center;
    background-color: darkred;
    height: 30px;
    width: 350px;
    display: none;
    border-radius: 10px;
   
}

#player1Health  {
    width: 350px;
    height: 30px;
    display: none;
    
}

#background2 {
    background-color: darkred;
    height: 30px;
    width: 350px;
    display: none;
    border-radius: 10px;
    
}

#player2Health {
    
    height: 30px;
    width: 350px;
    display: none;
    
}

#startScreen {
    text-align: center;
   position: absolute;
    width: 1024px;
    height: 576px;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

h2 {
    color: white;
    font-size: 48px;
    margin-bottom: 40px;
}

#startButton {
    
    padding: 15px 40px;
    font-size: 24px;
    margin: 10px;
    cursor: pointer;
    background-color: black;
    color: white;
    border: none;
    
}

#controlsButton {
    padding: 15px 40px;
    font-size: 24px;
    margin: 10px;
    cursor: pointer;
    background-color: black;
    color: white;
    border: none;
    border-radius: 50px;
}

#rulesButton {
    padding: 15px 40px;
    font-size: 24px;
    margin: 10px;
    cursor: pointer;
    background-color: black;
    color: white;
    border: none;
    border-radius: 50px;
}

#rulesScreen{
    color: white;
    position: absolute;
    width: 1024px;
    height: 576px;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    display: none;
}

#controlsScreen {
    image-rendering: pixelated;
    position: absolute;
    width: 1024px;
    height: 576px;
    background-image: url('./images/Rules.gif');
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    display: none;
}

#backButton {
    position: absolute;
    
    font-size: 24px;
    
    cursor: pointer;
    background-color: black;
    border: none;
    
    display: none;
    z-index: 25;  
    bottom: 1px; 
    left: 50%;  
    transform: translateX(-50%); 
}

#carrotControl {
    color: darkgreen;
}

#broccoliControl {
    color: orangered;
}

#gameOver1 {
    position: absolute;
    width: 1024px;
    height: 576px;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    display: none;
}

#gameOverBackButton1 {
    padding: 15px 40px;
    font-size: 24px;
    margin-top: 20px;
    cursor: pointer;
    background-color: black;
    color: white;
    border: none;
    border-radius: 50px;
}

#gameOverBackButton2 {
    
    padding: 15px 40px;
    font-size: 24px;
    margin-top: 20px;
    cursor: pointer;
    background-color: black;
    color: white;
    border: none;
    border-radius: 50px;
}

#gameOver2 {
    position: absolute;
    
    width: 1024px;
    height: 576px;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    display: none;
}

#GameArea {
   
    width: 1024px;
    height: 576px;
    background: url('./images/backgroundWIP.png');
    
}