body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #ffc3c982!important;
}


body::-webkit-scrollbar{
    display: none;
  }

  .d-none {
    display: none;
}

.d-flex {
    display: flex;
    justify-content: space-evenly;
}

.mt10 {
    margin-top: 10px;
}

.center {
    align-items: center;
}
.column{
    flex-direction: column;
}

.headline {
    height: 110px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headline h1 {
    min-width: 360px;
    background: linear-gradient(to right, #11a3dc,#7FDBFF, #73bdfe, #7FDBFF, #0074D9);
    font-size: 50px;
    width: 50%;
    border: 1px solid rgb(83, 83, 244);
    border-radius: 15px;
    margin-top: 50px;
    text-align: center;
    color: #ffda37;
    text-shadow: rgb(55, 66, 247) 3px 0px 0px, rgb(55, 66, 247) 2.83487px 0.981584px 0px, rgb(55, 66, 247) 2.35766px 1.85511px 0px, rgb(55, 66, 247) 1.62091px 2.52441px 0px, rgb(55, 66, 247) 0.705713px 2.91581px 0px, rgb(55, 66, 247) -0.287171px 2.98622px 0px, rgb(55, 66, 247) -1.24844px 2.72789px 0px, rgb(55, 66, 247) -2.07227px 2.16926px 0px, rgb(55, 66, 247) -2.66798px 1.37182px 0px, rgb(55, 66, 247) -2.96998px 0.42336px 0px, rgb(55, 66, 247) -2.94502px -0.571704px 0px, rgb(55, 66, 247) -2.59586px -1.50383px 0px, rgb(55, 66, 247) -1.96093px -2.27041px 0px, rgb(55, 66, 247) -1.11013px -2.78704px 0px, rgb(55, 66, 247) -0.137119px -2.99686px 0px, rgb(55, 66, 247) 0.850987px -2.87677px 0px, rgb(55, 66, 247) 1.74541px -2.43999px 0px, rgb(55, 66, 247) 2.44769px -1.73459px 0px, rgb(55, 66, 247) 2.88051px -0.838247px 0px;
}

.content {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100vh;

}

.pokeCard {
    position: fixed;
    background-color: rgb(255, 0, 0);
    border: 1px solid grey;
    border-radius: 40px;
    min-width: 350px;
    max-height: 90%;
    z-index: 4;

}

.pokeCard::before {
    position: absolute;
    background-image: url(img/pokeball.png);
    background-size: 180px;
    background-repeat: no-repeat;
    background-position: bottom 1px right 10px;
    max-height: 90%;
    max-width: 350px;
    height: 200px;
    width: 200px;
    opacity: 0.1;
    content: '';
    z-index: 1;
    margin-left: 190px;
    margin-top: 120px;
}

.pokeCardOpacity{
    background-color: #ffffffa6;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
}
.pokeCardInfo {
    display: block;
    /* min-height: 51%; */
    color: white;
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-family: 'Open Sans', sans-serif;
    max-height: 500px;
    height: 50vh;
}

.pokeCardType {
    background-color: rgba(187, 255, 253, 0.716);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    height: 50px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-left: px;
    z-index: 2 !important;

}

.numbersmall {
    height: 20px;
    margin-left: 9px;
    margin-top: 23px;
}

.ArrowCardDiv {
    display: inline-flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.switchCard {
    display: flex;
    align-items: center;
    justify-content: center;
}

.previous {
    height: 100px;
    width: 150px;
    z-index: 5;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 520px;
}

.next {
    height: 100px;
    width: 150px;
    z-index: 5;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 520px;
}

.infoContainer {
    max-height: 400px;
    display: block;
    background-color: white;
    height: 35vh;
    border-radius: 40px;
    margin-bottom: 3px;
    margin-left: 3px;
    margin-right: 3px;
    z-index: 2;
}

.pokemonImageDiv {
    display: flex;
    justify-content: center;
}

.pokemonImageDiv img {
    margin-top: -140px;
    height: 200px;
    z-index: 3;
}

.tabs {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 20%;
    margin-right: 20%;
}

.tabs a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 18px;
}



.tdAbout1 {
    padding-inline-end: 25px;
    min-width: 110px;
}

.tdAbout2 {
    padding-inline-start: 25px;
}

.aboutTable {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

tr {
    height: 26px;
}

td {
    width: 40%;
}

.moves {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.tableDiv {
    padding: 5px;
    height: 21px;
}

.arrowHeart {
    display: flex;
    justify-content: space-between;
    min-width: 350px;
    height: 30px;
}

.arrow img{
    height: 50px;
    width: 50px;
    fill: white;
}

.heart svg {
    height: 40px;
    width: 40px;
    fill: white;
}

.number {
    font-size: 20px;
    height: 50px;
    width: 50px;
    margin-right: 10px;
}



.headSection {
    display: block;
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(to right, #ff4136, #ff851b);
    /* background-color: rgb(255 74 74); */
    box-shadow: 5px 1px 6px rgb(86, 85, 85);
    padding-bottom: 1px;
    margin-bottom: 11px;

}

.inputButtonDiv {
    min-width: 35%;
    max-width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

}

.forms {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    min-width: 600px;

}

.filterTypeDiv {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.pokemonList {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    justify-content: center;
    max-width: 700px;

}

.pokemonID {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10%;
    margin: 5px;
    padding-top: 20px;
    box-shadow: 5px 3px 3px rgb(86, 85, 85);
    height: 140px;
    width: 160px;
}

.pokemonID:hover {
    transition-timing-function: ease-in-out 125ms;
    border: 1px solid rgba(255, 255, 255, 0);
    box-shadow: 4px 1px 3px rgb(86, 85, 85);
}

.pokemonID::before {
    position: absolute;
    background-image: url("img/pokeball.png");
    background-size: 90px;
    background-repeat: no-repeat;
    background-position: bottom 1px right 10px;
    height: 90px;
    width: 167px;
    opacity: 0.1;
    content: '';
}

.close {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

.heart {
    cursor: pointer;
}

.pokeimg {
    z-index: 2;
    height: 75px;
    width: 90px;
    padding: 5px;
}

.pokeball {
    opacity: 0.3;
    z-index: 1;
    height: 50px;
    width: 50px;

}



.type {
    background-color: rgba(187, 255, 253, 0.716);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    height: 30px;
    width: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 5px;
    z-index: 2 !important;
    font-size: 15px;
}



.sp-btw {
    justify-content: space-between;

}

.css-input {
    margin-right: 5px;
    width: 120px;
    height: 30px;
    padding: 5px;
    font-size: 16px;
    border-width: 1px;
    border-color: #CCCCCC;
    background-color: #FFFFFF;
    color: #000000;
    border-style: solid;
    border-radius: 9px;
    box-shadow: 0px 0px 5px rgba(66, 66, 66, .75);
    text-shadow: 0px 0px 5px rgba(66, 66, 66, .75);
}

.css-input:focus {
    outline: none;
}

.original-button {
    border: 1px solid transparent;
    margin-left: 20px;
    cursor: pointer;
    background-color: #88efef;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    width: 150px;
    font-weight: 400;
    font-size: 1rem;
    transition: 0.3s;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    border-radius: 0.25rem;
}

.original-button:hover {
    transform: translateY(2px);
    box-shadow: 0 0 rgba(0, 0, 0, 0);
}

.btn-design:hover {
    transform: translateY(2px);
    box-shadow: 0 0 rgba(0, 0, 0, 0);
}

.btn-design {
    cursor: pointer;
    background: linear-gradient(to right, #b6ffff, #7FDBFF, #b6ffff);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
.loadBtn{
    margin: 20px
}
.pokemonName {
    margin-top: 30px;
}

.errormessage{
    text-align: center;
    height: 25px;
    font-weight: 500;
    position: fixed;
    top: 165px;
    z-index: 9;
    left: 30%;
    right: 30%;
}

/* Background Color by type */
.grass {
    background: linear-gradient(to right, #26e3ad, #5ff1c8);
    /* background-color: #58ebc1; */
}

.grass-light {
    background-color: #a3f6de;
}

.fire {
    
    background: linear-gradient(to right, #F08030, #f39c5e);

}

.fire-light {
    background-color: #fdb079;
}

.water {
    background: linear-gradient(to right, #6890F0, #8eadf6);
}

.water-light {
    background-color: #a5bdf7;
}

.bug {
    background: linear-gradient(to right, #A8B820, #cddf2f);
}

.bug-light {
    background-color: #d8e27f;
}

.normal {
    background: linear-gradient(to right, #A8A878, #d8d8af);
}

.normal-light {
    background-color: #cdcdbd;
}

.poison {
    background: linear-gradient(to right, #A040A0, #c767c7);
}

.poison-light {
    background-color: #cb98cb;
}

.electric {
    background: linear-gradient(to right, #F8D030, #ebdca2);
}

.electric-light {
    background-color: #ebdca2;
}

.ground {
    background: linear-gradient(to right, #E0C068, #e3d5ad);
}

.ground-light {
    background-color: #e2d9be;
}

.fairy {
    background: linear-gradient(to right, #F0B6BC, #ebdcde);
}

.fairy-light {
    background-color: #ebdcde;
}

.flying {
    background: linear-gradient(to right, #A890F0, #c9bfe8);
}

.flying-light {
    background-color: #c9bfe8;
}

.fighting {
    background: linear-gradient(to right, #C03028, #d05955);
    
}

.fighting-light {
    background-color: #d38c89;
}

.psychic {

    background: linear-gradient(to right, #F85888, #f188a7);
  
}

.psychic-light {
    background-color: #f9abc2;
}

.rock {
    background: linear-gradient(to right, #B8A038, #c2b36e);
}

.rock-light {
    background-color: #dad0a4;
}

.ghost {
    background: linear-gradient(to right, #705898, #bdb9c4);
  
}

.ghost-light {
    background-color: #bdb9c4;
}

.ice {
    background: linear-gradient(to right, #57ffff, #9feaea);
  
}

.ice-light {
    background-color: #b5f0f0;
}

.dragon {
    background: linear-gradient(to right, #7038F8, #b293fa);
   
}

.dragon-light {
    background-color: #b293fa;
}

.dark {
    background: linear-gradient(to right, #705848, #c39c82);
  
}

.dark-light {
    background-color: #c39c82;
}

.steel {
    background: linear-gradient(to right, #B8B8D0, #e9f7ff);
    background-color: #B8B8D0;
}

.steel-light {
    background-color: #e9f7ff;
}



/*END Background Color by type */


/* Responsive Design */

@media (max-width: 700px) {
    .errormessage{
        top: 175px;
        left: 10%;
        right: 10%;
        font-size: 14;
    }
    .pokeCardInfo {

        padding-left: 20px;
        padding-right: 20px;
    }

    .headSection {
        justify-content: center;
        display: flex;
        position: sticky;
        align-items: center;
        flex-direction: column;
    }

    .headline {
        min-width: 70%;
        height: 110px;
        margin-bottom: 0;
    }

    .headline h1 {
        min-width: 100%;
        margin-top: 0px;
    }

    .forms {
        flex-direction: column;
        gap: 10px;
        min-width: 100%;
    }

    .inputButtonDiv {
        min-width: 80%;
        width: 100%;
        justify-content: center;
    }

    .pokeCard {
        height: 98%;
        max-height: 100%;
    }
    .pokeCard::before{
        background-size: 150px;
        height: 200px;
        width: 160px;
    }

    .infoContainer {
        max-height: 50%;
        display: block;
        background-color: white;
        height: 50%;
        border-radius: 40px;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .previous {
        z-index: 5;
        justify-content: center;
        align-items: center;
    }

    .previous {
        height: fit-content;
        width: fit-content;
        position: unset;
    }

    .previous svg {
        height: 133px;
        width: 81px;
        position: fixed;
        left: 0;
        top: 35%;
    }

    .next {
        height: fit-content;
        width: fit-content;
        position: unset;
    }

    .next svg {
        height: 133px;
        width: 81px;
        position: fixed;
        right: 0;
        top: 35%;
    }

    .arrowHeart {
        min-width: 100%;
    }
}