body{
    background-color: #333;
    margin:0px;
    overflow:hidden;
    font-family: sans-serif;
}
a{
    position:absolute;
}
#gameArea{
    display:flex;
    width:100%;
    height:100vh;
    justify-content: center;
    align-items: center;
}
#range{
    display:flex;
    width:25vmin;
    height:25vmin;
    border-radius: 100%;
    background-color: #555;
    justify-content: center;
    align-items: center;
    position: relative;
}
tower{
    display:block;
    width:8vmin;
    height:8vmin;
    border-radius: 4vmin;
    background-color: rgba(255, 255, 255, 1);
}
.enemy{
    background-color: blueviolet;
    width:4vmin;
    height:4vmin;
    margin:-2vmin; /* shift the center of the enemy */
    border-radius: 2vmin;
    position:absolute;
    top:0px;
    left:0px;
    animation:5s attack linear forwards;
}
@keyframes attack{
    100%{top:50vh;left:50vw;}
}
.basic{
    background-color: red;
}
#hud{
    position:absolute;
    right:10px;
    text-align: right;
    z-index:9;
}
#money{
    font-size:2.5em;
    margin:0px;
    color:#FFF;
}
#hud a{
    position:relative;
    display:block;
    color:crimson;
    background-color: #eee;
    border-radius: 10px;
    padding:12px 40px;
    text-decoration: none;
    font-size:1.5em;
    margin:6px;

}