/*Hey Andrew, we used code from the code collection, youtube, in class assignments, help from you and Patrick as well as AI to tackle all the ideas we wanted to add! I've added a links.txt to .dev with the majority of sources. (some for art and audio as well).
I went through and wrote all our own comments to help with understanding each function. This was a really fun and difficult project and we look forward to getting your feedback! */
*{
    margin: 0;
    padding: 0;
}

h1{
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 1000;
  font-style: normal;
  font-size: 500%;
  color: aliceblue;
}

h2{
    font-size: 48px;
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 1000;
    font-style: normal;
}

p{
    font-size: 32px;
    font-family: "Jersey 20", "Sans Serif";
}

.stars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 100vh;
    background-color: rgb(0, 0, 0);

    .instructions{
    background-image: url(../img/Garbage_Tiling.jpg);
    background-color: rgb(255, 0, 0);
    grid-column:1 / SPAN 1 ;
    grid-row:1 / SPAN 4 ;  
    }

    .title {
     background-color: rgba(0, 0, 0, 0.505);
     grid-column:2 / SPAN 2 ;
     grid-row: 1 / SPAN 1 ;  
    }

    #gameboard {
     position: relative;
     background-image: url(../img/Tile_01.jpg);
     grid-column:2 / SPAN 2 ;
     grid-row: 2 / SPAN 2 ;
     margin: 5px;
     border-radius: 10px;
     border: rgb(27, 27, 77) solid 5px;
     padding: 10px;
     gap: 25px;
     /* height: 650px; */
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
    }
    
    .controls {
     background-image: url(../img/Can.png);
     background-size: cover;
     grid-column:2 / SPAN 2 ;
     grid-row: 4 / SPAN 2 ;
    }

    .scoreboard {
     background-image: url(../img/Garbage_Tiling.jpg);
     background-repeat: repeat;
     background-size:cover;
     grid-column:4 / SPAN 1 ;
     grid-row: 1 / SPAN 4 ;  
    }
}

.box{
    display: flex;
     justify-content: center;
     align-items: center;
     margin: 5px;
     border-radius: 10px;
     border: rgb(27, 27, 77) solid 5px;
     padding: 10px;
}

.box-01{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 25px;
    gap: 25px;
    background-color: aliceblue;
    border-radius: 10px;
    border: black solid 5px;
}

.box-04{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
    gap: 25px;
    background-color: aliceblue;
    border: rgb(0, 0, 0) solid 5px;
    border-radius: 10px;
}

.box-05{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 25px;
    gap: 25px;
    background-color: aliceblue;
    border-radius: 10px;
    border: black solid 5px;
}

.item{
    position: absolute;
    width: 47px;
    height: 60px;
    background-image: url(../img/BasicTrashBin.png);
    background-size: cover;
}

.better_item{
    position: absolute;
    width: 47px;
    height: 74px;
    background-image: url(../img/FilledTrashCan.png);
    background-size: cover;
}

.best_item{
    position: absolute;
    width: 47px;
    height: 74px;
    background-image: url(../img/OverflowedTrashCan.png);
    background-size: cover;
}

#character{
    display: none  ;
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url(../img/Raccoon_Front_1.png);
    background-size: cover;
}

.zombie{
    position: absolute;
    width: 60px;
    height: 60px;
   background-image: url(../img/Zombie_Front.png);
   background-size: cover;
}

#gameover{
    font-size: 48px;
    font-family: "Pixelify Sans", sans-serif;
    color: rgb(0, 0, 0);
    gap: 25px;
    padding: 25px;

}
#reset{
    display: none;
    padding: 25px;
    gap: 25px;
    background-color: aliceblue;
    border-radius: 10px;
    font-size: 48px;
    font-family: "Pixelify Sans", sans-serif;
    color: rgb(0, 0, 0);
    border: black solid 5px;
}

#startOverlay{
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: aliceblue;
   border-radius: 6px;
   z-index: 10;

}
#startButton{
    padding: 25px;
    gap: 25px;
    background-color: aliceblue;
    border-radius: 5px;
    font-size: 48px;
    font-family: "Pixelify Sans", sans-serif;
    color: rgb(0, 0, 0);
    border: black solid 5px;
}