/* Animations */

@keyframes targetspawn {
    0%      { transform:scale(0); }
    75%     { transform:scale(1.3); }
    90%     { transform:scale(0.9); }
    100%    { transform:scale(1); }
}

@keyframes targetblink {
    0%      { opacity:1; }
    20%     { opacity:0.5; }
    40%     { opacity:1; }
    60%     { opacity:0.5; }
    80%     { opacity:1; }
    100%    { opacity:0.5; }
}

@keyframes targetremove {
    to      { transform:scale(0); }
}

@keyframes targetshot {
    0%      { transform:scale(0); }
    100%    { transform:scale(1); }
}


@keyframes bulletshot {
    0%      { opacity:0; }
    50%     { opacity:0;background:url("../images/graphics/bullet.flame.png");background-size:10px 32px; }
    51%     { opacity:1; }
    100%    { background:url("../images/graphics/bullet.png");background-size:cover; }
}

@keyframes pulse {
    0%      { opacity:0.25; }
    50%     { opacity:1; }
    100%    { opacity:0.25; }
}

@keyframes rise_up {
    0%      { opacity:0;margin-top:20px; }
    25%     { opacity:1; }
    75%     { opacity:1; }
    100%    { opacity:0;margin-top:-10px; }
}

/* STYLING CSS */

*                                       { margin:0px;padding:0px;user-select:none;outline:none;box-sizing:border-box; }  /* reset css */

body                                    { font-family:"Langar",Arial,Helvetica,sans-serif;font-size:25px;color:#fff;background-color:#000;overflow:hidden;cursor:url("../cursors/cursor.png"),auto; }
h1                                      { font-size:2em;margin-bottom:25px; }
h1 span                                 { display:inline-block;vertical-align:10px;font-size:0.5em;color:yellow; }
h2                                      { font-size:2em;margin-bottom:15px; }


.hide_mouse *                           { cursor:none !important; }

.transition1000                         { transition:all 1000ms linear 250ms; }
.button                                 { font-size:1.25em;margin-bottom:5px; }
.button:active                          { cursor:url("../cursors/cursor.active.png"),auto; }
.button.selected                        { animation-name:pulse;animation-duration:500ms;animation-iteration-count:infinite; }

body[data-active="mainmenu"] header                     { display:flex !important; }                       
body[data-active="mainmenu"] header .overlay            { opacity:0.75; }                       
body[data-active="instructions"] aside                  { display:flex !important; }                       
body[data-active="game"] main                           { display:block !important; }                       
body[data-active="highscores"] footer                   { display:flex !important; }                       


header                                  { display:none;flex-direction:column;justify-content:center;align-items:center;position:fixed;left:0px;top:0px;width:100%;height:100vh;text-align:center;background:url("../images/backgrounds/background.mainmenu.jpg") center center no-repeat #f5f5f5;overflow:hidden;z-index:4; }
header *                                { position:relative;z-index:2; }
header .overlay                         { position:absolute;left:0px;top:0px;width:100%;height:100%;pointer-events:none;background-color:rgba(0,0,0,1);opacity:1;z-index:1; }
header input                            { position:absolute;left:50%;top:50%;margin:65px 0px 0px -612px;padding:5px 10px;font-size:1em;text-align:center;width:155px;background-color:rgba(0,0,0,0.25);color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.5);transform:rotate(17deg);z-index:2; }
header canvas                           { position:relative;width:300px;height:300px;margin-bottom:25px;z-index:2; }
header .circle                          { position:absolute;left:calc(50% - 135px);top:calc(50% - 210px);width:270px;height:270px;background-color:red;border-radius:50%;border:5px solid #000;z-index:1;background:rgb(223,172,136);background:radial-gradient(circle,rgba(223,172,136,1) 0%,rgba(223,164,130,1) 4%,rgba(221,63,63,1) 50%,rgba(32,4,4,1) 100%); } 
header h1                               { position:absolute;left:calc(50% - 200px);top:calc(50% - 10px);width:400px;text-align:center;z-index:3;text-shadow:2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000,2px 0px 0 #000,0px 2px 0 #000,-2px 0px 0 #000,0px -2px 0 #000; }

aside                                   { text-align:center;display:none;flex-direction:column;justify-content:center;align-items:center;position:fixed;left:0px;top:0px;width:100%;height:100vh;overflow:hidden;color:#000;z-index:3;background-color:rgb(124, 29, 29);background:radial-gradient(circle,rgba(223,172,136,1) 0%,rgba(223,164,130,1) 4%,rgba(221,63,63,1) 50%,rgb(124, 29, 29) 150%);overflow:auto;font-size:0.9em; }
aside p                                 { text-align:center;width:1000px;margin:0px auto 15px auto; }
aside img                               { display:block;width:480px;height:auto;border:1px solid #000;margin-bottom:20px; }
aside .controls                         { padding:15px;border:2px solid #000;background-color:rgba(0,0,0,0.2);border-radius:5px;margin-bottom:20px; }
aside .yellow                           { color:yellow;font-family:"Press Start 2P",cursive;text-shadow:2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000,2px 0px 0 #000,0px 2px 0 #000,-2px 0px 0 #000,0px -2px 0 #000; }

main                                    { display:none;cursor:none;position:fixed;left:0px;top:0px;width:100%;height:100vh;background:url("../images/backgrounds/battlefield.png") center center repeat green;overflow:hidden;z-index:2; }
main .overlay                           { position:absolute;background:url("../images/backgrounds/battlefield.overlay.png") center center no-repeat;left:calc(50% - 212px);top:calc(50% - 189px);width:424px;height:378px;z-index:0; }
main .bullet                            { position:absolute;background:url("../images/graphics/bullet.png") center center no-repeat;animation-name:bulletshot;animation-duration:150ms;animation-delay:0ms;background-size:cover;width:16px;height:32px;z-index:6; } 
main .target                            { position:absolute;animation-name:targetspawn,targetremove,targetblink;animation-duration:500ms,300ms,750ms;animation-delay:0ms,4750ms,4000ms;overflow:visible;z-index:3;background:url("../images/graphics/target.png") center center no-repeat;background-size:cover; }
main .target.shot                       { animation-name:targetshot;animation-duration:150ms;background:url("../images/graphics/target.shot.png") center center no-repeat; }
main .points                            { position:absolute;text-align:center;font-family:"Press Start 2P",cursive;font-weight:400;font-size:0.75em;width:150px;height:50px;line-height:50px;color:yellow;text-shadow:4px 4px 0 #000,4px -4px 0 #000,-4px 4px 0 #000,-4px -4px 0 #000,4px 0px 0 #000,0px 4px 0 #000,-4px 0px 0 #000,0px -4px 0 #000;animation-name:rise_up;animation-duration:500ms;animation-delay:0ms;z-index:4; }
main #tank                              { position:absolute;left:calc(50% - 38px);top:calc(50% - 40px);width:76px;height:80px;background:url("../images/graphics/tank.png") center center no-repeat;background-size:cover;z-index:3; }
main #tank .barrel                      { position:absolute;left:calc(50% - 16px);top:50%;width:32px;height:60px;background:url("../images/graphics/barrel.png") center center no-repeat;background-size:cover;transform-origin:top center;z-index:4; }
main #tank .barrel .aim                 { position:absolute;animation-name:pulse;animation-duration:500ms;animation-iteration-count:infinite;bottom:-55px;left:calc(50% - 1px);height:50px; }
main #tank .barrel .aim .crosshair      { width:35px;height:35px;position:absolute;bottom:-40px;left:calc(50% - 17.5px);background:url("../images/graphics/crosshair.png") center center no-repeat; }
main #tank .barreltop                   { position:absolute;left:calc(50% - 18px);top:calc(50% - 18px);width:36px;height:36px;background:url("../images/graphics/barreltop.png") center center no-repeat;background-size:cover;z-index:5; }
main #score                             { position:absolute;left:calc(50% - 50px);top:calc(50% + 55px);width:100px;text-align:center;font-family:"Press Start 2P",cursive;font-weight:400;font-size:0.75em;height:40px;line-height:40px;border-radius:5px;color:yellow;text-shadow:2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000,2px 0px 0 #000,0px 2px 0 #000,-2px 0px 0 #000,0px -2px 0 #000;background-color:rgba(0,0,0,0.25);border:2px solid #000;z-index:2;transition:all 50ms linear; }
main #score.scored                      { font-size:0.75em; }
main #timeleft                          { position:absolute;left:0px;top:0px;right:0px;bottom:0px;line-height:100vh;height:100vh;text-align:center;font-size:50em;color:rgba(255,255,255,0.15);z-index:1;font-family:"Share Tech Mono",cursive;font-weight:700;padding-top:50px; }
main #timeleft.runningout               { color:rgba(235, 81, 81, 0.30);animation-name:pulse;animation-duration:1000ms;animation-iteration-count:infinite; }
main #ammo                              { position:absolute;left:calc(50% + 50px);bottom:calc(50% - 10px);width:60px;padding:5px 5px 0px 5px;border:2px solid #000;background-color:rgba(0,0,0,0.2);border-radius:5px; }
main #ammo .ammo                        { width:40px;height:8px;margin-bottom:5px;background:url("../images/graphics/ammo.png") center center no-repeat; }
main #ammo .ammo.out                    { opacity:0.25; } 

footer                                          { background:url("../images/backgrounds/highscores.png") center center repeat yellow;display:none;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:fixed;left:0px;top:0px;width:100%;height:100vh;background-color:#000;overflow:hidden;z-index:1;color:#000; }
footer #highscoreslist                          { width:650px;border:2px solid #000;border-radius:10px;background-color:rgba(0,0,0,0.25);padding:20px;margin-bottom:15px; }
footer #highscoreslist div                      { margin:0px 5px;padding:5px;display:flex;justify-content:space-between;font-size:0.5em; }
footer #highscoreslist div:nth-child(1),
footer #highscoreslist div:nth-child(2),
footer #highscoreslist div:nth-child(3)         { font-size:1em; }
footer #highscoreslist div:nth-child(4),
footer #highscoreslist div:nth-child(5),
footer #highscoreslist div:nth-child(6),
footer #highscoreslist div:nth-child(7),
footer #highscoreslist div:nth-child(8),
footer #highscoreslist div:nth-child(9),
footer #highscoreslist div:nth-child(10)        { font-size:0.75em; }
footer #highscoreslist div:nth-child(even)      { background-color:rgba(255,255,255,0.15); }
footer #highscoreslist div span                 { display:inline-block; }
footer #highscoreslist div span:last-child      { padding-top:6px;color:yellow;font-family:"Press Start 2P",cursive;text-shadow:2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,-2px -2px 0 #000,2px 0px 0 #000,0px 2px 0 #000,-2px 0px 0 #000,0px -2px 0 #000; }
footer #highscoreslist div.current                         { animation-name:pulse;animation-duration:300ms;animation-iteration-count:infinite; }
footer #highscoreslist div.current span:last-child         { color:red !important; }