/* font-family: 'Bebas Neue', cursive; */

body {
    font-family: 'Bebas Neue', cursive;
    background-color: #f2f2f2;
}

.banner {
    background: #b31b1b;
}

.banner-content {
    padding: 21px;
}

.search {
    width: 100%;
    position: relative;
    display: flex;
}


.searchPokemon {
    width: 100%;
    border: 3px solid #fff;
    border-right: none;
    padding: 5px;
    height: 20px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #b57979;
}

.searchPokemon:focus{
    color: #b31b1b;
}

.searchButton {
    width: 40px;
    height: 36px;
    border: 1px solid #fff;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
    background: #b31b1b;
}


.wrap{
    width: 30%;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-parent, .type-parent, .info-parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .circle-parent {
    border: 5px solid black;
} */

.sprite-location {
    margin-top: 1%;
    margin-left: 1%;
    position: absolute;
}

.circle {
    height: 180px;
    width: 180px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 60px 0 rgba(0,0,0,0.25);
    margin-top: 0%;
    transform: rotateX(40deg);
    position: relative;
    z-index: -1;
    border: 5px solid white;

}

.info-box {
    height: 280px;
    width: 750px;
    background-color: #f2f2f2;
    border: 5px solid #b31b1b;
    z-index: 1;
    margin-top: 300px;
    border-radius: 100px;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.table {
    width: 100%;
    font-size: 22px;
    justify-content: center;
    align-items: center;
    margin-left: 25%;
}

.name-table {
    margin-top: 10%;
}


/* .pokemon-name {
    margin-top: 2%;
    font-size: large;
}

.text-name {
    text-align: center;
    width: 75%;
    float: inline-start;
}

 /* .type {
    height: 25px;
    width: 70px;
    background-color: white;
    z-index: 1;
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    border: 2px solid #b31b1b;
} 

 .type-two-text {
    height: 25px;
    width: 70px;
    background-color: white;
    z-index: 1;
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    border: 2px solid #b31b1b;
}

.type-text {
    z-index: 2;
    color: white;
    text-align: center;
    margin-top: 4.5%;
}  */

.pokedex-entry {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    margin: auto;
    width: 80%;
    margin-top: 2%;
}

.table {
    font-size: 30px;
}

.name, .id, .height, .weight, .weakness, .super-weakness, .immunity {
    position: absolute;
} 

.name {
    margin-top: -7.5%;
}

.id {
    margin-top: -1.5%;
}

.height {
    margin-top: 4.5%;
}

.weight {
    margin-top: 10.5%;
}

/* .immunity {
    margin-top: 4.5%;
}

.weakness {
    margin-top: 7.5%;
}

.super-weakness {
    margin-top: 10.5%;
} */

.text-name, .text-id, .text-height, .text-weight, .text-weakness, .text-super-weakness, .text-immunity {
    width: 150px;
    padding-right: 100px;
}

.pre-evolution {
    height: 125px;
    width: 125px;
    position: absolute;
    top: 140px;
    left: 25px;
}

.post-evolution {
    height: 125px;
    width: 125px;
    position: absolute;
    top: 140px;
    left: 580px;
 }

 .pre-evolution-text {
     position: absolute;
     left: 50px;
     top: 120px;
 }

 .post-evolution-text {
    position: absolute;
    left: 615px;
    top: 120px;
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}