body{
    overflow: hidden;
    position: fixed;
    top:0;
    left:0;
    margin:0;
    height: 100%;
    width: 100%;
}
canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
#overlay{
    z-index: 1;
}
#healthbar_holder{
    z-index: 1;
    position: absolute;
    background-image: url(../images/healthbar_holder.png);
    background-size: 100% 100%;
    top:96%;
}
#healthbar{
    z-index: 2;
    background-image: url(../images/healthbar.png);
    position: absolute;
    top:10.25%;
    left:1.288%;
    height: 79.487%;
}
#numberz{
    position: absolute;
    z-index: 3;
    width:100%;
    text-align: center;
    font-family: "Helvetica Neue";
    color:white;
}
#stats{
    position: absolute;
    left: 0;
    bottom:0;
    background-image: url(../images/textures/stats_texture.png);
    opacity: 0.9;
}
#stats tbody tr{
    width: 100%;
    height: 25%;
}
#stats tbody tr td{
    text-align: center;
    color: rgb(255, 255, 204);
}
#stats tbody tr td div img{
    border:1px solid rgb(0, 102, 0);
}
.flexing{
    display:flex;
    align-items:center;
    justify-content:left;
}

.tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-family: 'Times New Roman', Times, serif;

    position: absolute;
    z-index: 5;
    bottom: 100%;
}

.leftside{
    left:0%;
}
.rightside{
    left:50%;
}

.flexing:hover .tooltiptext{
    visibility: visible;
}

#inventory{
    position:absolute;
    background-image: url(../images/textures/paper_texture.png);
    visibility: hidden;
    z-index: 4;
}
#inventory-canvas{
    position:absolute;
    left: 25%;
    top: 5%;
    width:50%;
    height:60%;
}
#itemboxen{
    position: absolute;
    left:5%;
    top:70%;
    width:90%;
    height:30%;
}
.itembox{
    position: absolute;
    border-right: solid white;
    border-bottom: solid white;
    border-left: solid #262626;
    border-top: solid #262626;
    background-color:#8f8f8f;
}

#kda_overlay{
    position: absolute;
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    color:rgba(250,250,250,0.85);
    right:0px;
    top:0;
    width:300px;
    height:25px;
    background-color:  rgba(14,56,24,0.8);
    visibility: visible;
    z-index: 10;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(14,26,24,0.63); 
    box-shadow: 0px 2px 4px 0px rgba(14,26,24,0.63);
    font-family: 'Impact', Charcoal, sans-serif;
}

#vs{
    color: rgb(191,196,124);
    font-size: smaller;
    font-family: serif;
}

#total_kills{
    color:blue;
    padding: 0px 3px 0px 3px;
}

#total_deaths{
    color:red;
    padding: 0px 3px 0px 3px;
}

.topright_element{
    position: relative;
    padding: 0px 5px 0px 5px;
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
}