@import url('https://fonts.googleapis.com/css?family=Boogaloo');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-family:  'Boogaloo', cursive;
    height: 100vh;
    overflow-y: hidden;
}


.pannel-bg {
    width: 100vw;
    height: 100vh;
    align-content: center;
    align-items: center;
    display: flex;
    /* background: #5582EE; */
    background: /* #4EDE95;*/ black;
    flex-wrap: wrap;
}

.info-line {
    display: flex;
    align-content: center;
    align-items: center;
}

.pokeball-container {
    width: 100vw;
    /* height: 40vh; */
    /* padding: 0 30vw; */
    align-content: center;
    align-items: center;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* margin-top:30vh; */
    display: flex;
}

.pannel {
    width: 40vw;
    height: 40vh;
    /* padding: 0 30vw; */
    align-content: center;
    align-items: center;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* margin-top:30vh; */
    transition: 0.4s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: translateY(-70%);
}

.pannel.active {
    transition: 0.4s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: translateY(0%);
}


.text {
    /* width: 100%; */
    margin: auto;
    /* text-align: center; */
    color: #ffffff;
    font-size: 1.4em;
    margin-top: 5vh;
    text-shadow: 0 0 4px #dddddd;
    -moz-animation: blink 1s infinite 0s;
    -webkit-animation: blink 1s infinite 0s;
    animation: blink 1s infinite 0s;
}

.card {
    width: 40vw;
    background: #fff;
    border-radius: 10px;
    /* padding: 0 30vw; */
    align-content: center;
    align-items: center;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.rotate>.pokeball-container >#ajaxButton{
    animation: rotate 0.5s linear infinite;
    box-shadow:0 0 0 0 ;
}
.pokeball {
    width: 7vw;
    height: auto;
    cursor: pointer;
    border-radius: 50%;
    margin: auto;
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.5);
    transition: 0.4s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
}


.pokemon {
    max-width: 150px;
    height: auto;
    transition: 0.4s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
}


.pokemon-img {
    width: 20vw;
    margin: auto;
}

.pokemon-info-lines {
    display: flex;
    flex-direction: column;
    transition: 0.4s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
    align-content: center;
    align-items: center;
    text-shadow: 0 0 4px #dddddd;
    /* transform: translateY(-120%); */
}

.content {
    width: 40vw;
    margin: 0 30vw 0 30vw;
    background: rgba(255, 255, 255, 0.6);
    /* padding: 30px; */
    height: 55vh;
    padding: 5vh;
    /* padding: 0 30vw; */
    align-content: center;
    align-items: center;
    /* margin: auto; */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10vh;
    /* display: flex; */
    border-radius: 20px;
    display: flex;
    /* border: solid 0.5px #fff; */
    flex-direction: column;
    transition: 0.4s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 5px 15px 25px -10px rgba(0, 0, 0, 0.5);
    /* transform: translateY(0); */
    transform: translateY(-120%);
    /* animation: flap 1s; */
}

.content.active {
    transform: translateY(0);
}

.pokemon-name {
    color: #000;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    transition: 0.4s all cubic-bezier(0.68, -0.55, 0.27, 1.55);
}