body {
            display: flex;
            justify-content: space-between;
            font-family: Arial, sans-serif;
            margin: 0;
   
            background-color: #f0f0f0;
        }
        .side {
            display: flex;
            flex-direction: column;
             margin-top: 10px;
        }
        .player {
            display: flex;
            gap: 5px;
            background-color: rgba(17, 17, 17, 0.267);
            margin: 3px;
   
        }
        .player div {
            width: 50px;
            height: 50px;
            background-size: 140%;
            background-position: center;
            scale: 0.9;
            border: 1px solid #f0f0f0;
        }
        #middle {
            width: 200px;
        }

        .mainbox{
            width: 1920px;
            height: 1080px;

            display: flex;
            align-items: end;
            justify-content: center;
        }

        .buildbox{
            width: 1100px;
            height: 300px;
            background-image: url(Assets/Other/itembox.png);
            background-size: 100%;
            display: flex;
            justify-content: center;
           
        }

        .hero{
            width: 50px;
            height: 50px;
            object-fit: contain;
            overflow: hidden;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 7.3px;
        
        }

        .hero img{
            width: 100%;
            height: 100%;
            object-fit: contain;
            margin-top: -5px;
        }