html {
    height: 100vh;
    width: 100vw;
}

.statement {
    position: absolute;
    font-family: 'Lato', sans-serif;
    color: whitesmoke;
    left: 30%;
    z-index: 1;
}

body {
    background-color: #EAE9DF;
    position: relative;
    height: 100vh;
    width: 100vw;    
}

.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #BD3837;
    position: relative;
    left: 44.5%;
    bottom: 86%;
    z-index: 2;
    animation-name: blinking;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-delay: 1s;
    animation-iteration-count: infinite;

}

.redpart {
    height: 800px;
    width: 1200px;
    overflow-y: hidden;
    background-color: red;
    position: absolute;
    opacity: .3;
    border-radius: 30px;
    bottom: 53%;
    left: 10%;
    z-index: -1;
}

.whitepart {
    height: 500px;
    width: 1000px;
    overflow-y: hidden;
    background-color: white;
    position: absolute;
    opacity: .3;
    border-radius: 30px;
    bottom: -35%;
    left: 10%;
    z-index: -2;
}

.blackpart {
    height: 200px;
    width: 1100px;
    background-color: black;
    position: absolute;
    opacity: .3;
    border-radius: 30px;
    z-index: -1;
    bottom: 26%;
    right: 40%;
}

.logocontainer{
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

#pokemonHoroscope {
    font-size: small;
    display: table-cell;
    padding: 30px;
    border-radius: 25px;
    position: absolute;
    bottom: 700px;
    left: 600px;
    animation-name: slideInDown;
    animation-duration: 1.5s;
    animation-timing-function: linear;

}

.pokeball{
    position: absolute;
    left: 15%;
    top: 8%;
    bottom: 30%;
    transform: rotate(19deg);
}


.Logo {
   margin-top: 140px;
   z-index: 1;
}

#displayPokemon {
   margin-left: 20%;
   padding: 5px;
   border-radius: 25px;  
   margin-top: 100px;
   animation-name: slideInLeft;
   animation-duration: 1.5s;
   animation-timing-function: linear;
}


#pokemon-name {
    text-align: center;
    padding-top: 10px;
    border-radius: 20px;
    position: absolute; 
    margin-left: 150px;
    bottom: 100px;
    top: 800px;
    animation-name: slideInLeft;
    animation-duration: 1.5s;
    animation-timing-function: linear; 
    
}

#Sign {
    text-align: center;
    padding: 5px;
    border-radius: 25px;
    position: absolute;
    left: 300px;
    top: 840px;
    animation-name: slideInRight;
    animation-duration: 1.5s;
    animation-timing-function: linear;
}

.selZodiac {
    position: absolute;
    left: 40%;
    bottom: 44%;
    z-index: 2;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    padding: .5em .5em;
    background-color: #F0F0F0;
    color: #373737;
    opacity: 0;
}

.selZodiac:hover {
    opacity: 1;
}

/* ANIMATION CODE */

@keyframes blinking {
    0% {
        background-color: #BD3837;
    }
    30% {
        background-color: #EDA3A5;
    }
    60% {
        background-color: #D44A33;
    }
    100% {
        background-color: white;
    }
    
}

@keyframes selectSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translate(-115%, -540%);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-300px);
    }
}

@keyframes slideInDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-300px);
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(-500px);
    }
    100%{
        transform: translateX(0)
    }
    
}

@keyframes logoMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-58%);
    }
}

@keyframes pokeballback {
   from {
        transform: translateX(0);
   }
   to {
        transform: translateX(160%);
        transform: translateY(60%);
        opacity: .5;
        z-index: -1;
   }
}

/* === Mobile mode === */

@media screen and (max-width: 500px) {

    html {
        /* height: 100vh;
        width: 100vw; */
    }

    .logocontainer{
        display: flex;
        justify-content: center;
        right: 10px;
        height: 38%;
        width: auto;
    }

    .Logo {
        z-index: 1;
        
     }

     .statement {
        display: flex;
        justify-content: center;
        font-family: 'Lato', sans-serif;
        color: whitesmoke;
        left: 75px;
        z-index: 1;
        font-size: 10px;
    }

    .pokeball{
        display: block;
        justify-content: center;
        width: auto;
        transform: rotate(19deg);
        right: 140px;
        left: 160px;
    }

    .minball {
        max-width: 900%;
        max-height: auto;
    }

    .selZodiac {
        position: absolute;
        left: 20%;
        bottom: 48%;
        z-index: 2;
        font-family: 'Lato', sans-serif;
        font-size: 1rem;
        padding: .5em .5em;
        background-color: #F0F0F0;
        color: #373737;
        opacity: 1;
        
    }

    #displayPokemon {
        display: flex;
        justify-content: center;
        max-width: 50%;
        max-height: 50%;
        margin-left: 20%;
        padding: 45px;
        border-radius: 25px;  
        margin-top: 100px;
        animation-name: slideInLeft;
        animation-duration: 1.5s;
        animation-timing-function: linear;
     }
    
    
    #pokemon-name {
        display: flex;
        justify-content: center;
        text-align: center;
        padding-top: 10px;
        border-radius: 20px;
        position: absolute; 
        bottom: 0px;
        top: 650px;
        animation-name: slideInLeft;
        animation-duration: 1.5s;
        animation-timing-function: linear; 
     }

     #Sign {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 5px;
        border-radius: 25px;
        position: absolute;
        left: 50px;
        top: 740px;
        animation-name: slideInRight;
        animation-duration: 1.5s;
        animation-timing-function: linear;
    }

    #pokemonHoroscope {
        display: flex;
        justify-content: center;
        max-height: 1%;
        max-width: 1%;
        font-size: small;
        display: table-cell;
        padding: 10px;
        border-radius: 25px;
        position: relative;
        bottom: 0px;
        top: 100px;
        left: 0px;
        animation-name: slideInDown;
        animation-duration: 1.5s;
        animation-timing-function: linear;
    
    }

    .circle {
        height: 100px;
        width: 100px;
        border-radius: 50%;
        position: relative;
        left: 44.5%;
        bottom: 2000%;
        z-index: 2;
    
    }

    .redpart {
        height: 400px;
        width: 600px;
        overflow-y: hidden;
        background-color: red;
        position: absolute;
        opacity: .3;
        border-radius: 30px;
        bottom: 53%;
        left: 10%;
        z-index: -1;
    }
    
    .whitepart {
        height: 250px;
        width: 500px;
        overflow-y: hidden;
        background-color: white;
        position: absolute;
        opacity: .3;
        border-radius: 30px;
        bottom: -25%;
        left: 10%;
        z-index: -2;
    }
    
    .blackpart {
        height: 100px;
        width: 550px;
        background-color: black;
        position: absolute;
        opacity: .3;
        border-radius: 30px;
        z-index: -1;
        bottom: 26%;
        right: 40%;
    }


    /* --- mobile animation --- */

    @keyframes logoMove {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(0);
        }
    }

    @keyframes selectSlide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translate(0);
            opacity: 1;
        }
    }

    @keyframes pokeballback {
        from {
             transform: translateX(0);
        }
        to {
             transform: translate(-180%, 20%);
             opacity: .5;
             z-index: -1;
        }
     }


    

}