@font-face {
    font-family: "RETRO";
    src: url(retro_gaming/RetroGaming.ttf);
}
body {
    background-image: url(Images/Background.jpg); 
    background-size: cover; 
  
}
#gameover {
    position: absolute;
    top: 300px;
    left: 67px;
    display: none;
}
#blackscreen {
    background-color: rgb(9, 9, 9);
    height: 600px;
    width: 600px;
    left: 67px;
    top: 82px;
    position: absolute;
    opacity: .8;
    display: none;
}
#timer{
    height: 120px;
    width: 150px;
    position: fixed;
    top: 100px;
    right: 30px;
    padding: 1px 20px;
    color: black;
        font-size: 1em;
    background-color: aliceblue;
    border-radius: 20px;
    font-family: "RETRO";
    box-shadow: 5px 5px 5px #222;

}
#countdown {
    position: fixed;
    top: 150px;
    color: rgb(255, 0, 0);
    display: none;
    font-family: "RETRO";
    font-size: larger;
}
#gameover{
    rotate: 90deg;
}
#Easter{
    width: 60px;
    margin-top: 100px;
    position: relative;
    box-shadow: #222;
}
h5{
    font-family: "RETRO";
    font-size: xx-large;
    color: white;
    text-shadow: #222;
    margin-top: 300px;
    margin-left: 30px;
    padding: auto;
    position: absolute;
}
h4{
    font-family: "RETRO";
    font-size: large;
    color: white;
    text-shadow: #222;
    margin-top: 300px;
    margin-left: 30px;
    padding: auto;
    position: absolute;
}
#gameboard {
    height: 600px;
    width: 600px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
    background-image: url(Images/Space.gif);
    border-color: white;
    border: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    rotate: -90deg;
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}

#Object1{
position: absolute;
left: 10px;
top: 550px;
transition: 1s;
animation-name: path1;
animation-duration: 10s;
animation-play-state: running;
animation-iteration-count: infinite;
width: 60px;
}
#Object1:hover {
opacity: .2;
    }
#Object1:active {
    content: url(Images/Explosion_resize.gif);
}

#Object2 {
    position: absolute;
    left: 10px;
    top: 550px;
    width: 55px;
    transition: 1s;
    animation-name: path2;
    animation-duration: 10s;
    animation-play-state: running;
    animation-iteration-count: infinite;
    }
#Object2:hover {
opacity: .2;
}
#Object2:active {
    content: url(Images/Explosion_resize.gif);
}

#Object3{
    position: absolute;
    left: 10px;
    top: 550px;
    transition: 1s;
    animation-name: path3;
    animation-duration: 10s;
    animation-play-state: running;
    animation-iteration-count: infinite;
    width: 65px;
            }
#Object3:hover {
    opacity: .2;
        }
#Object3:active {
    content: url(Images/Explosion_resize.gif);
}

#Object4{
    position: absolute;
    left: 10px;
    top: 550px;
    transition: 1s;
    animation-name: path4;
    animation-duration: 10s;
    animation-play-state: running;
    animation-iteration-count: infinite;
    width: 80px;
    }
    #Object4:hover {
    opacity: .2;
        }
#Object4:active {
    content: url(Images/Explosion_resize.gif);
}

#Object5{
    position: absolute;
    left: 10px;
    top: 550px;
    transition: 1s;
    animation-name: path5;
    animation-duration: 10s;
    animation-play-state: running;
    animation-iteration-count: infinite;
    width: 70px;
    }
#Object5:hover {
    opacity: .2;
        }
#Object5:active {
    content: url(Images/Explosion_resize.gif);
}

#Object6{
    position: absolute;
    left: 10px;
    top: 550px;
    transition: 1s;
    animation-name: path6;
    animation-duration: 10s;
    animation-play-state: running;
    animation-iteration-count: infinite;
    width: 40px;
    }
#Object6:hover {
opacity: .2;
    }
#Object6:active {
    content: url(Images/Explosion_Purple.gif);
}

#score {
    height: 120px;
    width: 250px;
    position: fixed;
    top: 500px;
    left: 30px;
    padding: 1px 20px;
    color: black;
        font-size: 1em;
    background-color: aliceblue;
    border-radius: 20px;
    font-family: "RETRO";
    box-shadow: 5px 5px 5px #222;
}

#VolumeSettings {
    height: 100px;
    width: 200px;
    position: fixed;
    top: 500px;
    right: 30px;
    padding: 1px 20px;
    color: black;
        font-size: 1em;
    background-color: aliceblue;
    border-radius: 20px;
    font-family: "RETRO";
    box-shadow: 5px 5px 5px #222;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
      }

#Title{
    width: 400px;
    border-radius: 50px;
    position: absolute;
}

@keyframes path1 {
    0%  {margin-top: -300px; margin-left: -300px;}
    20% {margin-top: -150px; margin-left: 100px;}
    40% {margin-top: -300px; margin-left: 300px;}
    60% {margin-top: -400px; margin-left: 450px;}
    80% {margin-top: -500px; margin-left: 500px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }
   @keyframes path12 {
    0%  {margin-top: -300px; margin-left: -300px;}
    20% {margin-top: -150px; margin-left: 100px;}
    40% {margin-top: -300px; margin-left: 300px;}
    60% {margin-top: -400px; margin-left: 450px;}
    80% {margin-top: -500px; margin-left: 500px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }

   @keyframes path2 {
    0%  {margin-top: -300px; margin-left: -300px;}
    20% {margin-top: -300px; margin-left: -300px;}
    30% {margin-top: -250px; margin-left: 400px;}
    40% {margin-top: -300px; margin-left: 500px;}
    50% {margin-top: -100px; margin-left: 205px;}
    60% {margin-top: -350px; margin-left: 200px;}
    70% {margin-top: -250px; margin-left: 360px;}
    80% {margin-top: -350px; margin-left: 120px;}
   90%  {margin-top: -500px; margin-left: 200px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }
   @keyframes path22 {
    0%  {margin-top: -300px; margin-left: -300px;}
    20% {margin-top: -300px; margin-left: -300px;}
    30% {margin-top: -250px; margin-left: 400px;}
    40% {margin-top: -300px; margin-left: 500px;}
    50% {margin-top: -100px; margin-left: 205px;}
    60% {margin-top: -350px; margin-left: 200px;}
    70% {margin-top: -250px; margin-left: 360px;}
    80% {margin-top: -350px; margin-left: 120px;}
   90%  {margin-top: -500px; margin-left: 200px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }

   @keyframes path3 {
    0%  {margin-top: -300px; margin-left: -300px;}
    30% {margin-top: -300px; margin-left: -300px;}
    40% {margin-top: -400px; margin-left: 400px;}
    50% {margin-top: -320px; margin-left: 500px;}
    60% {margin-top: -180px; margin-left: 135px;}
    70% {margin-top: -425px; margin-left: 246px;}
    80% {margin-top: -145px; margin-left: 435px;}
   90%  {margin-top: -400px; margin-left: 300px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }
   @keyframes path32 {
    0%  {margin-top: -300px; margin-left: -300px;}
    30% {margin-top: -300px; margin-left: -300px;}
    40% {margin-top: -400px; margin-left: 400px;}
    50% {margin-top: -320px; margin-left: 500px;}
    60% {margin-top: -180px; margin-left: 135px;}
    70% {margin-top: -425px; margin-left: 246px;}
    80% {margin-top: -145px; margin-left: 435px;}
   90%  {margin-top: -400px; margin-left: 300px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }

   @keyframes path4 {
    0%  {margin-top: -300px; margin-left: -300px;}
    40% {margin-top: -300px; margin-left: -300px;}
    50% {margin-top: -500px; margin-left: 100px;}
    55% {margin-top: -100px; margin-left: 500px;}
    60% {margin-top: -300px; margin-left: 100px;}
    70% {margin-top: -480px; margin-left: 400px;}
    80% {margin-top: -60px; margin-left: 100px;}
   90%  {margin-top: -350px; margin-left: 450px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }
   @keyframes path42 {
    0%  {margin-top: -300px; margin-left: -300px;}
    40% {margin-top: -300px; margin-left: -300px;}
    50% {margin-top: -500px; margin-left: 100px;}
    55% {margin-top: -100px; margin-left: 500px;}
    60% {margin-top: -300px; margin-left: 100px;}
    70% {margin-top: -480px; margin-left: 400px;}
    80% {margin-top: -60px; margin-left: 100px;}
   90%  {margin-top: -350px; margin-left: 450px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }

   @keyframes path5 {
    0%  {margin-top: -300px; margin-left: -100px;}
    50% {margin-top: -300px; margin-left: -300px;}
    60% {margin-top: -150px; margin-left: 400px;}
    65% {margin-top: -450px; margin-left: 120px;}
    70% {margin-top: -200px; margin-left: 300px;}
    75% {margin-top: -500px; margin-left: 400px;}
    77% {margin-top: -280px; margin-left: 320px;}
    80% {margin-top: -500px; margin-left: 202px;}
    85% {margin-top: -180px; margin-left: 500px;}
    90% {margin-top: -300px; margin-left: 180px;}
    93% {margin-top: -75px; margin-left: 75px;}
    97% {margin-top: -500px; margin-left: 350px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }
   @keyframes path52 {
    0%  {margin-top: -300px; margin-left: -100px;}
    50% {margin-top: -300px; margin-left: -300px;}
    60% {margin-top: -150px; margin-left: 400px;}
    65% {margin-top: -450px; margin-left: 120px;}
    70% {margin-top: -200px; margin-left: 300px;}
    75% {margin-top: -500px; margin-left: 400px;}
    77% {margin-top: -280px; margin-left: 320px;}
    80% {margin-top: -500px; margin-left: 202px;}
    85% {margin-top: -180px; margin-left: 500px;}
    90% {margin-top: -300px; margin-left: 180px;}
    93% {margin-top: -75px; margin-left: 75px;}
    97% {margin-top: -500px; margin-left: 350px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }

   @keyframes path6 {
    0%  {margin-top: -300px; margin-left: -300px;}
    60% {margin-top: -300px; margin-left: -100px;}
    70% {margin-top: -300px; margin-left: 300px;}
    72% {margin-top: -350px; margin-left: 200px;}
    75% {margin-top: -100px; margin-left: 500px;}
    77% {margin-top: -170px; margin-left: 220px;}
    80% {margin-top: -200px; margin-left: 550px;}
    82% {margin-top: -300px; margin-left: 300px;}
    85% {margin-top: -50px; margin-left: 50px;}
    88% {margin-top: -400px; margin-left: 120px;}
    90% {margin-top: -350px; margin-left: 100px;}
    93% {margin-top: -200px; margin-left: 450px;}
    95% {margin-top: -250px; margin-left: 310px;}
    98% {margin-top: -460px; margin-left: 100px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }
   @keyframes path62 {
    0%  {margin-top: -300px; margin-left: -300px;}
    60% {margin-top: -300px; margin-left: -100px;}
    70% {margin-top: -300px; margin-left: 300px;}
    72% {margin-top: -350px; margin-left: 200px;}
    75% {margin-top: -100px; margin-left: 500px;}
    77% {margin-top: -170px; margin-left: 220px;}
    80% {margin-top: -200px; margin-left: 550px;}
    82% {margin-top: -300px; margin-left: 300px;}
    85% {margin-top: -50px; margin-left: 50px;}
    88% {margin-top: -400px; margin-left: 120px;}
    90% {margin-top: -350px; margin-left: 100px;}
    93% {margin-top: -200px; margin-left: 450px;}
    95% {margin-top: -250px; margin-left: 310px;}
    98% {margin-top: -460px; margin-left: 100px;}
   100% {margin-top: -300px; margin-left: -300px;}
   }