form
  input(type="checkbox" id="toggleGame" class="logic-checkbox")
  input(type="checkbox" id="HowToPlayPopup" class="logic-checkbox")
  input(type="checkbox" id="whoAmIPopup" class="logic-checkbox")
  input(type="checkbox" id="GraphicsLevel" class="logic-checkbox")
  section(class="game-menu-frame")
   header(class="game-header")
     h1(class="game-title") 
       div(class="line-1") CoronaVirus
       div(class="line-2") Invaders
       div(class="line-3") Let's save the world together!
   nav(class="game-nav")
     h2(class="game-nav-title") Main Menu
     ul(class="game-nav-list")
       li(class="game-nav-item") 
         label(class="game-nav-button" for="toggleGame" tabindex="0") Save the World
       li(class="game-nav-item") 
         label(class="game-nav-button" for="HowToPlayPopup" tabindex="0") How to Play
       li(class="game-nav-item") 
         label(class="game-nav-button" for="GraphicsLevel" tabindex="0" id="GraphicsLevelButton") Performance
       li(class="game-nav-item") 
         label(class="game-nav-button" for="whoAmIPopup" tabindex="0") Who Am I
       li(class="game-nav-item") 
         a(class="game-nav-button" href="https://eladsc.com/") Quit
     p(class="note") Let's beat this on together and on the way spend time doing good.

   - var numbersOfVirus = 1;
   while numbersOfVirus <= 2   
        div(class="corona-promo-virus-" + numbersOfVirus++)
          label(class="corona-virus")
            div(class="body")
              div(class="scalp")
                - var n = 1;
                while n <= 12
                    span(class="hair" + n++)
              div(class="eye1")
              div(class="eye2")


  section(class="game-frame")
    - var numbersOfVirus = 1;
    ul(class="corona-world")
      while numbersOfVirus <= 100   
        li(class="corona-location corona-virus-" + numbersOfVirus++ + "-location")
          label(class="corona-virus")
            input(type="radio")
            div(class="body")
              div(class="scalp")
                - var n = 1;
                while n <= 12
                    span(class="hair" + n++)
              div(class="eye1")
              div(class="eye2")
    div(class="sum") 
      span(class="text") Score:
    div(class="count-down")
      span(class="icon") ⏲️
      span(class="count")
    div(class="timer")
    section(class="game-over")
      h2(class="game-title") Game Over
      nav(class="game-nav")
       ul(class="game-nav-list")
         //li(class="game-nav-item") 
           button(class="game-nav-button" onclick="history.go(0)") Back to Main Menu
         li(class="game-nav-item") 
           label(class="game-nav-button" for="whoAmIPopup" tabindex="0") Who Am I
         li(class="game-nav-item") 
           input(type="reset" class="game-nav-button" value="Back to Main Menu")
         //li(class="game-nav-item") 
           a(class="game-nav-button" href="https://eladsc.com/") Quit

  section(id="whoAmI" class="popup common-content")
    label(class="close-button" for="whoAmIPopup" tabindex="0") x
    h3(class="common-title") Who Am I ?
    p II’m Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.

    p You can see more of my stuff on my website 
      a(href="https://www.eladsc.dev/" target="_blank") eladsc.dev
      |  and follow me on 
      a(href="https://www.twitter.com/eladsc" target="_blank") twitter.com/eladsc
      | .
    img(src="https://assets.codepen.io/65740/internal/avatars/users/default.png?fit=crop&format=auto&height=200&version=1636190215&width=200" alt="Elad Shechter")  
    label(class="game-nav-button" for="whoAmIPopup" tabindex="0") Close

  section(id="HowToPlay" class="popup common-content")
    label(class="close-button" for="HowToPlayPopup" tabindex="0") x
    h3(class="common-title") How to Play ?
    p Use the cursor ("🧼" = soap icon) to kill the Corona Virus. 
    br
    p The Coronavirus is a tough one! And sometimes you will need to press on the Coronavirus symbol several times in order to get rid of it.
    label(class="game-nav-button" for="HowToPlayPopup" tabindex="0") Close
View Compiled
/****** More of My Resets *******/
*,
*::before,
*::after{box-sizing:border-box;}
/*** global varialables ***/
$amountOfVirus:100;
:root{
  --common-color1:#c72113;
  --common-color2:#2674c3;
}

html{
  overflow:hidden;
  //background-image:url(https://source.unsplash.com/random);
  background-image:url(https://picsum.photos/1200/600);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  font-size:1px;  
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; /* Standard */
  min-height:100vh;
}
body{counter-reset:corona; font-size:16rem; font-family:arial;}
/***** Game Menu Frame *****/
.game-menu-frame{
  &::before{
    content:""; background-color:rgba(0,0,0,0.6);
    position:absolute; left:0; right:0; top:0; bottom:0;
  }
}
.game-header{position:relative; z-index:5; perspective:800px;}
.game-title{
  position:relative; z-index:10; margin-top:20px; transform:rotateX(21deg); margin-bottom:40px;
  color:#fff; font-size:54rem; font-weight:800; text-transform:uppercase; letter-spacing:-4px; text-align:center;
  text-shadow: 2px 1px 0px #d2d2d2, 4px 2px 0px #4f3256, 3px 1px 6px #000000;
  /*-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black;
  text-shadow:2px 0px 5px #1c99ca, 0px 2px 5px #1c99ca, -2px 0px 5px #1c99ca, 0px -2px 5px #1c99ca;*/      
  .line-1{font-size:40rem; letter-spacing:-2px;}
  .line-2{font-size:63rem;}
  .line-3{font-size:14rem; font-weight:nomral; letter-spacing:0px; text-shadow: 1px 1px 0px #d2d2d2; margin-top:10px;}
}
.game-nav{
  position:relative; z-index:5;
  width:360px; margin:0 auto; text-align:center;
  &-title{display:none; font-size:30rem; color:#ccc; margin-bottom:20px;}
  &-item{margin-bottom:10px;}
  &-button{
    display:block; height:40px; line-height:36px; border:solid 2px rgba(255,255,255,0.4); border-radius:20px; background-color:rgba(0,0,0,0.8);
    color:#fff; font-size:20rem; font-weight:bold; text-align:center; text-decoration:none; cursor:pointer; width:100%;    
    &:hover, &:focus{animation: neon 1.5s ease-in-out infinite alternate; outline:none;}
  }
}
.game-over{
  position:fixed; height:0px; opacity:0; z-index:20; left:0; right:0; top:0; bottom:0;
  overflow:hidden; box-sizing:content-box; padding-top:100px; background-color: rgba(0, 0, 0, 0.6);
  animation: curtain 0.6s ease-in $amountOfVirus * 1s forwards;
}
.popup{
  display:none;
  position:fixed; z-index:30; top:30px; left:calc(-50vw + 50%); right:calc(-50vw + 50%);   
  width:360px; padding:20px; min-height:380px; max-height:calc(100vh - 60px); margin-left:auto; margin-right:auto; overflow:auto;
  border:solid 10px #121212; border-radius:10px; background-color:#fff;
  .close-button{position:absolute; right:0; top:0; padding:20px; cursor:pointer; font-family:cursive, arial; font-size:30rem;line-height:20px;}
  .game-nav-button{margin-top:20px; margin-bottom:20px;}
}
.common-content{
  font-size:18rem; line-height:1.3;
  .common-title{font-size:22rem; font-weight:bold; text-align:center; margin-bottom:10px;}
  p, ul{margin-bottom:10px;}
  a{color:var(--common-color2)}
  img{display:block; max-width:70%; margin:10px auto;}
  
}
.note{color:#ccc; line-height:1.25;}
[class*="corona-promo-virus"]{position:absolute; top:-250px;}
.corona-promo-virus-1{left:10vw; animation:coronaInsideStage 5s linear 1s infinite alternate;}
.corona-promo-virus-2{right:10vw; animation:coronaInsideStage 5s linear 2s infinite alternate;}
@keyframes coronaInsideStage{
  to{transform:translateY(500px);}
}
@keyframes neon {
  from {
    box-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #0052ff,
               0 0 35px #0052ff,
               0 0 40px #0052ff,
               0 0 50px #0052ff,
               0 0 75px #0052ff;
  }
  to {
    box-shadow: 0 0 2px #fff,
               0 0 5px #fff,
               0 0 7px #fff,
               0 0 10px #0052ff,
               0 0 17px #0052ff,
               0 0 20px #0052ff,
               0 0 25px #0052ff,
               0 0 37px #0052ff;
  }
}
@keyframes curtain {
  from{height:100vh; opacity:0;}
   to {height:100vh; opacity:1;}
}
/***** Game Frame *****/
.game-frame{display:none;}
.corona-world{
  width:100vw; height:100vh;
}
/* cursor */
.corona-world,
.corona-virus{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><filter id='grayscale'><feColorMatrix type='saturate' values='0.10'/></filter><text y='50%'>🧼</text></svg>") 16 0,auto; /*!emojicursor.app*/
}
.count-down{
  position:absolute; z-index:22; left:20px; top:20px; font-size:40rem;
  .icon{margin-right:20px;}
  .count{
    font-weight:bold; color:#fff; text-shadow:1px 1px 1px #000;    
    &::before,
    &::after {animation:countdown 100s step-end 1 forwards; content: ""; width:1ch;}
    &::after {animation-duration: 10s; animation-iteration-count:10;}   
  } 
  @media(max-width:500px){top:auto; bottom:20px;}
}
.timer{
  position:fixed; left:0; top:0;
  width:150px; height:10px; background-color:#fff; border:solid 1px #333;
  &::before{
    content:""; width:0px; height:100%; display:block; background-color:var(--common-color2);
    animation:timer 100s linear 0s; animation-fill-mode:forwards;
  }
  @media(max-width:500px){top:auto; bottom:0;}
}
@keyframes countdown {
  0%{   content: "9"}
  10% { content: "8" }
  20% { content: "7" }
  30% { content: "6" }
  40% { content: "5" }
  50% { content: "4" }
  60% { content: "3" }
  70% { content: "2" }
  80% { content: "1" }
  90%, 100% { content: "0" }
}
@keyframes timer{
  0%{width:3%;}
  85%{width:85%; background-color:var(--common-color2);}
  90%{width:90%; background-color:var(--common-color1);}
  100%{width:100%;background-color:var(--common-color1);}
}
/*** Common Virus ***/
.corona-virus{
  --coronaColor:#000;
  position:relative; z-index:10; display:block;
  .body{position:relative; display:block; width:100px; height:100px; border-radius:50%; background-color:var(--coronaColor); opacity:1; transition:0.3s;}
}
/* virus objects position*/
.corona-location{position:absolute; transform:scale(0); will-change:transfrom;}
@for $i from 1 through $amountOfVirus{
  .corona-virus-#{$i}-location{
    animation: coronaLocation#{$i} 10s linear $i * 960ms;
    [class*="eye"]{
      &::after{  
        animation-delay:random(4000) + ms;
      }
    }
  }
  @keyframes coronaLocation#{$i} {
      0% {transform: translateX(-10vw) translateY(random(80) * 1vh) scale( random(5) * 0.1 + 0.3 ) rotate( random(90) - 45 * 1deg );}
      20% {transform: translateX(20vw) translateY(random(80) * 1vh) scale( random(5) * 0.1 + 0.3 ) rotate( random(90) - 45 * 1deg );}
      40% {transform: translateX(40vw) translateY(random(80) * 1vh) scale( random(5) * 0.1 + 0.3 ) rotate( random(90) - 45 * 1deg );}
      60% {transform: translateX(60vw) translateY(random(80) * 1vh) scale( random(5) * 0.1 + 0.3 ) rotate( random(90) - 45 * 1deg );}
      80% {transform: translateX(80vw) translateY(random(80) * 1vh) scale( random(5) * 0.1 + 0.3 ) rotate( random(90) - 45 * 1deg );}
      100%{transform: translateX(110vw) translateY(random(80) * 1vh) scale( random(5) * 0.1 + 0.3 ) rotate( random(90) - 45 * 1deg );}
    } 
}
/*** hairs ***/
[class*="hair"]{
  display:block;
  position:absolute; left:50%; top:50%; margin-left:-4px;
    &::before{content:""; display:block; width:16px; margin-left:-8px; height:5px; border-radius:50%; background-color:var(--coronaColor);}
    &::after{
      position:absolute; left:50%; transform:translateX(-50%);
      content:""; display:block; width:4px; margin-left:-4px; height:20px; background-color:var(--coronaColor);
    }
}

/*hair location*/
$start-position:-180deg;
@for $i from 1 through 12{
  .hair#{$i}{
    $start-position:  $start-position + 30deg;
    transform: rotateZ(#{$start-position}) translateY(-65px); 
    /* only for promo to improve performance */
    animation: hairMove#{$i} 1s linear $i * -60ms infinite alternate;
  }
}
/* hair animation  */
@for $i from 1 through 12{
  $start-position:  $start-position + 30deg;
  @keyframes hairMove#{$i} {
    from {transform:rotateZ(#{$start-position}) translateY(-68px);}
    to {transform:rotateZ(#{$start-position}) translateY(-61px);}
  }  
}

/*** eyes ***/
[class*="eye"]{
  position:absolute; top:25%;
  width:20px; height:26px; background-color:#fff; border-radius:50%;
  &::before{
    position:absolute; top:50%;
    content:""; display:block; width:8px; height:8px; background-color:#000; border-radius:50%;
  }
  &::after{
    content:""; display:block; background-color:var(--coronaColor); height:0px; will-change:height;
    animation: closeEye 4s linear 2s infinite alternate;
  }
}
.eye1{
  left:25%; transform:rotateZ(15deg);
  &::before{left:10%; animation: eyeMove 1s linear 0s infinite alternate;}
}
.eye2{
  right:25%; transform:rotateZ(-15deg);
  &::before{left:10%; animation: eyeMove 1s linear -0.5s infinite alternate;}
}
@keyframes eyeMove{
    0% {transform:translateX(76%) translateY(10%);}
    20% {transform:translateX(50%) translateY(0%);}
    50% {transform:translateX(56%) translateY(30%);}
    70% {transform:translateX(50%) translateY(0%);}
} 

@keyframes closeEye{
  0% { height:0%; }
  90% { height:0%; }
  100% { height:100%; }
}

/** Logics ***/
.logic-checkbox{ opacity:0.001; position:absolute; top:-40px;}
/* popup */
#whoAmIPopup:checked ~ #whoAmI,
#HowToPlayPopup:checked ~ #HowToPlay{display:block;}
/* play game */
#toggleGame{
  &:checked{
    ~ .game-menu-frame{display:none;}
    ~ .game-frame{display:block;}    
  }
}

/* Graphics Level */
#GraphicsLevel{
  ~ .game-menu-frame #GraphicsLevelButton{
    &::before{content:"High ";}
    &::after{content:" 🖥️";}
  }
  &:checked{
    ~ .game-menu-frame #GraphicsLevelButton{
      color:var(--common-color1);
      &::before{content:"Low ";}
      &::after{content:" 📱";}
    }
    ~ * *{
      &[class*="hair"]{animation-play-state:paused;}
      &[class*="eye"]{
        &::before, &::after{animation-play-state:paused;}
      }
    }
  }
}
/* kill corona */
input[type="radio"]{
  opacity:0.001;
  &:checked{
    counter-increment:corona;
    ~ .body {--coronaColor:red; opacity:0;}
  }
}

.sum{
  position:absolute; top:20px; left:50%;
  display:flex; border:solid 4px #fff; border-radius:10px; 
  font-size:40rem; font-weight:bold; color:#fff; transform:translateX(-50%) skewX(-15deg);
  .text {flex:1; padding:10px; text-align:end; background-color:var(--common-color1); border-radius:5px 0 0 5px;}
  &::after{content: counter(corona) "/100"; flex:1; padding:10px; background-color:var(--common-color2); border-radius:0 5px 5px 0;}
}
View Compiled
/* No JS!! 🤪 */

/*
    You can see more of my stuff on my website eladsc.com
    and follow me on twitter.com/eladsc
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://assets.codepen.io/65740/twitter.js