. {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;

}


.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-height: 100%;
    /*background-color: #111111;*/
    /*width: 100%;*/
    /*height: 100%;*/
    background-image: linear-gradient(black, #23313e);
}

.description {
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 200;
    font-size: 20px;
    margin: 0;
}

#red-text {
    color: #ff0000;
}


#hero-control{
    display: flex;
    position: absolute;
    /*border: red solid 1px;*/
    width: 50px;
    height: 50px;

    /*border: red dotted 1px;*/
}

#trail-control-1, #trail-control-2, #trail-control-3, #trail-control-3, #trail-control-4, #trail-control-5 {
    position: absolute;
}

.blob {

    position: absolute;
    /*width: 30px;*/
    /*height: 30px;*/
    /*border-radius: 30px;*/
    background-color: #ffffff;
    box-shadow: 0 0 25px -5px #ffffff;
    margin: auto;
    /*top: -15px;*/
    /*left: -15px;*/
    /*background-color: #ff9b14;*/
    /*box-shadow: 0 0 25px -2px #ffa612;*/
    /*filter: blur(1px)*/

}

#main-blob {

}

#trail-1 {
    /*width: 34px;*/
    /*height: 34px;*/
    /*top: -17px;*/
    /*left: -17px;*/
    z-index: 1;
}

#trail-2 {
    /*width: 24px;*/
    /*height: 24px;*/
    /*top: -12px;*/
    /*left: -12px;*/
    z-index: 2;

}

#trail-3 {
    /*width: 24px;*/
    /*height: 24px;*/
    /*top: -12px;*/
    /*left: -12px;*/
    opacity: 0.7;
    z-index: 3;
}

#trail-4 {
    /*width: 24px;*/
    /*height: 24px;*/
    /*top: -12px;*/
    /*left: -12px;*/
    opacity: .4;
    filter: blur(1px);
    z-index: 4;
}

#trail-5 {
    /*width: 22px;*/
    /*height: 22px;*/
    /*top: -11px;*/
    /*left: -11px;*/
    opacity: .3;
    filter: blur(1px);
    z-index: 5;
}

/*.animate{*/
/*    animation: jump 400ms ease;*/
/*}*/

#play-area {
    position: relative;
    margin-top: 8%;
    margin-bottom: 100px;
    /*background-color: #111111;*/
    /*background-image: linear-gradient(black, #23313e);*/
    width: 600px;
    height: 600px;
    border-radius: 600px;
    border: #26353c 2px solid;

}

#center {
    position: relative;
    width: 100px;
    height: 100px;
    border: red solid 1px;
}

#display-area {
    display: flex;
    flex-direction: column;
    color: antiquewhite;
    height: 300px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 200;
}

h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 400;
    font-size: 34px;
    padding: 0;
    margin: 0;
}

#play-button {
    padding-top: 10px;
    padding-left: 5px;
    cursor: pointer;
    width: fit-content;
}

#restart-button {
    cursor: pointer;
    width: fit-content;
}

#play-button:hover, #restart-button:hover {
    color: #b9b9b9;
}

#enemy-control {
    /*background-color: white;*/
    position: absolute;
}

#enemy {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    /*top: -15px;*/
    /*left: -15px;*/
    background-color: #d7d7d7;
    /*transform: scaleY(-1.5);*/
}

#target-pos {
    position: absolute;
    top: 100px;
    left: 200px;
    width: 50px;
    height: 50px;
    border: dotted 1px #08ff00;
}


#mouse-pos {
    position: absolute;
    top: 100px;
    left: 200px;
    width: 25px;
    height: 25px;
    border: dotted 1px #c412c3;
}


#hitter2-control {
    position: absolute;
    /*border: red solid 1px;*/
    width: 30px;
    height: 30px
}

#hitter2 {
    position: absolute;
    /*width: 40px;*/
    /*height: 40px;*/
    background-color: #34363c;
    /*border-radius: 40px;*/
    top: -20px;
    left: -20px;
}

#hitter3-control {
    /*position: absolute;*/
    /*border: #08ff00 dotted 1px;*/
}