*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100dvh;
    margin: 0;
    padding: 0;
}

:root {
    --fbc-blue-70: #003eaa;
    --fbc-gray-20: #ededf0;
    --fbc-light-gray: #f0f0f4;
    --fbc-white: #ffffff;
    --fbc-transition: all 0.15s cubic-bezier(0.07, 0.95, 0, 1);
    --fbc-borders: 1px solid #ededf0;
    --fbc-primary-text: #15141a;
    --fbc-secondary-text: #86868f;
    --poke-red: #ff0000;
    --poke-yellow: #ffcc00;
    --poke-blue: #007bff;
    --poke-green: #1dbf73;
    --poke-orange: #ff7300;
    --poke-purple: #9c27b0;
    --poke-pink: #f06292;
    --poke-brown: #8b4513;
    --poke-gray: #bdbdbd;
    --poke-light-gray: #e3f2fd;
}

#op{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
}

#op-h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    color: yellow;
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 2px black;
}

body {
    display: flex;
    justify-content: center;
    font-family: 'Verdana', Geneva, Tahoma, sans-serif;
    background: var(--poke-blue);
}

main h1 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.5em;
    color: var(--poke-orange);
    text-shadow: 1px 1px 2px black;
}

.container {
    padding: 1em;
    border-radius: 0.5em;
    background: var(--poke-yellow);
    border: 5px solid black;
}

.container form {
    background: black;
    color: var(--fbc-white);
    padding: 1em;
    border-radius: 0.5em;
}

.container form label {
    display: block;
    text-align: center;
    font-size: 1.125rem;
    line-height: 2.5em;
    color: var(--poke-yellow);
}

.container form input {
    padding: 0.48em 0.24em;
    font-weight: 500;
    font-size: 1.14rem;
    border-radius: 0.25em;
    border: 1px solid var(--poke-gray);
    outline: none;
    background: var(--fbc-white);
}

.container form button {
    padding: 8px 16px;
    font-size: 1.125rem;
    border: 2px solid transparent;
    border-radius: 1.5em;
    background: var(--poke-yellow);
    color: var(--poke-blue);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#basestats {
    background-color: black;
}

.container form button:hover {
    background: var(--poke-red);
    color: #fff;
}

.top-container, .bottom-container {
    display: flex;
    flex-direction: column;
    min-height: 325px;
}

.top-container {
    background: black;
    padding: 10px;
    margin-block: .8em;
}

table {
    border-collapse: collapse;
    width: 100%;
    background: var(--poke-orange);
    color: var(--fbc-white);
    margin-block: .8em;
}

tr {
    border-bottom: 5px solid black;
}

td, th {
    text-align: center;
    padding: 8px;
}

th:nth-child(2n), td:nth-child(2n) {
    border-left: 5px solid black;
}

img {
    display: block;
    width: 60%;
    height: auto;
    margin: auto;
    margin-block: .24em;
}

.name-and-id {
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--poke-yellow);
}

.size {
    font-size: 1.025rem;
}

#type {
    font-weight: 400;
    font-size: .8rem;
}

.type {
    padding: .2em .4em;
    border-radius: .25em;
    margin-left: .25em;
    font-weight: 400;
    color: var(--fbc-white);
}

span {
    color: white;
}

.normal {
    background-color: #b7b7aa;
}

.fire {
    background-color: var(--poke-red);
}

.water {
    background-color: var(--poke-blue);
}

.electric {
    background-color: var(--poke-yellow);
}

.grass {
    background-color: var(--poke-green);
}

.ice {
    background-color: #66ccfe;
}

.fighting {
    background-color: #d3887e;
}

.poison {
    background-color: var(--poke-purple);
}

.ground {
    background-color: #dfba52;
}

.flying {
    background-color: #8899ff;
}

.psychic {
    background-color: var(--poke-pink);
}

.bug {
    background-color: #aabb23;
}

.rock {
    background-color: #baaa66;
}

.ghost {
    background-color: #9995d0;
}

.dragon {
    background-color: var(--poke-purple);
}

.dark {
    background-color: #b59682;
}

.steel {
    background-color: #abaabb;
}

.fairy {
    background-color: var(--poke-pink);
}

.type:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

button:focus, input:focus {
    outline: 2px solid var(--poke-blue);
}