.blinky{
    background-color: red;
    border: 25%;
    height: 100px;
    width: 150px;
    position: absolute;
    left: 25%;
    animation: moveleft 10s ease-in-out 0.5s infinite;
    visibility: hidden;
}
.blinky-body{
    background-color: red;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    top: -65px;
    position: relative;
}
.blinky-eye-right{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -215px;
    position: relative;
    left: 25px;
}
.blinky-eye-left{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -165px;
    position: relative;
    left: 90px;
}
.eye{
    background-color: blue;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    left: 8px;
    top: 10px;
    position: relative;
}
/*inky*/

.inky{
    background-color: pink;
    border: 25%;
    height: 100px;
    width: 150px;
    position: absolute;
    left: 55%;
    animation: moveleft 10s ease-in-out 1s infinite;
    visibility: hidden;
}
.inky-body{
    background-color: pink;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    top: -65px;
    position: relative;
}
.inky-eye-right{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -215px;
    position: relative;
    left: 25px;
}
.inky-eye-left{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -165px;
    position: relative;
    left: 90px;
}
.eye{
    background-color: blue;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    left: 8px;
    top: 10px;
    position: relative;
}
/*pinky*/

.pinky{
    background-color: cyan;
    border: 25%;
    height: 100px;
    width: 150px;
    position: absolute;
    left: 40%;
    animation: moveleft 10s ease-in-out 1.3s infinite;
    visibility: hidden;
}
.pinky-body{
    background-color: cyan;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    top: -65px;
    position: relative;
}
.pinky-eye-right{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -215px;
    position: relative;
    left: 25px;
}
.pinky-eye-left{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -165px;
    position: relative;
    left: 90px;
}
.eye{
    background-color: blue;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    left: 8px;
    top: 10px;
    position: relative;
}
/*clyde*/

.clyde{
    background-color: orange;
    border: 25%;
    height: 100px;
    width: 150px;
    position: absolute;
    left: 70%;
    animation: moveright 10s ease-in-out 4s infinite;
    visibility: hidden;
}
.clyde-body{
    background-color: orange;
    border-radius: 50%;
    height: 150px;  
    width: 150px;
    top: -65px;
    position: relative;
}
.clyde-eye-right{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -215px;
    position: relative;
    left: 25px;
}
.clyde-eye-left{
    background-color: white;
    border-radius: 50%;
    height: 50px;
    width: 30px;
    top: -165px;
    position: relative;
    left: 90px;
}
.eye{
    background-color: blue;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    left: 8px;
    top: 10px;
    position: relative;
}




.pacman-killorb{
    position: absolute;
    background-color: yellow;
    border-radius: 50%;
    height: 75px;
    width: 75px;
}





.pacman-point1{
    position: absolute;
    background-color: yellow;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    top: 25%;
    animation: eatpellets 4s;
    left: 13.33%;
    visibility: hidden;
    }
.pacman-point2{
    position: absolute;
    background-color: yellow;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    top: 25%;
    animation: eatpellets 4.3s;
    left: 26.66%;
    visibility: hidden;
}
.pacman-point3{
    position: absolute;
    background-color: yellow;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    top: 25%;
    animation: eatpellets 4.6s;
    left: 39.99%;
    visibility: hidden;
}
.pacman-point4{
    position: absolute;
    background-color: yellow;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    top: 25%;
    animation: eatpellets 4.9s;
    left: 55.33%;
    visibility: hidden;
}
.pacman-point5{
    position: absolute;
    background-color: yellow;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    top: 25%;
    animation: eatpellets 5.1s ;
    left: 69.99%;
    visibility: hidden;
}
.pacman-point6{
    position: absolute;
    background-color: yellow;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    top: 25%;
    animation: eatpellets 5.3s;
    left: 83.33%;
    visibility: hidden;
}





.pacman-blue-stripe1{
    background-color: blue;
    height: 9px;
    position: absolute;
    top: 12%;
    width: 100%;
}
.pacman-blue-stripe2{
    background-color: blue;
    height: 9px;
    position: absolute;
    top: 9%;
    width: 100%;
}
.pacman-blue-stripe3{
    background-color: blue;
    height: 9px;
    position: absolute;
    top: 40%;
    width: 100%;
}
.pacman-blue-stripe4{
    background-color: blue;
    height: 9px;
    position: absolute;
    top: 43%;
    width: 100%;
}

.pacman-text{
    color: white;
    margin-top: 15%;
}



.button-pacman-more{
    margin: 2%;
    background-color: rgb(137, 15, 15);
    height: 200px;
    position: fixed;
    width: 200px;
    text-align: center;
    top: 75%;
    border-radius: 50%;
    color: aliceblue;
}
.button-pacman-more:hover{
    color: aliceblue;
    background-color: rgb(181, 20, 20);
}
.button-pacman-characters{
    margin: 2%;
    background-color: rgb(137, 15, 15);
    height: 200px;
    position: fixed;
    width: 200px;
    text-align: center;
    top: 80%;
    left: 250px;
    border-radius: 50%;
    color: aliceblue;
    
}
.button-pacman-characters:hover{
    color: aliceblue;
    background-color: rgb(181, 20, 20);
}


.cherry-pacman{
    top: 60%;
    position: absolute;
    z-index: -99px;
}
h6{
    margin-top: 45%;
    font-size: x-large;
}
.green-cherry-pacman1{
    height: 300px;
    width: 65px;
    rotate: 35deg;
    position: absolute;
    background-color: green;
    left: 200px;
    top: 24%;
    z-index: -1;
}
.green-cherry-pacman2{
    height: 300px;
    width: 65px;
    rotate: -10deg;
    position: absolute;
    background-color: green;
    left: 315px;
    top: 24%;
    z-index: -1;
}






#pacmanCanvas{
    position: relative;
    visibility: hidden;
    z-index: 2;
    overflow-y: hidden;
    animation: pacman 10s ease infinite;

/*animation: name duration timing-function delay iteration-count direction fill-mode;*/
}
.pacman{
    position: relative;
    top: 25%;
    height: 100px;
    width: 100px;
    animation: pacman 10s ease-in-out 0s infinite;   
}
@keyframes moveleft {
    0% {left: -100%; top: 25%; visibility: visible;}
    100% {left: 200%;top: 25%; visibility: hidden;}
}
@keyframes pacman {
    0% {left: -100%; top: 70%; visibility: visible;}
    100% {left: 200%;top: 70%; visibility: hidden;}
}
@keyframes moveright {
    0% {left:200%;top: 25%; visibility: visible;}
    100% {left: -100%;top: 25%; visibility: hidden;}
}
@keyframes rotate-pacman {
    0% {rotate: 0deg;}
    100% {rotate :180deg;}
}
@keyframes eatpellets {
    0% {visibility: visible;}
    100% {visibility: hidden;}
}
@keyframes powerpellet {
    0% {color: blue;}
    49%{color: blue;}
    50% {background-color: rgb(47, 47, 235);}
}
body{
    background-color: black;
    overflow: hidden;
}