h1 {
    font-size: 70px;
    margin-top: 0px;
    margin-bottom: 10px;
}

header {
    align-content: center;
    text-align: center;
    width: 100%;
    background-color: rgba(10, 12, 12, 0.8);
    color: white;
}

#chart {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#chart>div {
    border: 0px solid red;
    width: 350px;
    height: 300px;
    margin: 2px;
}

.box h3 {
    font-size: 30px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 5px;
    padding-top: 0px;
}

.box span {
    color: white;
    text-shadow: 1px 1px #000000;
    display: inline-block;
}

h3>span {
    height: 100%;
    width: 100%;
}

.box p {
    font-size: 20px;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

.box>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    text-align: center;
    flex-direction: row;
    margin: 2px;
    width: 100%;
}

.box>div span {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 16px;
    width: 80px;
    height: 30px;
    margin: 2px;
}

.bug::after {
    content: "BUG";
}

.bug {
    background-color: rgba(168, 185, 59, 0.75);
}

.dark::after {
    content: "DARK";
}

.dark {
    background-color: rgba(0, 0, 0, 0.75);
}

.dragon::after {
    content: "DRAGON";
}

.dragon {
    background-color: rgba(215, 45, 20, 0.75);
}

.electric::after {
    content: "ELECTRIC";
}

.electric {
    background-color: rgba(200, 200, 0, 0.75);
}

.fairy::after {
    content: "FAIRY";
}

.fairy {
    background-color: rgba(220, 30, 220, 0.75);
}

.fighting::after {
    content: "FIGHTING";
}

.fighting {
    background-color: rgba(100, 10, 10, 0.75);
}

.fire::after {
    content: "FIRE";
}

.fire {
    background-color: rgba(255, 0, 0, 0.75);
}

.fire::after {
    content: "FIRE";
}

.fire {
    background-color: rgba(255, 0, 0, 0.75);
}

.flying::after {
    content: "FLYING";
}

.flying {
    background-color: rgba(160, 160, 150, 0.75);
}

.ghost::after {
    content: "GHOST";
}

.ghost {
    background-color: rgba(10, 20, 100, 0.75);
}

.grass::after {
    content: "GRASS";
}

.grass {
    background-color: rgba(70, 255, 70, 0.75);
}

.ground::after {
    content: "GROUND";
}

.ground {
    background-color: rgba(5, 100, 5, 0.75);
}

.ice::after {
    content: "ICE";
}

.ice {
    background-color: rgba(100, 215, 210, 0.75);
}

.normal::after {
    content: "NORMAL";
}

.normal {
    background-color: rgba(100, 100, 100, 0.75);
}

.poison::after {
    content: "POISON";
}

.poison {
    background-color: rgba(160, 20, 150, 0.75);
}

.psychic::after {
    content: "PSYCHIC";
}

.psychic {
    background-color: rgba(235, 100, 150, 0.75);
}

.rock::after {
    content: "ROCK";
}

.rock {
    background-color: rgba(50, 120, 50, 0.75);
}

.steel::after {
    content: "STEEL";
}

.steel {
    background-color: rgba(100, 100, 100, 0.75);
}

.water::after {
    content: "WATER";
}

.water {
    background-color: rgba(0, 0, 255, 0.75);
}

@media (max-width: 700px) {
    h1 {
        font-size: 30px;
    }
}