@font-face {
    font-family: 'Dimbo';
    src: url('../font/dimbo/DimboRegular.eot');
    src: url('../font/dimbo/DimboRegular.eot?#iefix') format('embedded-opentype'),
        url('../ont/dimbo/DimboRegular.woff2') format('woff2'),
        url('../font/dimbo/DimboRegular.woff') format('woff'),
        url('../font/dimbo/DimboRegular.ttf') format('truetype'),
        url('../font/dimbo/DimboRegular.svg#DimboRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Dimbo';
    font-weight: normal;
    font-style: normal;
}

:root {
    --pacman-color: #ffff00;
    --pacman-mouth-color: black;
    --pacman-die-color: black;
    --food-color: #fab9b0;
    --background-color: black;
    --huntedghost-color: #2121ff;
    --redghost-color: #ff0000;
    --pinkghost-color: #fcb5ff;
    --cyanghost-color: #00ffff;
    --orangeghost-color: #f8bb55;
    --bigfood-y-position: 0;
    --eated-thing-transition: none;
    --pacman-transition: 2s ease-in-out;
    --bigfood-animationduration: 3333ms;
}

@keyframes eat {
    0% {
        border-top: 5em solid transparent;
        border-bottom: 5em solid transparent;
        border-right: 6em solid var(--pacman-mouth-color);
        margin-right: -1em;
    }
    100% {
        border-top: 0px solid transparent;
        border-bottom: 0px solid transparent;
        border-right: 6.2em solid var(--pacman-mouth-color);
        margin-right: -1.2em;
    }
}

@keyframes pacman-die{
    0% {
        background-color: transparent;
        overflow: hidden;
    }
    50%{
        background-color: transparent;
        overflow: hidden;
    }
    50.01%{
        overflow: visible;
        background-color: var(--pacman-color);
    }
    100%{
        overflow: visible;
        background-color: var(--pacman-color);
    }

}

@keyframes die-left {
    0% {
        transform: rotate(0deg) translateX(0%);
        background: var(--pacman-color);
    }
    50%{
        transform: rotate(-90deg) translateX(-50%);
        background: var(--pacman-color);
    }
    50.01%{
        transform: rotate(-90deg) translateX(50%);
        background: var(--pacman-die-color);
    }
    100% {
        transform: rotate(-180deg) translateX(0%);
        background: var(--pacman-die-color);
    }
}

@keyframes die-right {
    0% {
        transform: rotate(0deg) translateX(0%);
        background: var(--pacman-color);
    }
    50%{
        transform: rotate(90deg) translateX(50%);
        background: var(--pacman-color);
    }
    50.01%{
        transform: rotate(90deg) translateX(-50%);
        background: var(--pacman-die-color);
    }
    100% {
        transform: rotate(180deg) translateX(0%);
        background: var(--pacman-die-color);
    }
}

@keyframes ghost-wiggle {
    0% {
        margin-left: -5px;
    }
    100% {
        margin-left: -15px;
    }
}

@keyframes bigfood-move {
    0% {
        transform: translateY(50vh);
    }
    100% {
        top: 0;
    }
}

body {
    background: var(--background-color);
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-areas:
                        ". . ."
                        "topleft-wall . topright-wall"
                        "startposition-box startposition-box startposition-box"
                        "bottomleft-wall . bottomright-wall"
                        ". . .";
    grid-template-columns: 1fr 4em 1fr;
    grid-template-rows: 1fr 4em 10em 4em 1fr;
    height: 100vh;
    gap: 1em;
    width: 100vw;
    overflow: hidden !important;
  }

#startposition-box {
    grid-area: startposition-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8em;
}

#pacman-startposition{
    position: relative;
    width: 10em;
    height: 10em;
    background-color: transparent;
}

#pacman{
    z-index: 10;
    position: absolute;
    width: 10em;
    height: 10em;
    left: var(--pacman-location-left);
    transition: var(--pacman-transition);
}

#pacman-body, #pacman-die {
    width: 10em;
    height: 10em;
    display: flex;
    justify-content: end;
    align-items: center;
    background: var(--pacman-color);
    border-radius: 50%
}

#pacman-die{
    left: var(--pacman-location-left);
    transition: var(--pacman-transition);
    position: absolute;
    overflow: hidden;
    background-color: transparent;
}

#pacman-mouth {
    width: 0;
    height: 0;
    border-top: 5em solid transparent;
    border-bottom: 5em solid transparent;
    border-right: 5.1em solid var(--pacman-mouth-color);
    margin-right: -0.1em;
    border-radius: 50%;
    animation-name: eat;
    animation-duration: 250ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    transition: 500ms linear;
}


#food-box {
    align-items: center;
    justify-self: center;
    gap: 3em;
    display: flex;
}

#bigfood-startposition, #food1-startposition, #food2-startposition, #food3-startposition, #food4-startposition, #food5-startposition, #food6-startposition {
    position: relative;
    width: 2em;
    height: 2em;
    background-color: transparent;
}

#bigfood-startposition {
    width: 4em;
    height: 4em;
}

#bigfood, #food1, #food2, #food3, #food4, #food5, #food6{
    position: absolute;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--food-color);
    z-index: 100;
    transition: var(--eated-thing-transition);
}

#bigfood{
    width: 4em;
    height: 4em;
    animation-name: bigfood-move;
    animation-duration: var(--bigfood-animationduration);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-delay: 100ms;

}

#ghost-startposition {
    position: relative;
    width: 10em;
    height: 10em;
    background-color: transparent;
}

#ghost {
    position: absolute;
    width: 10em;
    height: 10em;
    background: var(--redghost-color);
    animation-name: ghost-changecolor;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    border-radius:50% 50% 0 0;
    z-index: 100;
    transition: var(--eated-thing-transition);
}

#ghost_tail {
    position: absolute;
    bottom: -2em;
    display: flex;
    animation-name: ghost-wiggle;
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    transition: 500ms linear;
}

#ghost_eyes-normal {
    margin-left: 0.5em;
    gap: 1em;
    margin-top: 2em;
    align-items: center;
    display: flex;   
}

.ghost_eye-normal {
    min-width: 3em;
    width: 3em;
    height: 4em;
    padding-left: 0.1em;
    padding-top: 0.5em;
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: white;
    border-radius: 50%;
}

#ghost_eyes-hunted {
    gap: 2em;
    margin-top: 2em;
    display: flex;
    justify-content: center; 
    align-items: center;
}

.ghost_eye-hunted {
    background-color: var(--food-color);
    width: 2em;
    height: 2em;
    border-radius: 50%;
}

#ghost_mouth {
    margin-top: 1em;
    height: 2em;
    background:  
      linear-gradient(135deg, var(--huntedghost-color) 35%, transparent 25%) -1em 0,
      linear-gradient(225deg, var(--huntedghost-color) 35%, transparent 25%) -1em 0,
      linear-gradient(315deg, var(--huntedghost-color) 35%, transparent 25%),
      linear-gradient(45deg, var(--huntedghost-color) 35%, transparent 25%);   
    background-size: 2em 2em;
    border-radius: 50%;
    background-color: var(--food-color);
}

.ghost_pupil{
    width: 1.2em;
    height: 1.3em;
    background-color: black;
    border-radius: 50%;
}

.ghost_tailpiece {    
    transform: rotate(45deg);
    width: 3em;
    height: 3em;
    background-color: var(--background-color);
}

#board{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 1em;
    left: 1em;
}

#scoreboard{
    color: white;
    text-align: justify;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.3em;
    grid-column-start: 1;
    grid-column-end: 3;
}

#scoreboard p {
    font-size: 1.5em;
    font-weight: normal;
    font-style: normal;
}

#lives{
    display: flex;
    width: 8em;
    gap: 1em;
    margin-top: 1em;
}

#life1, #life2, #life3{
    height: 2em;
    width: 2em;
    display: block;
}

#pacman-die-left, #pacman-die-right{
    width: 5em;
    height: 12em;
    background: var(--pacman-color);
}

#pacman-die, #pacman-die-left, #pacman-die-right{
    animation-name: die-left;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

#pacman-die-right{
    animation-name: die-right;
}

#pacman-die {
    animation-name: pacman-die;
}

div.paused{
    animation-play-state: paused;
}

div.play{
    animation-play-state: running;
}

#centernotification {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4em;
    z-index: 1000;
}

#topleft-wall, #topright-wall, #bottomleft-wall, #bottomright-wall 
{
    grid-area: topleft-wall;
    border: 0.25em solid blue;
    background-color: black;
    border-radius: 0 1em 1em 0;
    width: 100%;
    height: 100%;
    border-left: none;
    z-index: 1000;
}

#bottomleft-wall {
    grid-area: bottomleft-wall;
}

#topright-wall, #bottomright-wall
{
    border-radius: 1em 0 0 1em;
    grid-area: topright-wall;
    border: 0.25em solid blue;
    border-right: none;
}

#bottomright-wall {
    grid-area: bottomright-wall;
}