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

body {
    background-color: black;
    font-family: 'Press Start';
    color: white;
    margin: 0;
}

/* This is for the nav and logo */
header {
    text-align: center;
}

nav {
    padding-top: 1%;
}

header img {
    width: 50%;
    padding: 2%;
}

a {
    text-decoration: none;
    color: white;
    padding-left: 2.5%;
    padding-right: 2.5%;
    font-size: 1.25vw;
    text-transform: uppercase;
}

/* This is for the home page */

h2 {
    font-size: 2vw;
    text-transform: uppercase;
}

#home {
    text-align: center;
    border-bottom-style: solid;
    border-color: gold;
    width: 100%;
    overflow-x: hidden;
}

#home img {
    width: 4%;
  	height: 4%
}

.animation {
    padding-top: 5%;
    display: flex;
    animation-name: move;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    position: relative;
    animation-timing-function: linear;
}

    /* This is animating the chasing motion */

    @keyframes move {
        0% {
            left: 100%;
        }
        100% {
            left: -35%;
        }
    }

.ghosts {
    padding-left: 1%;
}

.pacman {
    transform: rotate(180deg);
    padding-left: 10%;
}

    /* This is animating the blinking*/

    @keyframes flash {
        0% {
            opacity: 100%;
        }
        100% {
            opacity: 0%;
        }
    }

#home h2 {
    padding-top: 5%;
    padding-bottom: 15%;
    animation-name: flash;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

/* This is for the highscores page */

#highscores {
    border-bottom-style: solid;
    border-color: gold;
    text-align: center;
    margin-top: 8%;
}

#highscores h1 {
    color: gold;
    font-size: 3vw;
}

#highscores h2 {
    margin: 0;
}

#highscores h3 {
    font-size: 2vw;
}

.title {
    padding-bottom: 6%;
    padding-top: 2%;
}

.scoreboard {
    padding: 2%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-transform: uppercase;
    margin-bottom: 5%;
}

    /* This changes the highscore colors */
    .scoreboard h3:nth-child(4n-2) {
        color: gold;
    }

    .scoreboard h3:nth-child(4n-1) {
        color: red;
    }

    .scoreboard h3:nth-child(4n+0) {
        color: aqua;
    }

    .scoreboard h3:nth-child(4n+1) {
        color: hotpink;
    }

/* This is for the how to play page */

#howtoplay {
    border-bottom-style: solid;
    border-color: gold;
    text-align: center;
    width: 100%;
    overflow-x: hidden;
}

.display {
    margin-top: 15%;
    margin-bottom: 6%;
    animation-name: move2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    position: relative;
    animation-timing-function: linear;
}

.pacman2 {
    padding-right: 10%;
}

    /* This is animating the chasing motion */

    @keyframes move2 {
        0% {
            left: -70%;
        }
        100% {
            left: 100%;
        }
    }

#howtoplay h1 {
    text-transform: uppercase;
    font-size: 2vw;
    margin-top: 2%;
    margin-bottom: 0%;
}

#howtoplay img {
    width: 4%;
}

.yellow {
    color: gold;
}

#howtoplay p {
    font-size: 2vw;
    margin: 0%;
    padding: 1%;
}

.text {
    width: 80%;
    margin: auto;
    margin-bottom: 15%;
}

/* This is for the players page */

#players {
    text-align: center;
    text-transform: uppercase;
    margin-top: 15%;
    margin-bottom: 15%;
}

#players h1 {
    font-size: 2vw;
}

#players span {
    font-size: 2vw;
}

#players img {
    width: 4%;
}

.blinky {
    color: red;
    margin: 4%;
    height: 5%;
}

.pinky {
    color: hotpink;
    margin: 4%;
}

.inky {
    color: aqua;
    margin: 4%;
}

.clyde {
    color: orange;
    margin: 4%;
}

.name {
    padding-left: 5%;
}

.ghostpoint {
    margin: 4%;
}

.ghosty {
    padding-left: 2.5%;
}

.squarepoint {
    margin: 4%;
}

.squarepoint span {
    padding-right: 2.5%;
}

.dotpoint {
    margin: 4%;
}

.dotpoint span {
    padding-right: 2.5%;
}

.square {
    height: 2vw;
    width: 2vw;
    background-color: gold;
    display: inline-block;
}

.dot {
    height: 0.5vw;
    width: 0.5vw;
    background-color: gold;
    display: inline-block;]
}

/* This is for the footer */

footer {
    text-align: center;
    text-transform: uppercase;
}

footer h4 {
    font-size: 1vw;
}