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

:root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #fff;
}

.hidden {
    display: none !important;
}

.invisible {
    opacity: 0;
    transition: opacity 300ms ease-in;
}


body {
    background: #2D2D2D;

}

h1 {
    padding-top: 2em;
    padding-bottom: 1em;
    text-align: center;
}


#pokedex {
    position: fixed;
    inset: 0;
    background: #2D2D2D;
    opacity: 0;
    z-index: 10;
    padding: 1em;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
    animation-duration: 1000ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

#second-qr-code {
    position: absolute;
    right: 4dvw;
    bottom: 4dvh;
    width: 18vmin;
    height: 18vmin;
    z-index: 10;
}


.pokemon-gif {
    image-rendering: pixelated;
    height: 20vmin;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

@keyframes fade-out {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0;
    }
}

#pokemon-name-h2 {
    font-size: 15vmin;
}

#pokemon-sprites {
    display: flex;
    gap: 1em;
}

#flavor-text {
    font-size: 4vmin;
    text-align: center;
    max-width: 50ch;
}

#pokemon-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    justify-content: center;
    padding: .5em;
}

.pokemon {
    width: 30%;
    image-rendering: pixelated;
    background: #181818;
    padding: .5em;
    border-radius: .5rem;
    text-align: center;
    transition: transform 300ms ease-in-out;
}

.pokemon-image {
    height: 5rem;
}

.pokemon-name {
    font-size: 1rem;
}

.outline {
    outline: 1px solid #fff;
}

.pokemon-type {
    border-radius: 4vmin;
    padding-block: .25em;
    padding-inline: .5em;
    font-size: 5vmin;
    background: #1D45D3;
}

.pokemon:hover {
    cursor: pointer;
    transform: scale(90%);
}

#pokemon-types {
    display: flex;
    gap: 1em;
}

#qr-code-container {
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #007EFF;
    height: 100dvh;

}

#qr-code-container p {
    margin-left: 1rem;
    font-size: 7vmin;
    font-weight: bold;
    z-index: 10;
}

#hand {
    margin-top: 1rem;
}

#iphone-right, #android-left {
    width: 30dvw;
    position: absolute;
    opacity: 80%;
    z-index: 7;
}

.position-right {
    right: 10dvw;
    transform: rotate(10deg);
}

.position-left {
    left: 15dvw;
    transform: rotate(-10deg);
}

#qr-code-img {
    width: 38vmin;
    height: 38vmin;
    z-index: 10;
}