@font-face {
    font-family: 'Press Start';
    src: url(../fonts/prstartk.ttf);
}

html {
    background-color: black;
    color: white;
    font-family: 'Press Start';
    margin: 0px;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.nav {
    padding-top: 30px;
    text-align: center;
}

.nav ol li {
    display: inline-block;
    text-align: center;
}

.nav ol li a {
    text-decoration: none;
    color: white;
    padding: 50px;
}

.nav :hover {
    transition: .5s;
    color: #ffe218;;
}

/*-----------------------------------------Header--*/

.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 75px;
}

.header_animation {
    animation-name: run-away;
    animation-duration: 13s;
    animation-iteration-count: infinite;
}

@keyframes run-away { 
    0% {
        transform: translate(1700px, 0px);
    }

    100% {
        transform: translate(-900px, 0px); /** X, Y **/
    }
}

.header_animation img {
    max-height: 75px;
    padding: 20px;
}

.pac-man1 {
    transform: rotate(180deg);
    margin-right: 100px;
    float: left;
}

.header h1 {
    font-size: 30px;
    text-align: center;
    margin: 150px;

    animation-name: insert_coins;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


@keyframes insert_coins { 
    0% {
        color: white;
    }

    50% {
        color: transparent;
    }

    100% {
        color: white;
    }
}


/*-------------------------------------High Scores--*/


.scores h1 {
    font-size: 40px;
    color: #ffe218;
    margin-bottom: 40px;
    text-align: center;
}

.scores h2 {
    font-size: 30px;
    padding: 40px;
    text-align: center;
}

.scores table {
    display: flex;
    justify-content: center;
    font-size: 25px;
}

.scores table td {
    padding-left: 200px;
    text-align: center;
}

.scores table td:nth-child(1) {
    padding-left: 0px;
}

.scores table tr:nth-child(4n+2) {
    color: #fcb100;
}

.scores table tr:nth-child(4n+3) {
    color: #ff3900;
}

.scores table tr:nth-child(4n+4) {
    color: #04e4e3;
}

.scores table tr:nth-child(4n+5) {
    color: #ff60b0;
}

/*-------------------------------------Instructions--*/

.instructions_animation img {
    max-height: 75px;
    padding: 20px;
    margin-top: 150px;
    margin-bottom: 150px;
}

.instructions_animation {
    animation-name: chase;
    animation-duration: 13s;
    animation-iteration-count: infinite;
}

@keyframes chase { 
    0% {
        transform: translate(-700px, 0px);
    }

    100% {
        transform: translate(1700px, 0px); /** X, Y **/
    }
}

.pac-man2 {
    margin-right: 100px;
}

.instructions h1 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 60px;
}

.instructions h2 {
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-size: 30px;
    text-align: center;
    color: #ffd300;
}

.instructions p {
    padding-top: 0px;
    margin-top: 0px;
    font-size: 30px;
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    padding-bottom: 150px;
}

/*------------------------------------------Players--*/

.players h1 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 20px;
}

.players table img {
    max-height: 80px;
    padding-left: 60px;
    transform: scaleX(-1);
}

.players table {
    font-size: 25px;
    display: flex;
    justify-content: center;
    margin-right: 80px;
    padding-bottom: 60px;
}

.players table tr:nth-of-type(2) {
    color: #f44003;
}

.players table tr:nth-of-type(3) {
    color: #ff60b0;
}

.players table tr:nth-of-type(4) {
    color: #03f5f6
}

.players table tr:nth-of-type(5) {
    color: #fcb100;
}

/*----------------------------------Players, Section--*/


.players section {
    margin-left: 400px;
    margin-right: 400px;

}

.players h3 {
    font-size: 25px;
    margin-right: 20px;
    float: left;
    
}

.eaten2 {
    padding-bottom: 50px;
    max-height: 75px;
}

.pts50 {
    background-color: #faee40;
    width: 50px;
    height: 50px;
    margin: 10px;
    display: flex;
    margin-bottom: 50px;
}

.pts10 {
    background-color: #faee40;
    width: 20px;
    height: 20px;
    margin: 10px;
    display: flex;
    margin-bottom: 50px;
    margin-top: 25px;
}

/*-------------------------------------------Footer--*/

.footer {
    font-size: 12px;
    text-align: center;
    margin-top: 40px;
}