body {
    font-family: 'Funnel Display', 'Lucida Sans', sans-serif;
    background-color: #262929;
}
div.main {
    width: 80%;
    margin: auto;
}
div.body {
    background-color: #262929;
    padding: 10px;
    width: 66.7%;
}
div.content {
    display: flex;
}
div.centered {
    text-align: center;
}
div.side {
    background-color: #2d8856;
    border-radius: 10px;
    padding: 10px;
    padding-right: 20px;
    width: 33.3%;
    font-size: 20px;
}
div.footer {
    background-color: #3f3c3c;
    border-radius: 10px;
    color: #3bb371;
    width: 70%;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
}
th, td {
    font-size: 24px;
    border: 2px solid #706b6b;
    border-radius: 10px;
    padding: 5px;
    color: white;
    background-color: #3f3c3c;
    text-transform: capitalize;
}
a {
    color: #dddddd;
}
a:hover {
    color: #ffffff;
}
ul {
    font-size: 16px;
}
button {
    border: 2px solid #2d8856;
    cursor: pointer;
    color: #2d8856;
    background-color: #2e2c2c;
    outline: none;
    /* this causes the ripple effect to fade over time */
    background-position: center;
    transition: background 0.6s;
}
button:hover {
    /* this is where the ripple effect is defined */
    background: #3f3c3c radial-gradient(circle, transparent 1%, #3f3c3c 1%) center/15000%;
}

button:active {
    /* this sets the ripple to max opacity and starts animating */
    background-color: #555252;
    background-size: 100%;
    transition: background 0s;
}

.rating_button {
    font-family: 'Lexend Mega', 'Funnel Display', 'Lucida Sans', sans-serif;
    border-radius: 50%;
    font-size: 24px;
    width: 50px;
    height: 50px;
}

.menu_button {
    border-radius: 5px;
    font-size: 16px;
    padding: 10px 10px;
}

.name_display {
    color: #2d8856;
    font-size: 48px;
    text-transform: capitalize;
}

.row {
    display: flex;
}

.pokemon {
    background-color: #3f3c3c;
    border-radius: 10px;
    padding: 20px;
}

.column {
    flex: 25%;
    padding: 5px;
}

.gen1 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #da3914 40%, #2e50d8 60%) border-box;
}

.gen2 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #daa520 40%, #c0c0c0 60%) border-box;
}
.gen3 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #cd2236 40%, #3d51a7 60%) border-box;
}
.gen4 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #90beed 40%, #dd7cb1 60%) border-box;
}
.gen5 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #444444 40%, #e1e1e1 60%) border-box;
}
.gen6 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #025da6 40%, #ea1a3e 60%) border-box;
}
.gen7 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #f1912b 40%, #5599ca 60%) border-box;
}
.gen8 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #00a1e9 40%, #bf004f 60%) border-box;
}
.gen9 {
    border: 2px solid transparent;
    background: linear-gradient(#3f3c3c, #3f3c3c) padding-box, linear-gradient(to bottom left, #f34134 40%, #8334b7 60%) border-box;
}