*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    color: #CCC;
}

body{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right bottom, #1a1d21, #1f2125, #242428, #28282c, #2d2c2f);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
}

.title{
    font-size: 3rem;
    text-transform: uppercase;
    padding: 2rem;
    font-weight: 300;
}

.info{
    text-align: justify;
    text-justify: inter-word;
    font-size: 1.5rem;
    line-height: 1.6rem;
    padding: 0 1 rem;
    margin: 2rem 0;
    
}

.magicBall_out{
    width: 300px;
    height: 300px;
    background: #111;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    box-shadow: 10px 10px 30px rgb(13, 15, 12), -10px -10px 30px #4a4a4a;
    position: relative;
    cursor: pointer;
}

.magicBall_in{
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.magicBall_response{
    text-align: center;
    font-size: 8rem;
    color: #222;
    line-height: 1.2rem;
}


.magicBall_spotlight{
position: absolute;
width: 250px;
height: 250px;
top: 5px;
border-radius: 50%;
background: #333;
opacity: 0.2;
}


.magicBall_bg_shadow{
    position: absolute;
width: 175px;
height: 175px;
top: 0px;
border-radius: 50%;
background: #666;
opacity: 0.2;
}



.magicBall_upper_shadow{
     position: absolute;
width: 60px;
height: 40px;
top: 5px;
background: #aaa;
opacity: 0.8;
border-radius: 50%;
z-index: 5;
}

.magicBall_lower_shadow{
    position: absolute;
    width: 175px;
    height: 175px;
    top: 5px;
    background: #333;
    opacity: 0.8;
    border-radius: 50%;
}

.animate {
    animation-name: shake-it;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes shake-it {
    0% { transform: translate(0, 0) rotate(0deg) scale(1,1,1,1);
}
    10% { transform: translate(10px, 10px) rotate(30deg) scale(1,3,1,3);}
    
    20% { transform: translate(0, 0) rotate(0deg) scale(1,1,1,1);
}
    30% { transform: translate(-10px, 10px) rotate(-45deg) scale(1,5,1,5);
}
    40% { transform: translate(0, 0) rotate(0deg) scale(1,2,1,2);

}
    50% { transform: translate(-10px, 10px) rotate(180deg) scale(1,6,1,6);
}
    60% { transform: translate(0, 0) rotate(-15deg) scale(1,3,1,3);
}
    70% { transform: translate(10px, 10px) rotate(180deg) scale(1,2,1,2);
}
    80% { transform: translate(0, 0) rotate(0deg) scale(1,1,1,1);
}
    90% { transform: translate(-10px, 10px) rotate(360deg) scale(1,1);
}
    100% { transform: translate(0, 0) rotate(0deg); }
}