#playfield{
    left: 0;
    top: 0;
    height: 600px;
    width: 800px;
    background-color: black;
    background-size: 800px;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    clip:rect(800px,600px);
}


#player{
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    /* background-color: green; */
    background: none;
    background-image: url(assets/Pixilart\ Sprite\ Sheet.png);
    background-size: 96px 32px;
    background-repeat: no-repeat;
    overflow: visible;
    background-position: 0px 0px;
    /* border-radius: 10px; */
    
}

img{
    left: -800px;
    top: 0;
    background: transparent;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    
}

.projectile
{
    /* background-color: blue; */
    background-image: url(assets/projectile.png);
}

.enemy{
    /* background-color: red; */
    background-image: url(assets/crab_with_guns.png);
}


#startButton{
    left: 350px;
    top: 400px;

}


#pauseButton{
    left: 825px;
    top: 25px;

}

#hp{
    left: 50px;
    top: 550px;
    color: white;
}

#score{
    left: 200px;
    top: 550px;
    color: white;
}

#control1{
    left: 50px;
    top: 625px;
}

#control2{
    top:625px;
    left: 200px;
}

.UI{
/* TODO */
font-size: 20px;
min-width: 200px;
}

.UIBox{
    background: rgb(87, 87, 87);
    height: 50px;
    min-width: 100px;
    border: 5px solid rgb(58, 58, 58);
    border-radius: 10px;
    color: #eee;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
    min-width: 150px;
}

.big{
    left: 250px;
    top: 100px;
    width:300px;
    height: 200px;
}

#gametitle{
    visibility: visible;
}


#title{
    font-size: 40px;
    margin: 35px;
}

#submitBox{
    left: 300px;
    visibility: hidden;
    padding: 25px;
    width: auto;
}

#submitBox input, #submitBox span{
    position: relative;
    display: block;
    margin-right: 5px;
    margin-top: 10px;
    min-width: 150px;
}

#beforeSave{
    display: contents;
    visibility: hidden;
}

#afterSave{
    display: block;
    visibility: hidden;
    left: 60px;
    top: 100px;
}

#afterSave span{
    display: block;
    position: relative;
    margin:0;
}

#save{
    position: relative;
    top: 35px;
    left: 75px;
}

h4{
    margin:0;
}

.hpBar{
    z-index: 5;
    visibility: visible;
    /* color: rgb(92, 153, 0); */
    background-color: rgb(63, 63, 63);
}

#game{
    transform: translate(250px,100px);
}

#Highscores{
    left: 1300px;
    top: 100px;
    margin: 0;
}

#Highscores,  #Highscores * {
    position: relative;
    width: 300px;
}

.powerup{
    /* background-color: yellow; */
    /* background-image: url(assets/heart.png); */
    background-size: 16px 16px;
    z-index: 2;
}

#music{
    left: 825px;
    top: 425px;
}

#musicVol{
    left: 825px;
    top: 450px;
}

#sfx{
    left:825px;
    top: 500px;
}

#sfxVol{
    left: 825px;
    top: 525px;
}


/* #list{
    left: 1300px;
    top: 200px;
    width: auto;
    height: auto;
} */



*{
    user-select: none;
    outline: none;
    position: absolute;

}


/* body{ */
    /* transform: scale(1.25) translate(750px,50px); */
/* } */