/*
types.css

CSS file to color the different pokemon types

Ryan Paton
2020-08-28
*/

.poke-gen-button button {
    background-color: #607D8B;
    width: 12%;
    border: 1px solid black;
    border-radius: 4px;
    margin: 4px 0px;
}

.effect-tip {
    position: relative;
    display: inline-block;
}

.effect-tip .effect-text {
    visibility: hidden;
    min-width: 200px;
    margin-left: -30px;
    top: 110%;
    left: 50%;
    background-color: gray;
    padding: 5px 0px;
    border-radius: 6px;
    position:absolute;
    z-index: 1;
}

/* adjust for smaller screens */
@media only screen and (max-width: 850px) {
    .effect-text span {
        display: block;
    }
    
    .poke-gen-button button {
        width: 100%;
        display: block;
    }
}

/* display a little arrow */
.effect-tip .effect-text::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 70px;
    margin-left: -40px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent gray transparent;
}

/* Show type effects on hover */
.effect-tip:hover .effect-text {
    visibility: visible;
}

/* Display type badge */
.pokemon-type {
    color: white;
    text-align: center;
    margin: 0px 4px;
    padding: 4px 8px;
    width: 70px;
    text-transform: capitalize;
    border-radius: 16px;
}

/* Display each type in a different color */
.normal {
    background-color: #A8A878;
}

.fire {
    background-color: #F08030;
}

.fighting {
    background-color: #C03028;
}

.water {
    background-color: #6890F0;
}

.flying {
    background-color: #A890F0;
}

.grass {
    background-color: #78C850;
}

.poison {
    background-color: #A040A0;
}

.electric {
    background-color: #F8D030;
}

.ground {
    background-color: #E0C068;
}

.psychic {
    background-color: #F85888;
}

.rock {
    background-color: #B8A038;
}

.ice {
    background-color: #98D8D8;
}

.bug {
    background-color: #A8B820;
}

.dragon {
    background-color: #7038F8;
}

.ghost {
    background-color: #705898;
}

.dark {
    background-color: #705848;
}

.steel {
    background-color: #B8B8D0;
}

.fairy {
    background-color: #EE99AC;
}