loading.css

body{
    background-color: black;
}

.loading-screen{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
    justify-content: center;
}

.pacman-upper-mouth{
   background-color: yellow;
   height: 150px;
   width: 300px;
   border-top-right-radius: 150px;
   border-top-left-radius: 150px;
   transform-origin: bottom center;
   animation: mouth-top-animation 1.5s linear infinite;
}

.pacman-lower-mouth{
    background-color: yellow;
    height: 150px;
    width: 300px;
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 150px;
    transform-origin: top center;
    animation: mouth-bottom-animation 1.5s linear infinite;
 }

 @keyframes mouth-top-animation {
    50%{
        transform: rotate(-35deg);
    }
 }

 @keyframes mouth-bottom-animation {
    50%{
        transform: rotate(35deg);
    }
 }

 @-webkit-keyframes mouth-top-animation {
    50%{
        transform: rotate(-35deg);
    }
 }

 @-webkit-keyframes mouth-bottom-animation {
    50%{
        transform: rotate(35deg);
    }
 }