@media (hover: hover) and (pointer: fine) {

    /* ============ Hover Effects on cards only on Desktop ============== */
    .pokemon-cards:hover {
        z-index: 2;
    }

    .pokemon-cards:hover #card-bg {
        height: 465px;
    }

    .pokemon-cards:hover::before {
        height: 465px;
    }

    .pokemon-cards:hover .pokemon-types {
        opacity: 1;
        visibility: visible;
        transition-delay: 225ms;
    }

    .pokemon-cards:hover .pokemon-flavor {
        opacity: 1;
        visibility: visible;
        transition-delay: 225ms;
    }

    .pokemon-cards:hover .card-line {
        opacity: 1;
        visibility: visible;
        transition-delay: 225ms;
        transform: scale(1, 1);
    }

    .pokemon-cards:hover .pokeball-bg {
        top: -36%;
    }

    .pokemon-cards:hover .pokeball-bg::before {
        animation-name: rotate;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 125ms;
    }
}

/* ==================== Loading Button ==================== */
#load-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
    overflow: hidden;
}

.load-btn-wrapper {
    width: 60px;
    cursor: pointer;
    position: relative;
}

.load-btn-wrapper::before {
    content: 'Mehr Pokémon laden';
    display: block;
    width: 186px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 225ms ease-in;
}

.ball {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 60px;
    width: 60px;
    overflow: hidden;
}

.ball img {
    width: 60px;
}

.upper {
    top: 0;
    transition: top 225ms ease-in-out;
}

.lower {
    bottom: 0;
    transition: bottom 225ms ease-in-out;
}

.upper img {
    position: absolute;
    top: 30px;
}

.lower img {
    position: absolute;
    bottom: 30px;
}

.load-btn-wrapper:hover .upper {
    top: -20px;
}

.load-btn-wrapper:hover .lower {
    bottom: -20px;
}

.load-btn-wrapper:hover::before {
    opacity: 1;
    transition-delay: .2s;
}

.load-btn-wrapper:active .upper {
    top: 0;
}

.load-btn-wrapper:active .lower {
    bottom: 0;
}

.load-btn-wrapper:active::before {
    opacity: 0;
}

.loading-anime {
    animation-name: rotate;
    animation-duration: 2s;
    animation-delay: .2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 1 !important;
}

.fadeout {
    animation: fadeout .2s;
}

#loading-anime-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 200px;
    width: 200px;
    z-index: 0;
    opacity: 0;
}

#loading-anime-wrapper img {
    height: 62px;
}

/* Second Loadingbutton in the modal */
.loading-indicator {
    background-image: linear-gradient(90deg, #e45f60, white 80%);
    border-radius: 40px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.8);
    margin-top: 8px;

    animation-name: flash;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}



/* ========== Modal Animation ========== */

.modal-animation {
    transform: rotate(0deg);
    opacity: 1;
}

.blur {
    filter: blur(5px);
}



/* ========== Animations ========== */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes flash {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}