/*Scrollbar style*/
::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

body {
    background: url("./pokemon-bg.jpg") no-repeat;
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
}

#content-box {
    width: 500px;
    height: 500px;
    border: 10px solid lightgray;
    border-radius: 10px;

    display: flex;
    margin: 0 auto;
    margin-top: 60px;
    
    background: url("./pogopokedex.jpg") no-repeat;
    background-size: cover;
}

#pokemon-info {
    width: 250px;
    height: 500px;
    text-align: center;
}

#pokemon-shiny {
    margin-top: 10px;
}

#pokemon-stat {
    margin-top: 10px;
    background-color: white;
    border: 1px solid black;
}

#shiny-button {
    padding: 3px;
    margin: 5px;
    background-color: yellow;
    border: 1px solid black;
    border-radius: 10px;
    cursor: pointer;
}

#normal-button {
    padding: 3px;
    margin: 5px;
    border: 1px solid black;
    border-radius: 10px;
    cursor: pointer;
    text-align: right;
}

#pokemon-list {
    width: 250px;
    height: 500px;
    font-size: 18px;
    overflow-y: auto;
    cursor: pointer;
}

.pokemon-name {
    border: 1px solid black;
    border-radius: 10px;
    background-color: white;
    margin: 5px;
    padding: 5px;   
}

#pokemon-info img {
    width: 160px;
    height: 160px;
    border: 1px solid black;
    border-radius: 10px;
    margin-top: 20px;
    background-color: white;
}

#pokemon-types {
    margin-top: 10px;
}

.type-box {
    padding: 3px;
    margin: 5px;
    border: 1px solid white;
    border-radius: 10px;
}

.fire {
    background-color: orange;
    color:white;
}

.grass {
    background-color: green;
    color: white;
}

.water {
    background-color: blue;
    color: white;
}

.ice {
    background-color: lightblue;
    color: black;
}

.electric {
    background-color: gold;
    color: black;
}

.fighting {
    background-color: darkred;
    color: white;
}

.flying {
    background-color: skyblue;
    color: black;
}

.bug {
    background-color: yellowgreen;
    color: white;
}

.ghost {
    background-color: purple;
    color: white;
}

.rock {
    background-color: sienna;
    color: white;
}

.ground {
    background-color: burlywood;
    color: black;
}

.steel {
    background-color: silver;
    color: black;
}

.dark {
    background-color: darkgray;
    color: white;
}

.psychic {
    background-color: palevioletred;
    color: white;
}

.fairy {
    background-color: pink;
    color: black;
}

.dragon {
    background-color: teal;
    color: white;
}

.poison {
    background-color: darkviolet;
    color: white;
}

#pokemon-description {
    width: 230px;
    height: 100px;
    background-color: white;
    border: 1px solid black;
    border-radius: 10px;

    margin: 0 auto;
    margin-top: 10px;
    padding: 2px;
    font-size: 18px;
    overflow-y: auto;
    text-align: left;
}