* {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

    /* border: 1px solid blue; */
}

body {
    background-color: #2b2b2b;
}

/* Styling for navigation */

.nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 64px;
    
    background-color: #ef5350;
    color: white;
}

.nav-title {
    font-size: 28px;
    padding: 8px 16px;
}

.nav-title:hover {
    cursor: pointer;
}

/* Styling for Pokedex */

.pokedex-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 64px;
    margin-bottom: 64px;
    color: white;
}

.pokedex-table {
    table-layout: fixed;
    width: 60%;
    margin-bottom: 24px;
}

.pokedex-title-row {
    background-color: #ef5350;
    color: white;
}

.pokedex-title {
    border-radius: 6px;
}

.dex-title {
    font-size: 24px;
    text-align: center;
}

.pokemon-row {
    background-color: #3d3d3d;
}

.entry-num-content {
    border-radius: 6px;
    text-align: right;
    padding-right: 12px;
    font-size: 12px;
}

.pokemon-name-content {
    border-radius: 6px;
    text-align: left;
    padding-left: 12px;
    font-size: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.pokemon-name-content:hover {
    cursor: pointer;
    color: #ef5350;
}

/* Poke info */

.poke-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 12px;
    width: 80%;
}

.back-arrow {
    height: 32px;
    margin-right: 18px;
    fill: white;
}

.next-arrow {
    height: 32px;
    margin-left: 18px;
    fill: white;
}

.back-arrow:hover, .next-arrow:hover {
    cursor: pointer;
    fill: #ef5350;
}

.poke-num {
    margin-right: 18px;
    font-size: 24px;
}

.poke-name {
    font-size: 24px;
}

/* Pokemon View Table */

.pokemon-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 64px;
    margin-bottom: 64px;
    color: white;
}

.pokemon-view-table {
    table-layout: fixed;
    width: 80%;
    margin-bottom: 24px;
}

.table-title-row {
    background-color: #ef5350;
    color: white;
}

.table-title {
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.table-content-row {
    background-color: #363636;
}

.table-content {
    text-align: center;
    border-radius: 6px;
}

.sprite {
    height: 256px;
    width: 256px;
    margin: 10px;
    border-radius: 6px;
    border: 1px solid #2b2b2b;
    background-color: #3d3d3d;
}

.title {
    font-size: 18px;
}

.content {
    font-size: 16px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.types {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.type {
    width: 100px;
    border-radius: 6px;
}




/* Footer */

.footer {
    background-color: #202020;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px;
}

.footer-title {
    color: white;
    font-size: 18px;
    margin-bottom: 12px;
}

.footer-subtitle {
    color: white;
    font-size: 12px;
    margin-bottom: 12px;
}

.footer-logos {
    list-style-type: none;
    margin-bottom: 12px;
}

.footer-item {
    padding-left: 4px;
    padding-right: 4px;
}

.footer-link {
    text-decoration: none;
}

.footer-logos {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.footer-item-img {
    height: 38px;
    fill: white;
}

.credit {
    color: white;
    font-size: 14px;
}

.fill-green {
    fill: #00b11d;
}

.fill-red {
    fill: #ef5350;
}

.fill-blue {
    fill: #28378f;
}










.left {
    text-align: right;
    padding-right: 12px;
}

.right {
    text-align: left;
    padding-left: 12px;
}

/* POKEMON TYPES */

.grass {
    background-color: #00b11d;
}
.fire {
    background-color: #ff4d4d;
}
.water {
    background-color: #4d67ff;
}
.electric {
    background-color: #ffd727;
}
.ice {
    background-color: #4deaff;
}
.fighting {
    background-color: #a84d03;
}
.poison {
    background-color: #6800ca;
}
.ground {
    background-color: #805216;
}
.flying {
    background-color: #b4c0ff;
}
.psychic {
    background-color: #d876ff;
}
.bug {
    background-color: #7da340;
}
.rock {
    background-color: #b95613;
}
.ghost {
    background-color: #3a478f;
}
.dark {
    background-color: #2c2c2c;
}
.dragon {
    background-color: #28378f;
}
.steel {
    background-color: #8b8b8b;
}
.fairy {
    background-color: #ff4de7;
}
.normal {
    background-color: #b3b3b3;
}