/* Pokeball/ Main Styles */

:root {
--white: #fff;
--gray: #eee;
--red: #e53935;
--black: #212121;
}
* {
box-sizing: border-box;
color: white;
margin: 0;
}
body {
background-image: linear-gradient(blue, red);
}
h1 {
text-shadow: 2px 2px 4px #000000;
margin-bottom: 45px;
}
h2 {
    text-shadow: 2px 2px 4px #000000;
    font-size: 2em;
}
.header1 {
font-size: 3em;
text-align: center;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.pokeball {
position: relative;
width: 300px;
height: 300px;
background: linear-gradient(
    to bottom,
    var(--red),
    var(--red) 48%,
    var(--black) 48%,
    var(--black) 55%,
    var(--white) 55%
);
border-radius: 50%;
border: 20px solid var(--black);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 8px 5px 0 rgba(0, 0, 0, 0.2);
animation-duration: 900ms;
animation-name: shake;
animation-iteration-count: infinite;
}
.pokeball:before {
content: "";
display: block;
position: absolute;
top: 40px;
right: 40px;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.4);
border-radius: 50%;
}
.pokeball:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
background-color: var(--white);
border-radius: 50%;
transform: translate(-50%, -50%);
border: 15px solid var(--black);
box-shadow: -5px -3px 0 rgba(0, 0, 0, 0.2);
}
/* Animation */
@keyframes shake {
0% { transform: translateX(0) rotate(0); }
15% { transform: translateX(-10px) rotate(-10deg); }
40% { transform: translateX(-15px) rotate(-15deg); }
60% { transform: translateX(15px) rotate(15deg); }
}

/* Results Screen */
.results {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.pokemon {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h2:first-letter {
text-transform: uppercase;
font-size: 1.2em;
margin: 0 auto;
}
img {
    width: 50%;
    background-image: linear-gradient(red, blue);
    border-radius: 20px;
    border: 1px solid white;
    margin-bottom: 40px;
}
.refreshButton {
    font-size: 3em;
    text-align: center;
    margin-top: 20px;

}
p {
    font-size: 1.5em;
    margin-bottom: 5px;
}