:root{
    --health:0;
    --mag:0;
    --window:0;
    --blur: 0px
}

*{
    margin:0; padding:0;
    overflow: hidden;
    background-color: transparent;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    font-size: var(--window);
    font-family: pixelFont;
    -webkit-text-stroke: 1px black;
    color:gray
}
html{
    cursor:none;
}
@font-face {
    font-family: pixelFont;
    src: url(font/upheavtt.ttf);
}

#canvas {
    filter:blur(var(--blur));
    margin:0; padding:0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    background-color: rgba(255, 255, 255, 0) 10px;
    
} 

#mag{
    filter:blur(var(--blur));
    font-size: 20px;
    width:10%;
    height:10%;
    position:absolute;
    right:10px;
    bottom:0px;
}  
#magCount{
    right:100%;
    font-size:larger;
}
#mag2{
    position:absolute;
    bottom:10px;
    right:0px
}
#magBar{
    width: 95%;
    position:static;
    height: 4px;
    background-image:linear-gradient(to right,rgb(66, 66, 66) var(--mag),rgba(0, 255, 0, 0) 0%);
    border-radius: 3px;
    bottom:5px;
    border:1px solid black
}
#ammoStatus{
    filter:blur(var(--blur));
    font-size:x-small;
    bottom:15px; 
}
#upperScreen{
    width:100%;
    height:10%;
    position:absolute;
    top:0px;
    display:flex;
    justify-content: center; 
}
#upperScreen:not(#fpsText){
    filter:blur(var(--blur));
}
#enemiesText{
    position:absolute;
    left:0px;
    font-size:larger;
    top:0px
}
#restart{
    border:none;
}
#restart:hover{
    background-color: rgba(146, 145, 145, 0.377);
}
#endGame{
    display:none;
    align-items: center;
    justify-content: center;
    position:absolute;
    flex-direction: column;
    row-gap: 5px;
    top:0px;
    width:100%;
    height:100%;
}
#fpsText{
    filter:none;
    position:absolute;
    right:0px;
    font-size:larger;
    top:0px
}
#room{
   position:absolute;
   
}
#health{
    filter:blur(var(--blur));
    width:15%;
    height:10%;
    position:absolute;
    left:10px;
    bottom:10px;
}
#healthCount{
    position:absolute;
    left:0px;
    font-size:larger;
    bottom:10px
} 
#healthBar {
    width: 70%;
    position:absolute;
    height: 4px;
    background-image:linear-gradient(to right,rgb(0, 128, 0) var(--health),rgba(0, 255, 0, 0) 0%);
    border-radius: 3px;
    bottom:5px;
    border:1px solid black
}