@font-face {
    font-family: 'myfonts';
    src: url('Assets/Font/big_noodle_titling.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

:root{
    --primarycolor: #fff;

}

body {
    font-family: 'myfonts', sans-serif;
    color: var(--primarycolor);

  }



.mainbox{
    width: 1920px;
    height: 1080px;
    background-image: url(Assets/Other/postgame.png);
    
}

.upper{
    width: 1920px;
    height: 245px;

    display: flex;
}

.upperleft{
    width: 709px;
    height: 245px;

}

.uppermid{
    width: 502px;
    height: 245px;
    display: flex;
    
    justify-content: center;
    font-size: 60px;
    margin-top: 20px;
}

.upperright{
    width: 709px;
    height: 245px;

}

.lower{
    width: 1920px;
    height: 835px;

    display: flex;
}

.lowerleft{
    width: 709px;
    height: 835px;
 
    display: flex;
}

.lowermid{
    width: 502px;
    height:835px;

}

.lowerright{
    width: 709px;
    height: 835px;

    display: flex;
}

.boxteaminfo{
    width: 221px;
    height: 835px;
   
}

/*------------boxside----------------*/

.boxsideinfo{
    width: 488px;
    height: 133px;

    display: flex;
    margin-bottom: 30px;
}

.lvl{
    width: 30px;
    color: var(--primarycolor);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d1d1d;
    font-size: 30px;
    

}

.kdagold{
    width: 120px;
    height: 133px;
  
}

.kda{
    width: 120px;
    height: 46.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    background-color: #00000025;
}
.kdatxt{
    width: 120px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    
    background-color: rgb(41, 41, 41);
}

.gold{
    width: 120px;
    height: 46.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    background-color: #00000025;
}

.goldtxt{
    width: 120px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background-color: rgb(107, 109, 0);
   
}

.spell{
    width: 133px;
    height: 133px;
    display: flex;
    background-color: #333333;
    align-items: center;
    justify-content: center;
}

.spell img{
    width: 95px;
    height: 95px;
    object-fit: contain;
}

.itemframe{
    width: 205px;
    height: 133px;
}

.items{
    width: auto;
    height: 66.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemslot{
    width: 50px;
    height: 50px;
    background-color: #eee;
   
    overflow: hidden;
    display: flex;
}

.itemslot img{
    scale: 1.4;
}

  .items {
    display: flex;
    gap: 5px;
  }


  .empty {
    background-color: #dadada44;
  }


/*Mid*/

.gameduration{
    width: 502px;
    height: 150px;
 
}

.gametimetext{
    width: 502px;
    height:70px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gamedur{
    width: 502px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
}

.turretlordturtle{
    width: 502px;
    height: 300px;
   
    display: flex;
}

.leftrightside{
    width: 200px;
    height: 100%;
   
}

.midside{
    width: 102px;
    height: 100%;

}


.tltinfo{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.tltlogo1{
    width: 100%;
    height: 100px;
    background-image: url(Assets/Other/gold.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

.tltlogo2{
    width: 100%;
    height: 100px;
    background-image: url(Assets/Other/turtle.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

.tltlogo3{
    width: 100%;
    height: 100px;
    background-image: url(Assets/Other/lord.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

.tltlogo4{
    width: 100%;
    height: 100px;
    background-image: url(Assets/Other/tower.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

/*-------------------*/

.blueredside{
    width: 709px;
    height: 180px;

    display: flex;
    
}
.teamname{
    width: 409px;
    height: 100%;
    background-color: #24242449;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
}

.score{
    width: 100px;
    height: 100%;
    background-color: #24242449;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
}

.logo{
    width: 200px;
    height: 100%;
    background-color: #24242494;
    object-fit: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img{
    width: 150px;
 
    height: 150px;
    object-fit: contain;
}

.heroandplayer{
    width: 100%;
    height: 133px;
    background-color: #eee;
    margin-bottom: 30px;
}

.hero{
    width: 100%;
    height: 100px;
    background-color: #333;
    object-fit: contain;
    overflow: hidden;
}

.hero img{
    width: 100%;
    margin-top: -60px;
}

.nickname{
    width: 100%;
    height: 33px;
    background-color: #030303be;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-name{
    width: 0px;
    height: 0px;
}

.banhero{
    width: 100%;
    height: 385px;
    margin-top: 50px;
    display: flex;
    scale: 0.8;
    justify-content: center;
}

.banside{
    width: 110px;
    height:100%;

   
   
}

.banside2{
    width: 110px;
    height:250px;

  
    margin-top: 70px;
    align-items: center;
    justify-content: center;
}

.banmini{
    width: 90px;
    height: 90px;
    background-color: #4e4646;
    margin-left: 10px;
    margin-top: 20px;
    object-fit: contain;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}

.banmini img{
    margin-top: 40px;
    scale: 0.4;
    filter: grayscale();
}

.bannedtext{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    margin-top: -110px;
}

.winlose{
   
    writing-mode: vertical-rl;
    font-size: 90px;
    
}

.hide{
    font-size: 0px;
}