body {
    background-color: #d7f0ff;
    font-family: "andong-wolyeonggyo", sans-serif;
}

main {
    background-image: linear-gradient(#ff7f7f, #d7f0ff);
    background-size: contain;
    background-repeat: no-repeat;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "adso", sans-serif;
    font-weight: bold;
    transform: scale(1.3);
}

.navbar {
    background: #ff7f7f;
}

.navbar a {
    font-family: "adso", sans-serif;
    transform: scale(1.3);
}

.nav-item {
    border: solid #000000;
    border-radius: 10px;
    background-color: #ff3434;
    padding: 2%
}

.active {
    color: #ffff7c!important
}

.returnBtn {
    background-color: white;
    border: #9c9c9c solid
}

.returnBtn:hover {
    background-color: #7bff7b;
    border: #4dc44d solid
}

#information {
    padding-top: 10%;
    padding-bottom: 10%
}

.card-title a {
    text-decoration: none;
    color: #000
}

.ser .card-title a {
    text-decoration: none;
    color: #fff
}

div.divider {
    border-bottom: 3px solid white;
}

hr.divider {
    border: 1px dashed #000
}

.universeInfo {
    border: solid #000000 3px;
    background-color: #ff3434;
    color: #fff;
    transition: 1s;
}

#destructionCall:hover {
    border: solid #871D29 3px;
    background-color: #1E1013;
    color: #fff
}

#silentEclipse:hover {

    border: solid #172d9d 3px;
    background-color: #a8b8ff;
    color: #fff
}

#modalbtn {
    border: dashed #380da4 1px;
    margin: 0;
    mix-blend-mode: multiply;
    transition: .2s;
}

#modalbtn:hover {
    border: solid #380da4 3px;
    background-color: yellow;
    mix-blend-mode: screen;
    transform: scale(1.1) rotate(3deg);
}

.ser #modalbtn {
    color: #fff;
    mix-blend-mode: screen;
}

/* Affiliation BG Colors */
#electro img {
    background-color: #ffd650;
}

#none img {
    background-color: #b9b9b9;
}

#nanab img {
    background-image: linear-gradient(#f2e459, #fc8f9d);
}

#roseli img {
    background-image: linear-gradient(#355483, #bf333e);
}

#yache img {
    background-image: linear-gradient(#078fbf, #5cc2cf);
}

#payapa img {
    background-image: linear-gradient(#76b334, #e62f8b);
}

#pecha img {
    background-image: linear-gradient(#fdbdb4, #fca19e);
}

#star img {
    background-image: linear-gradient(#ffffff, #8292f1);
}

#dark img {
    background-image: linear-gradient(#1d0101, #691111);
}

#ghost img {
    background-image: linear-gradient(#cecece, #888888);
}

#pet img {
    background-image: linear-gradient(#f5a6ff, #ec85fa);
}

#rogue img {
    background-image: linear-gradient(#af301f, #ff4437);
}

#loner img {
    background-image: linear-gradient(#6b9179, #3c6446);
}

/* Universe Borders */
.dc {
    border: #871D29 solid !important;
    background-color: #E1453E;
    color: black
}

.dc a {
    color: white;
}

.dc h5 a {
    color: black;
}

.ser {
    border: #9edcf5 solid !important;
    background-color: #140c57;
    color: #fff
}

.ser a {
    color: yellow
}

.charmove {
    padding: 2%;
    border-radius: 2px;
    margin: 1%
}

/* Type Colors */
.Water {
    background-color: #6890F0;
    color: #fff
}

.Fire {
    background-color: #F08030;
    color: #fff
}

.Grass {
    background-color: #78C850;
    color: #fff
}

.Normal {
    background-color: #A8A8A7;
    color: #fff
}

.Electric {
    background-color: #F8D030;
    color: #fff
}

.Flying {
    background-color: #A890F0;
    color: #fff
}

.Fighting {
    background-color: #C03028;
    color: #fff
}

.Ground {
    background-color: #E0C068;
    color: #fff
}

.Rock {
    background-color: #B8A038;
    color: #fff
}

.Bug {
    background-color: #A8B820;
    color: #fff
}

.Poison {
    background-color: #A040A0;
    color: #fff
}

.Dark {
    background-color: #705848;
    color: #fff
}

.Psychic {
    background-color: #F85888;
    color: #fff
}

.Ghost {
    background-color: #705898;
    color: #fff
}

.Ice {
    background-color: #98D8D8;
    color: #fff
}

.Dragon {
    background-color: #7038F8;
    color: #fff
}

.Steel {
    background-color: #B8B8D0;
    color: #fff
}

.Fairy {
    background-color: #EE99AC;
    color: #fff
}

/* Type Badge Colors */
.badge-type {
    border-radius: 100px;
    padding: 2.5%;
}

.badge-Water {
    background-color: #6890F0;
    color: #fff
}

.badge-Fire {
    background-color: #F08030;
    color: #fff
}

.badge-Grass {
    background-color: #78C850;
    color: #fff
}

.badge-Normal {
    background-color: #A8A8A7;
    color: #fff
}

.badge-Electric {
    background-color: #F8D030;
    color: #fff
}

.badge-Flying {
    background-color: #A890F0;
    color: #fff
}

.badge-Fighting {
    background-color: #C03028;
    color: #fff
}

.badge-Ground {
    background-color: #E0C068;
    color: #fff
}

.badge-Rock {
    background-color: #B8A038;
    color: #fff
}

.badge-Bug {
    background-color: #A8B820;
    color: #fff
}

.badge-Poison {
    background-color: #A040A0;
    color: #fff
}

.badge-Dark {
    background-color: #705848;
    color: #fff
}

.badge-Psychic {
    background-color: #F85888;
    color: #fff
}

.badge-Ghost {
    background-color: #705898;
    color: #fff
}

.badge-Ice {
    background-color: #98D8D8;
    color: #fff
}

.badge-Dragon {
    background-color: #7038F8;
    color: #fff
}

.badge-Steel {
    background-color: #B8B8D0;
    color: #fff
}

.badge-Fairy {
    background-color: #EE99AC;
    color: #fff
}

/* Load Animation */
.loading {
    height: 200px;
    animation-name: load;
    animation-iteration-count: 1;
    animation-duration: 1s;
}

@keyframes load {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(.5) rotate(-45deg);
    }

    100% {
        transform: scale(3) rotate(360deg);
    }
}