header>h1 {
    margin-bottom: 0;
}

.return {
    position: absolute;
    top: 0;
    left: 0;
    margin: 20px;
}

a:hover {
    text-decoration: underline;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0.5em;
    width: 100%;
    margin: 4em 0;
}

.content {
    margin-top: 2em;
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
}

h2#selectedType {
    font-size: 3em;
}

.stats h3 {
    font-size: 1.5em;
}

.stats ul {
    margin-bottom: 0;
}

.stats li {
    font-size: 1.2em;
}

.grid .btn {
    padding: 0.6em;
    border: none;
    border-radius: 15px;
    width: 12ch;
    font-weight: bold;
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

.grid .btn:hover {
    cursor: pointer;
    transform: translateY(-0.2em) scale(1.1, 1.1);
}

.type-bug {
    background-color: #92bb23;
}

.type-dark {
    background-color: #302828;
}

.type-dragon {
    background-color: #4c39b9;
}

.type-electric {
    background-color: #ecb911;
}

.type-fairy {
    background-color: #e284dd;
}

.type-fighting {
    background-color: #692e2e;
}

.type-fire {
    background-color: #ce3419;
}

.type-flying {
    background-color: #4e71bd;
}

.type-ghost {
    background-color: #514780;
}

.type-grass {
    background-color: #3f8f35;
}

.type-ground {
    background-color: #6d612a;
}

.type-ice {
    background-color: #58afd1;
}

.type-normal {
    background-color: #918b8b;
}

.type-poison {
    background-color: #4c1a69;
}

.type-psychic {
    background-color: #d13684;
}

.type-rock {
    background-color: #a37e5b;
}

.type-steel {
    background-color: #6d6c7a;
}

.type-water {
    background-color: #1154a1;
}

.type-ice,
.type-electric,
.type-normal,
.type-fairy,
.type-bug,
.type-steel,
.type-rock {
    color: #000;
}

.typetable {
    table-layout: fixed;
    margin-bottom: 50px;
    text-align: center;
    overflow: scroll;
}

.typetable>tbody>tr>td {
    border: 1px solid black;
    padding: 0.2em;
}

.typetable>tbody>tr>td.typetable-left {
    /* height: 30px; */
    /* width: 5em; */
    text-align: right;
}

.typetable>tbody>tr>td.typetable-top-blank {
    width: 5em;
    height: 5em;
    border: none;
}

.typetable>tbody>tr>td.typetable-top {
    /* height: 5em; */
    /* width: 30px; */
    writing-mode: vertical-rl;
    -webkit-text-orientation: sideways;
    text-orientation: sideways;
    text-align: right;
}


@media screen {
    @media (max-width: 1200px) {
        .grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    @media (max-width: 550px){
        .grid {
            grid-template-columns: 1fr 1fr;
        }
        .stats h3 {
            font-size: 1.2em;
        }
        .stats li {
            font-size: 1em;
        }
    }
}