@font-face {
    font-family: MainFont;
    src: url(ANDYB.TTF);
}
@keyframes transition {
    0% {width: 0%; height: 0%;}
    30% {width: 100%; height: 100%;}
    60% {width: 100%; height: 100%;}
    100% {width: 0%; height: 0%;}
}
@keyframes startTransition {
    0% {width: 100%; height: 100%;}
    40% {width: 100%; height: 100%;}
    100% {width: 0%; height: 0%;}
}
@keyframes hitAnimation {
    0% {position: absolute; top: 500px;left: 500px;}
    70% {transform: translate();}
    100% {}
}

html, body{height: 100%; margin: 0; user-select: none;}
body{font-family: MainFont; background-image: url(imgs/background/forestD.jpg); background-size: auto;}

/*item inv stuff and coins*/
.inv{ position: fixed; left: 10px; top: 10px;}
.invGui{word-spacing: 15px;}
.invGui a{margin: 0; font-size: 35px; color: whitesmoke; text-decoration: none; cursor: pointer;}
.invGui a:hover {transform: scale(1.25);}

.coins{display: flex;}
.coins img{width: 30px; height: 30px;}
.coins p{font-size: 20px; color: whitesmoke; margin-top: 6px;}

/*items inventory*/
#itemInventory{display: block; overflow: auto; height: 230px;}
.iRow1,.iRow2,.iRow3,.iRow4,.iRow5,.iRow6{display: flex;}
.iSlot{background-color: rgb(67, 70, 157); border: 2px solid rgb(36, 42, 86); width: 50px; height: 50px; border-radius: 10px; margin: 2px; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.iSlot:hover {background-color: rgb(100, 100, 255); border: 2px solid whitesmoke;}
.iSlot img{display: none; margin-right: -20px; margin-left: 10px;}
.iSlot p{display: none; font-size: 20px; margin-top: 30px; margin-left: 10px; width: 50px; align-self: right; color: whitesmoke;}

/*Weamons inventory*/
#weaponInventory{display: none; overflow: auto; height: 230px;}
.wRow1,.wRow2,.wRow3,.wRow4,.wRow5,.wRow4{display: flex;}
.wSlot{background-color: rgb(100, 50, 80); border: 2px solid rgb(60, 31, 49); width: 50px; height: 50px; border-radius: 10px; margin: 2px; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.wSlot:hover {background-color: rgb(130, 80, 180); border: 2px solid whitesmoke;}
.wSlot img{display: none;}
.wSlot p{display: none; position: absolute; font-size: 20px; margin-top: 30px; margin-left: 25px; text-align: left; color: whitesmoke;}

.enemyStuff{position: absolute; top: 150px; right: 500px;}
.enemy{background-color: rgba(0, 0, 0, 0); padding: 50px; padding-top: 0; border: none; cursor: pointer;}

#hpBar{width: auto; background-color: rgba(255, 0, 0, 0.25); height: 40px;margin-left: 50px; margin-right: 50px; border: 6px rgba(255, 0, 0, 0.25) solid;}
#hpBar #hp{width: 100%; background-color: rgba(0, 255, 0, 0.5); height: 40px; border: 6px rgba(0, 255, 0, 0.5) solid; margin: -6px;}
#hpBar .hpNumber{width: 100%; height: 40px; margin-top: -43px; text-align: center; justify-items: center;}
#hpBar .hpNumber p{font-size: 35px; color: black; margin: 0}
 

.transition {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.transition #animation {width: 0%; height: 0%; background-color: #121212; z-index: 10;}
.transition .timeAnimation{animation: transition 3s 1;}
.transition .startAnimation{animation: startTransition 1s 1;}

.crafting {position: fixed; top: 400px;left: 10px;}
.crafting p {font-size: 30px;margin: 5px; color: whitesmoke;}
.craftingSlots {display: flex; gap: 25px;}
.crafting .weapons{display: block; overflow: auto; height: 487px; width: 100px;}
.crafting .weapons .weapon{background-color: rgb(67, 70, 157); border: 2px solid rgb(36, 42, 86); width: 75px; height: 75px; border-radius: 10px; margin: 2px; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.crafting .weapons .weapon img{width: 80px;height: 80px;}
.crafting .weapons .weapon:hover {background-color: rgb(100, 100, 255); border: 2px solid whitesmoke;}
.crafting .weapons .weapon:active {border-color: yellow;}

.crafting #recipe{display: none;}

.crafting #recipe .recipeCost{display: flex;}
.crafting #recipe .recipeCostSlot{background-color: rgb(67, 70, 157); border: 2px solid rgb(36, 42, 86); width: 50px; height: 50px; border-radius: 10px; margin: 2px; display: flex; justify-content: center; align-items: center;}
.crafting #recipe .recipeCostSlot .cost{position: fixed; margin-top: 40px; margin-left: 30px; font-size: 20px;}

.crafting #recipe h2 {font-size: 40px; color: whitesmoke; margin: 5px;}
.crafting #recipe p{font-size: 20px; margin: 0; margin-left: 5px;}
.crafting #recipe .coins{ display: flex; margin: 0; margin-left: -5px; color: whitesmoke; font-size: 20px;}
.crafting #recipe .coins span{margin-top: 5px;}

#gelCost, #woodCost, #goldCost, #starCost{display: none;}

.crafting #recipe button{background-color: rgb(67, 70, 157); border: 2px solid rgb(36, 42, 86); width: 50px; height: 50px; border-radius: 10px; margin: 2px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.crafting #recipe button:hover{background-color: rgb(100, 100, 255); border-color: whitesmoke;}
.crafting #recipe button:active{border-color: yellow;}
.crafting #recipe button img {width: 40px; height: 40px;}





::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {opacity: 0;}
::-webkit-scrollbar-thumb {background: #C5C5C5; opacity: 0.5; border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: #AEAEAE;}