.btns_gallery {
    display: flex;
    gap: 390px;
}

.btn-gallery {
    margin: -40px;
    background-color: rgba(255, 255, 255, 0);
    height: 40px;
    width: 40px;
    border-radius: 20px;
    border: 2px solid white;
    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255, 0.5));
    z-index: 100;
    cursor: pointer;
    transition: background-color ease 0.3s;
    position: relative;
    top: 276px;
    backdrop-filter: blur(5px);
}

.btn-gallery:hover {
    background-color: rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255, 0.5));
}

.arrow-right {
    background-image: url(../assets/icons/right-arrow.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 55% 50%;
    left: 32px;
}

.arrow-left {
    background-image: url(../assets/icons/right-arrow.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 55% 50%;
    transform: rotate(180deg);
    right: 32px;
}

.close-btn-container {
    height: 40px;
    width: 100%;
    margin: -20px;
    display: flex;
    flex-direction: row-reverse;
}

.btn-close-card {
    background-image: url(../assets/icons/close.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    margin: -40px;
    background-color: rgba(255, 255, 255, 0);
    height: 40px;
    width: 40px;
    border-radius: 20px;
    border: 2px solid white;
    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255, 0.5));
    z-index: 100;
    cursor: pointer;
    transition: background-color ease 0.3s;
    position: relative;
    backdrop-filter: blur(5px);
    top: 80px;
    right: 60px;
}

.btn-close-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255, 0.5));
}

.pokemon-detail-card {
    height: 520px;
    width: 346px;
    background-color: red;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transform: scale(0.8);
    transition: transform 0.5s;
}

.scale {
    transform: scale(1);
}

.pokemon-title {
    color: white;
    text-shadow: 0 0 10px rgb(0, 0, 0, 0.75);
    margin-top: 24px;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    z-index: 2;
    text-transform: capitalize;
}

.detail-card-img {
    height: 296px;
    width: 296px;
    margin-top: -24px;
    margin-bottom: -80px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.info-container {
    width: 100%;
    height: 282px;
    padding: 68px 24px 24px;
    background-color: rgb(29, 29, 29, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    box-sizing: border-box;
    user-select: text;
}

.detail-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    gap: 16px;
    z-index: 10 !important;
}

.detail-nav button {
    cursor: pointer;
    z-index: 100;
    border: none;
    background: none;
    padding: 0;
    font-size: 14px;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    user-select: none;
    z-index: 10;
}

.detail-nav button:hover {
    color: white;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    filter: drop-shadow(0px 0px 6px white);
}

.btn_aktiv {
    color: white !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    filter: drop-shadow(0px 0px 6px white);
    z-index: 100;
}

.main-specs {
    display: flex;
    color: white;
    font-size: 14px;
}

.main-keys-values {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 50%;
}

.stats-keys {
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.loading-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loading-bar {
    width: 184px;
    height: 16px;
    background-color: rgb(255, 255, 255, 0.3);
    border-radius: 3px;
}

.progress {
    width: 0px;
    height: 16px;
    border-radius: 3px;
    transition: width 0.5s;
}

.bg-grass {
    background-color: #6BFF8B;
}

.bg-fire {
    background-color: #FF9700;
}

.bg-water {
    background-color: #9AF7FF;
}

.bg-bug {
    background-color: #A9CD47;
}

.bg-normal {
    background-color: #e9e9e9;
}

.bg-poison {
    background-color: #B35AF1;
}

.bg-fairy {
    background-color: #ff39b1;
}

.bg-electric {
    background-color: #fff000;
}

.bg-ground {
    background-color: #ff7935;
}

.bg-fighting {
    background-color: #ff7935;
}

.bg-rock {
    background-color: #c8b686;
}

.bg-psychic {
    background-color: #B35AF1;
}

.evo-chain {
    height: 128px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: scroll;
}

.evo-chain::-webkit-scrollbar {
    width: 8px;
    background-color: rgb(255, 255, 255, 0.3);
    border-radius: 4px;
}

.evo-chain::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 4px;
}

.evo-step {
    display: flex;
    align-items: center;
    gap: 16px;
}

.evo-form-pic {
    height: 96px;
    width: 96px;
}

.evo-infos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.evo-icons {
    display: flex;
    gap: 8px;
}

.detail-grass {
    background: url(../assets/bg/bg_plant.webp), radial-gradient(circle at 132px 100px, #82D371 0%, #1D1D1D 75%);
    background-position: 50% 10px, center;
    background-size: 85%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(130, 211, 113, 0.5);
}

.detail-fire {
    background: url(../assets/bg/bg_flame.webp), radial-gradient(circle at 132px 100px, #FF9700 0%, #1D1D1D 75%);
    background-position: 50% -70px, center;
    background-size: 130%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 151, 0, 0.5);
}

.detail-water {
    background: url(../assets/bg/bg_water.webp), radial-gradient(circle at 132px 100px, #9AF7FF 0%, #1D1D1D 75%);
    background-position: 50% -100px, center;
    background-size: 160%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(154, 247, 255, 0.5);
}

.detail-bug {
    background: url(../assets/bg/bg_bug.webp), radial-gradient(circle at 132px 100px, #A9CD47 0%, #1D1D1D 75%);
    background-position: 50% -70px, center;
    background-size: 130%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(169, 205, 71, 0.5);
}

.detail-normal {
    background: url(../assets/bg/bg_normal.webp), radial-gradient(circle at 132px 100px, #e9e9e9 0%, #1D1D1D 75%);
    background-position: 50% -30px, center;
    background-size: 110%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(233, 233, 233, 0.5);
}

.detail-poison {
    background: url(../assets/bg/bg_poison.webp), radial-gradient(circle at 132px 100px, #B35AF1 0%, #1D1D1D 75%);
    background-position: 50% -30px, center;
    background-size: 110%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.5);
}

.detail-fairy {
    background: url(../assets/bg/bg_fairy.webp), radial-gradient(circle at 132px 100px, #ff39b1 0%, #1D1D1D 75%);
    background-position: 50% -70px, center;
    background-size: 130%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.5);
}

.detail-electric {
    background: url(../assets/bg/bg_electric.webp), radial-gradient(circle at 132px 100px, #fff000 0%, #1D1D1D 75%);
    background-position: 50% -70px, center;
    background-size: 130%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 240, 0, 0.35);
}

.detail-ground {
    background: url(../assets/bg/bg_earth.webp), radial-gradient(circle at 132px 100px, #ff7935 0%, #1D1D1D 75%);
    background-position: 50% -70px, center;
    background-size: 130%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 121, 53, 0.35);
}

.detail-fighting {
    background: url(../assets/bg/bg_fighting.webp), radial-gradient(circle at 132px 100px, #ff7935 0%, #1D1D1D 75%);
    background-position: 50% -70px, center;
    background-size: 130%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(255, 121, 53, 0.35);
}

.detail-rock {
    background: url(../assets/bg/bg_rock.webp), radial-gradient(circle at 132px 50px, #c8b686 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -40px, center;
    background-size: 110%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(200, 182, 134, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.detail-psychic {
    background: url(../assets/bg/bg_psychic.webp), radial-gradient(circle at 132px 50px, #B35AF1 0%, #1D1D1D 75%);
    background-size: cover;
    background-position: 50% -80px, center;
    background-size: 120%, cover;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0px 16px 60px rgb(179, 90, 241, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}