@font-face {
  font-family: pokemon;
  src: url(pokemon.ttf);
}

* {
    font-family: pokemon;
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: rgb(50, 50, 161);
    color: #ddd;
    line-height: 2em;
}

.container {
    margin: 0;
    padding: 30px;
}

.container > * {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5em 15px 15px 15px;
    border-radius: 10px;
    margin: 10px;
}

.type-select {
    background-color: transparent;
    grid-column-start: 3;
    grid-row-start: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align-last: center;
}

select {
    font-size: 150%;
    display: block;
}

.atk-header, .def-header {
    font-size: 200%;
    border-top: 5px solid black;
}

.def-header {
    grid-column-start: 2;
    grid-row-start: 1;
}

.def-super-effective-container {
    grid-column-start: 2;
    grid-row-start: 2;
}

.def-not-very-effective-container {
    grid-column-start: 2;
    grid-row-start: 3;
}

.def-no-effect-container {
    grid-column-start: 2;
    grid-row-start: 4;
}

.atk-header {
    grid-column-start: 4;
    grid-row-start: 1;
}

.atk-super-effective-container {
    grid-column-start: 4;
    grid-row-start: 2;
}

.atk-not-very-effective-container {
    grid-column-start: 4;
    grid-row-start: 3;
}

.atk-no-effect-container {
    grid-column-start: 4;
    grid-row-start: 4;
}

.type {
    display: inline-block;
    margin: 0.2em;
    width: 9em;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #eee;
    text-shadow: 1px 1px black;
}

.type:hover {
    cursor: pointer;
}

.type-normal {background-color: #939f93;}
.type-fire {background: linear-gradient(red, #f51);}
.type-water {background-color: #15f;}
.type-electric {background-color: rgb(255, 172, 12);}
.type-grass {background-color: rgb(23, 179, 57);}
.type-ice {background-color: #39f;}
.type-fighting {background-color: rgb(199, 69, 9);}
.type-poison {background: linear-gradient(rgb(226, 67, 197), rgb(226, 67, 197) 30%, rebeccapurple 70%);}
.type-ground {background: linear-gradient(rgb(203, 158, 100), rgb(186, 142, 84) 30%, rgb(165, 110, 1) 70%);}
.type-flying {background: linear-gradient(rgb(94, 165, 194), rgb(94, 165, 194) 30%, rgb(180, 180, 180) 70%);}
.type-psychic {background-color: #EF4179;}
.type-bug {background-color: rgb(133, 188, 24);}
.type-rock {background-color: rgb(158, 128, 39);}
.type-ghost {background-color: #704170;}
.type-dragon {background: linear-gradient(rgb(218, 25, 25), rgb(218,25, 25) 20%, blue 80%);}
.type-dark {background-color: rgb(60, 43, 21);}
.type-steel {background-color: #778;}
.type-fairy {background-color: #EF70EF;}

@media screen and (min-width: 50em) {
    .container {
        display: grid;
        grid-template-columns: 1fr 5fr 2fr 5fr 1fr;
        column-gap: 10px;

        grid-template-rows: 2fr 5fr 5fr 5fr;
        row-gap: 10px;

        height: 100vh;
        max-height: 700px;
    }

    .container > * {
        margin: 0;
    }
}