@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Macondo&display=swap');

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

html { background-color: #000; }

body{
    width:100vw;
    height:100vh;
    /* background: linear-gradient(to right bottom, #1a1d21, #1f2125, #242428, #28282c, #2d2c2f); */
    background: url(bg.png) no-repeat center center fixed;
    background-size: cover;
    padding:0.8rem 1rem 2rem 1rem;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    letter-spacing:0.1rem;
    font-family: 'Macondo', cursive;
}

/* .app__banner {
    background: url(kingsribbonbanner.png) no-repeat center top;
    min-width: 95%;
    text-align: center;
    background-size: contain;
    padding:2rem 0;
} */
.app__bannerreturn {
    background: url(kingsribbonbannergold.png) no-repeat center top;
    /* min-width: 55%; */
    text-align: center;
    background-size: contain;
    /* min-height: 200px; */
    font-size: 1rem;
    padding: 1.8rem 0;
    font-weight: 200;
}
.app__bannerreturn a { text-decoration: none; }

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

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

.magicball__outer {
    min-width: 266px;
    min-height: 266px;
    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__inner {
    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__startwhite {
    background-color:#FFF;
} */

.magicball__shaken .magicball__inner {
    background-color: #6688cc;
}
#mb-blue {
    z-index: 1000;
}

.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:75px;
    height: 50px;
    top:5px;
    background:#AAA;
    opacity:0.8;
    border-radius:50%;
}

.magicball__lower__shadow {
    position:absolute;
    width:175px;
    height: 175px;
    bottom:5px;
    background:#191919;
    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(-30deg) scale(1.5,1.5);}
    40% { transform: translate(0, 0) rotate(0deg) scale(1.2,1.2); }
    50% { transform: translate(-10px, 10px) rotate(45deg) 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); }
}