@font-face {
    font-family: 'Pokemon Hollow';
    src: url('../fonts/29962_PokemonHollowNormal.ttf') format('truetype');
}

body {
    background-color: #C1D7F7;
    /* background-color: rgb(211, 209, 209) !important; */
    font-family: 'Roboto', sans-serif;
}

.hallow {
    font-family: 'Pokemon Hollow', sans-serif;
    color: yellow;
    /* Couleur jaune pour le texte */
    text-shadow: 0 0 6px blue, 0 0 8px blue, 0 0 10px blue;
    /* Ombres de texte bleues */
}

.btn-light:hover .poke-btn,
.btn-dark:hover .poke-btn {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

.Plante {
    background: linear-gradient(135deg, #DFEC51 0%, #73AA0A 100%) !important;
}

.poke-picture-Plante {
    background-image: url(../images/bg-plante.webp);
    background-size: cover;
}

.Électrik {
    background: linear-gradient(135deg, #fad961 0%, #f76b1c 100%);
}

.poke-picture-Électrik {
    background-image: url(../images/bg-elec.webp);
    background-size: cover;
}

.Acier {
    background: linear-gradient(135deg, #E3E3E3 0%, #5D6874 100%);
}

.poke-picture-Acier {
    background-image: url(../images/bg-acier.webp);
    background-size: cover;
}

.Feu {
    background: linear-gradient(135deg, #f2d50f 0%, #da0641 100%);
}

.poke-picture-Feu {
    background-image: url(../images/bg-lava.webp);
    background-size: cover;
}

.Eau {
    background: linear-gradient(135deg, #13f1fc 0%, #0470dc 100%);
}

.poke-picture-Eau {
    background-image: url(../images/bg.webp);
    background-size: cover;
}

.Insecte {
    background: linear-gradient(135deg, #c3ec52 0%, #0ba29d 100%);
}

.poke-picture-Insecte {
    background-image: url(../images/bg-insecte.webp);
    background-size: cover;
}

.Sol {
    background: linear-gradient(135deg, #994d00 0%, #ffffff 100%);
}

.poke-picture-Sol {
    background-image: url(../images/bg-sol.webp);
    background-size: cover;
}

.Normal {
    background: linear-gradient(135deg, #dad4ec 0%, #f3e7e9 100%);
}

.poke-picture-Normal {
    background-image: url(../images/bg-normal.webp);
    background-size: cover;
}

.Poison {
    background: linear-gradient(135deg, #f6ab3e 0%, #8037f6 100%);
}

.poke-picture-Poison {
    background-image: url(../images/bg-poison.webp);
    background-size: cover;
}

.Fée {
    background: linear-gradient(135deg, #ffe7ad 0%, #f3658d 100%);
}

.poke-picture-Fée {
    background-image: url(../images/bg-fee.webp);
    background-size: cover;
}

.Combat {
    background: linear-gradient(135deg, #656d77 0%, #2f363f 100%);
    color: rgb(243, 193, 108);
}

.poke-picture-Combat {
    background-image: url(../images/bg-combat.webp);
    background-size: cover;
}

.Psy {
    background: linear-gradient(135deg, #ffda00 0%, #0d187c 100%);
}

.poke-picture-Psy {
    background-image: url(../images/bg-psy.webp);
    background-size: cover;
}

.Roche {
    background: linear-gradient(135deg, #797979 0%, #e3dfdf 100%);
}

.poke-picture-Roche {
    background-image: url(../images/bg-roche.webp);
    background-size: cover;
}

.Spectre {
    background: linear-gradient(135deg, #fbf0f0 0%, #b8c7e8 100%);
}

.poke-picture-Spectre {
    background-image: url(../images/bg-spectre.webp);
    background-size: cover;
}

.Glace {
    background: linear-gradient(135deg, #d3f0f1 0%, #37d8e8 100%);
}

.poke-picture-Glace {
    background-image: url(../images/bg-glace.webp);
    background-size: cover;
}

.Dragon {
    background: linear-gradient(135deg, #edaf18 0%, #da0641 100%);
    ;
}

.poke-picture-Dragon {
    background-image: url(../images/bg-dragon.webp);
    background-size: cover;
}

.Vol {
    background: linear-gradient(135deg, #e9eced 0%, #fffcfc 100%);
}

.poke-picture-Vol {
    background-image: url(../images/bg-vol.webp);
    background-size: cover;
}

.Ténèbres {
    background: linear-gradient(135deg, #313131 0%, #534d4d 100%);
    color: rgb(242, 213, 164);
}

.poke-picture-Ténèbres {
    background-image: url(../images/bg-tenebres.webp);
    background-size: cover;
}

.card {
    border: 7px solid rgba(255, 255, 255, 0.48);
    box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(5px);
    transition: transform 0.5s;
    transform-style: preserve-3d;
    position: relative;
}

.star {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.cardBox {
    perspective: 1000px;
}

.f-mini {
    font-size: small;
    text-align: center;
}

footer,
.navbar {
    background-image: url('../images/bg-footer.webp')!important;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    font-weight: bold;
}

.intro {
    background-image: url('../images/bg-footer.webp')!important;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    min-width: 100vw;
}

.pokeball-fixed {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    width: 40vh;
    height: 40vh;
    transform: translate(-50%, -50%);
}

#pokeball_open {
    display: none;
}

.dropdown-menu {
    text-align: center;
}

.shiny {
    display: none;
}

.images:hover .regular {
    display: none;
}

.images:hover .shiny {
    display: block;
}

.poke-btn:hover {
    animation: rotation 10s infinite linear;
}

.poke-intro {
    animation: rotation 2s infinite linear;
}

.two {
    height: 36vh;
    width: 100vw;
}

.one {
    height: 16vh;
    width: 100vw;
}

.search-part {
    background: rgba(255, 255, 255, 0.368);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
    backdrop-filter: blur( 12.5px);
    -webkit-backdrop-filter: blur( 12.5px);
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18);
}

.scrollable-menu {
    height: auto;
    max-height: 200px !important;
    overflow-x: hidden;
}

.eggs,
.resistance,
.stats {
    border: 7px solid rgba(255, 255, 255, 0.48)!important;
}

.title-type {
    background: rgba( 198, 198, 217, 0.2);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
    backdrop-filter: blur( 8px);
    -webkit-backdrop-filter: blur( 8px);
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18);
}

.box-intro {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba( 255, 255, 255, 0.35);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
    backdrop-filter: blur( 10.5px);
    -webkit-backdrop-filter: blur( 10.5px);
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18);
}

.btn-intro {
    background: rgba( 255, 255, 255, 0.45);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
    backdrop-filter: blur( 10.5px);
    -webkit-backdrop-filter: blur( 10.5px);
    border-radius: 10px;
    border: 4px solid rgba(236, 231, 231, 0.18);
}

.btn-grad {
    background-image: linear-gradient(to right, #ff0000 0%, #f9f8f5 51%, #ff0000 100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}

.btn-grad:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}