@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

body {
    margin: 0;
    font-family: Arial;
    background: #111;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url("logo.png"), url("logo.png");
    background-size: 33.3%;
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-position-y: 80%;
}

header {
    padding: 20px;
    font-size: 2rem;
    font-weight: bold;
}

#timer {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    color: #00ff41;
    background-color: #000000;
    padding: 5px 80px;
    border: 2px solid #00ff41;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 4px;
    text-shadow: 0 0 8px #00ff41;
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.6) inset;
}

#targets {
    background-image: url('background.png');
    width: calc(1024px / 2.1);
    height: calc(1536px / 2.1);
    background-size: contain;
}

.target {
    background: #333;
    border: 2px solid #555;
    border-radius: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.6rem;
    width: 1.8rem;
    height: 1.8rem;
}

.target.done {
    background: #00ff41;
    border-color: #106b10;
    color: #000;
    font-weight: bold;
}


/*TARGET POSITIONS*/
#target-0{
    position: relative;
    left: 410px;
    top: 370px;
}

#target-1{
    position: relative;
    left: 375px;
    top: 305px;
}

#target-2{
    position: relative;
    left: 240px;
    top: 170px;
}

#target-3{
    position: relative;
    left: 280px;
    top: 100px;
}

#target-4{
    position: relative;
    left: 400px;
    top: -80px;
}

#target-5{
    position: relative;
    left: 260px;
    top: -40px;
}

#target-6{
    position: relative;
    left: 220px;
    top: -45px;
}

#target-7{
    position: relative;
    left: 210px;
    top: -185px;
}

#target-8{
    position: relative;
    left: 170px;
    top: -135px;
}

#target-9{
    position: relative;
    left: 170px;
    top: -220px;
}

#target-10{
    position: relative;
    left: 160px;
    top: -285px;
}

#target-11{
    position: relative;
    left: 40px;
    top: -315px;
}

#target-12{
    position: relative;
    left: 210px;
    top: -115px;
}

#target-13{
    position: relative;
    left: 210px;
    top: -100px;
}

#target-14{
    position: relative;
    left: 40px;
    top: -50px;
}

#target-15{
    position: relative;
    left: 40px;
    top: -30px;
}

#target-16{
    position: relative;
    left: 65px;
    top: 85px;
}

#target-17{
    position: relative;
    left: 210px;
    top: 80px;
}