* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Press Start 2P", system-ui;
    font-size: 1rem;
    font-style: normal;
    background-color: #F8FBFC;
    color: #5941a9;
}

label{
    padding: 20px 0;
}

/* First IDs */

#title{
    font-size: 2rem;
    text-align: center;
    padding-bottom: 10px;
}

#main-game{
    display: flex;
    align-items: center;
    justify-content: center;
}

#screen{
    font-size: 1.3rem;
    flex-grow: 1;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    height: 70%;
    overflow-x: hidden;
    overflow-y: scroll;
}

#name-field, #item-field{
    font-family: "Press Start 2P",system-ui;
    font-size: 1.5rem;
    background-color: #bec4c5;
}

#backpack-open{
    display: flex;
    flex-direction: column;
}

#itemLoop{
    order: 3;
    padding: 10px 0;
}

#backpackMessage{
    order: 2;
    padding: 10px 0;
}

#itemInHand{
    order: 1;
    padding: 10px 0;
}

#stats-show{
    display: flex;
    justify-content: space-around;
}

#UI{
    padding-top: 25px;
    display: flex;
    justify-content: space-around;
    position:fixed;
    width:100%;
    bottom:0px;
}

#name-form{
    padding-top: 20px;
    }
/* Second Classes */

.tempMessage{
    margin-bottom: 10px;
}

.stat, .weapon{
    text-decoration: underline;
}

.notifyEnemy{
    padding-bottom: 5px;
}

.notify{
    padding: 10px 0;
}

.notifyReward{
    padding: 10px 0;
    color: #42317D;
    background-color: #E8F985;
}

.button{
    border-radius: 15%;
    color: #230903;
    background-color: #d8e8eb;
    margin-right: 5px;
    padding: 5px;    
    font-family: "Press Start 2P", system-ui;
    font-size: 1.5rem;
}

.hidden{
    display: none;
}

.pop-up{
    font-family: "Press Start 2P", system-ui;
    font-size: 1rem;
    font-style: normal;
    color: #ADA0D9;
}

.criticalError {
    background-color: #121111;
    color: #FF7070;
}

@media screen and (max-width: 600px) {
    body{
        height: 100vh;
    }
    #title{
    font-size: 1.5rem;
    padding-bottom: 5px;
    }
    #screen{
    font-size: 1rem;
    height: 100%;
    }
    #name-form{
    padding-top: 25px;
    }
    #main-game{
    align-items: normal;
    justify-content: stretch;
    height: 100%;
    }
    #stats-show{
    justify-content: stretch;
    flex-direction: column;
    }
    #UI{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .button{
    font-size: 1rem;
    border-radius: 5%;
    }
}