.hidden{
    display: none !important;
}

body{
    background-color: black;
    color: white;
    /* background-image: url(img/16x16_tilemap.png);
    image-rendering: pixelated;
    background-size: cover; */
}

.container{
    display: flex;
    flex-direction: column;
    background-color: rgb(0, 0, 0);
    align-items: center;
}

.middle-section{
    display: flex;
    flex-direction: row;
}

.hive{
    height: 200px;
    width: 250px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
    background: #ffd500;
    background-image: url(img/honeycomb.png);
    background-repeat: no-repeat;
    background-size: 300px;
    text-align: center;
    color: black;
    position: relative;
    padding: 5px;
}

.garden{
    height: 500px;
    width: 500px;
    background-color: green;
    border: 3px solid rgb(99, 50, 19);
    border-radius: 10px;
    margin: 0 10px 10px 10px;
    position: relative;
    padding: 5px;
    background-image: url(img/garden.png);
    image-rendering: pixelated;
}

.garden-collider{
    position: absolute;
    height: 500px;
    width: 500px;
    /* border: 6px solid rgb(184, 15, 15); */
}

.quests{
    height: 150px;
    width: 872px;
    background-color: rgb(155, 218, 255);
    border: 3px solid rgb(25, 113, 161);
    border-radius: 10px;
    margin: 10px;
    padding: 5px;
    display: flex;
    color: black;
    font-family: 'Devin Chavez Font', sans-serif;
}

.inventory-container, .right-container{
    height: 500px;
    width: 150px;
    border-radius: 10px;
    margin: 0 10px 10px 10px;
    padding: 5px;
    font-size: medium;
    text-align: center;
    font-family: 'Devin Chavez Font', sans-serif;
}

.inventory-container{
    background-color: rgb(73, 53, 44);
    border: 3px solid rgb(116, 109, 79);
}

.inventory{
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: flex-start;
    gap: 1px;
}

.itemSlot{
    border: 2px solid rgb(116, 109, 79);
    border-radius: 10px;
    height: 45px;
    width: 45px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.right-container{
    background-color: rgb(255, 176, 176);
    border: 3px solid rgb(255, 104, 104);
    justify-content: space-evenly;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.pinkflower{
    position: absolute;
    height: 32px;
    width: 32px;
    image-rendering: pixelated;
}

.sunflower{
    position: absolute;
    height: 48px;
    width: 48px;
    image-rendering: pixelated;
}

.bee, .frog{
    position: absolute;
    image-rendering: pixelated;
}

.bee{
    height: 32px;
    width: 32px;
    top: 250px;
    left: 250px;
}

.frog{
    height: 48px;
    width: 48px;
}

.heart{
    width: 40px;
    image-rendering: pixelated;
}

.health-container{
    border: 2px solid rgb(255, 104, 104);
    border-radius: 10px;
    align-items: center;
    display: flex;
    justify-content: center;
}

button{
    width: 80px;
    padding: 5px;
    background-color: pink;
    border: 2px solid rgb(255, 104, 104);
    border-radius: 5px;
    cursor: pointer;
    color: white;
    font-family: 'Devin Chavez Font', sans-serif;
}

button:hover{
    background-color: rgba(255, 192, 203, 0.55);
}

.quests img{
    width: 150px;
    image-rendering: pixelated;
    margin: 0 40px 0 0;
}

.death-screen{
    background: rgba(255, 0, 0, 0.572);
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 250px;
    z-index: 100;
    font-size: 50px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s
}

.death-screen button{
    width: 150px;
    margin: 10px;
}

.death-screen.show{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}