body {
    display: flex;
    flex-direction: column;
    background: #333;
    margin: 0;
}

#loading {
    text-align: center;
    display: block;
}

#loading img {width: 100px;}

#pokedex_name {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3em;
    color: #ccc;
    text-align: center;
    margin-top: 1em;
}

#generation_title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    color: #555;
    text-align: center;
    margin-bottom: 0.5em;
}

#search_and_generation {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
    padding-bottom: 1em;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #333;
}

#search_and_generation #generation_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#search_and_generation #generation_container .generation_button_container button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5em;
    color: #999;
    padding: 0 10px;

    background: none;
    border: none;
    cursor: pointer;
}

.error_shake {
    animation: error_shake_anim 0.1s;
    animation-iteration-count: infinite;
}

#search_error {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #999;
    font-size: 1.5em;
    text-align: center;
}

@keyframes error_shake_anim {
    0% {transform: translate(1px, 0px);}
    20% {transform: translate(2px, 0px);}
    40% {transform: translate(1px, 0px);}
    60% {transform: translate(-1px, 0px);}
    80% {transform: translate(-2px, 0px);}
    100% {transform: translate(-1px, 0px);}
}

#search_and_generation input[type=search] {
    outline: none;
    background-color: #ffffff00;
    margin-top: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
    
    border: none;
    border-bottom: 1px solid #000;

    text-align: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5em;
    color:#999;
}

#pokemon_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
