body {
    margin: 0px;
    padding: 10px 20px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    overflow-y: hidden;
    overflow-y: hidden;

    .hud{
        header{
            display: flex;
            align-items: center;
            justify-content: right;

            .counters{
                display: flex;

                #counter {
                    position: relative;
                    width: 200px;
                    height: 200px;
                }
                #progress, #progressHealth, #progressArmor, #progressHunger, #progressThirst{
                    transition: stroke-dashoffset 0.5s ease-in;
                }
            }
        }

        main{
            text-align: right;

            .money-counters{
                .money{
                    display: flex;
                    align-items: center;
                    justify-content: right;
                    gap: 5px;

                    .money-value h1{
                        font-family: Arial, Helvetica, sans-serif;
                        color: #FFFFFF;
                        font-size: 17px;
                        font-weight: 700;
                    }
                }
            }
        }
    }
    
}