body {
    padding: 0;
    margin: 0;
    color: white;
    font-size: 1.5rem;
    font-family: "PokemonFont";
    letter-spacing: 5px;
}

ol {
    margin-bottom: 45px;
}

li {
    width: 300px;
    height: 40px;
}

li div {
    display: flex;
    justify-content: space-between;
}

li:first-child {
    list-style-image: url('/assets/images/sprites/oh-ho.png');
}

li:nth-child(2) {
    list-style-image: url('/assets/images/sprites/lugia.png');
}

li:nth-child(3) {
    list-style-image: url('/assets/images/sprites/articuno.png');
}

li:nth-child(4) {
    list-style-image: url('/assets/images/sprites/zapdos.png');
}

li:nth-child(5) {
    list-style-image: url('/assets/images/sprites/moltres.png');
}

input {
    width: 35%;
    height: 20%;
    border-radius: 20px;
    border: 5px solid black;
    text-transform: uppercase;
    text-align: center;
    margin-top: 15px;
}

.egg, .color-black, li, .end-box {
    color: black;
}

.start-box, .main-menu {
    background-color: #ffcc01;
}

#canvas-game {
    display: flex;
    align-content: space-between;
    align-items: center;
}

.main-menu {
    border: 5px solid black;
    width: 600px;
    height: 750px;
    display: flex;
    margin: auto;
}

canvas {
    border: 5px solid black;
    display: flex;
    margin: auto;
}

#types {
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    height: 60vh;
    gap: 20px;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

.type-image {
    background-position: center;
    background-size: cover;
    position: relative;
    width: 75px;
    height: 75px;
}

.number-format {
    display: flex;
    position: absolute;
    top: 25px;
    left: 60px;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

#statistics {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    width: 100%;
    gap: 50px;
}

.container-format {
    width: 150px;
    height: 150px;
    border: 5px solid black;
    border-radius: 50%;
}

.main-container-format {
    width: 100px;
    height: 100px;
    align-content: space-around;
    border: 5px solid black;
    border-radius: 50%;
}

.margin-top {
    margin-top: 15px;
}

.display-flex-column {
    display: flex;
    flex-direction: column;
}

.display-column {
    flex-direction: column;
}

.start-box {
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.score-box {
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.end-box {
    height: 25%;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
}

.title-score {
    width: 100%;
    height: 180%;
    background-image: url('/assets/images/background/highScores.png');
    background-position: top;
    background-size: cover;
    background-size: 550px;
    margin: auto;
}

.score {
    height: 40%;
    background-image: url('/assets/images/icons/score.png');
    background-position: center;
    background-size: cover;
    background-size: 100px;
    margin: auto;
    margin-bottom: 20px;
}

.score-red {
    height: 50%;
    background-image: url('/assets/images/icons/score-red.png');
    background-position: center;
    background-size: cover;
    background-size: 100px;
    margin: auto;
    margin-bottom: 20px;
}

.menu-green {
    background-image: url('/assets/images/icons/menu.png');
    background-position: center;
    background-size: cover;
    background-size: 100px;
    margin: auto;
    margin-bottom: 20px;
}

.title-game {
    background-image: url('/assets/images/background/poké-game.gif');
    background-position: center;
    background-size: cover;
    height: 150%;
}

.boy {
    background-image: url('/assets/images/icons/male.png');
    background-position: center;
    background-size: cover;
}

.girl {
    background-image: url('/assets/images/icons/female.png');
    background-position: center;
    background-size: cover;
}

.background {
    background-image: url('/assets/images/background/background.png');
    background-position: bottom;
    background-size: cover;
    height: 100vh;
}

.game-over {
    background-image: url('/assets/images/background/gameOver.gif');
    background-position: top;
    background-size: cover;
    background-size: 105%;
    height: 50%;
}

.normal {
    background-image: url('/assets/images/types/normal.png');
}

.fire {
    background-image: url('/assets/images/types/fire.png');
}

.water {
    background-image: url('/assets/images/types/water.png');
}

.electric {
    background-image: url('/assets/images/types/electric.png');
}

.grass {
    background-image: url('/assets/images/types/grass.png');
}

.ice {
    background-image: url('/assets/images/types/ice.png');
}

.fighting {
    background-image: url('/assets/images/types/fighting.png');
}

.poison {
    background-image: url('/assets/images/types/poison.png');
}

.ground {
    background-image: url('/assets/images/types/ground.png');
}

.flying {
    background-image: url('/assets/images/types/flying.png');
}

.psychic {
    background-image: url('/assets/images/types/psychic.png');
}

.bug {
    background-image: url('/assets/images/types/bug.png');
}

.rock {
    background-image: url('/assets/images/types/rock.png');
}

.ghost {
    background-image: url('/assets/images/types/ghost.png');
}

.dragon {
    background-image: url('/assets/images/types/dragon.png');
}

.dark {
    background-image: url('/assets/images/types/dark.png');
}

.steel {
    background-image: url('/assets/images/types/steel.png');
}

.fairy {
    background-image: url('/assets/images/types/fairy.png');
}

.pokeball {
    background-image: url('/assets/images/background/pokeball.png');
    background-position: center;
    background-size: cover;
}