body {
    background-color: #2d253a;
    color: #fff;
    font-family: 'Sevillana';
    overflow: hidden;
}

button,
select {
    font-family: 'Trebuchet MS', sans-serif;
    width: 120px;
    height: 50px;
    border-radius: 10px;
    border: none;
}

.center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hidden {
    display: none !important;
}

/*header*/
header {
position: relative;
z-index: 9999;
height: 50px;
display:flex;
justify-content: flex-end;
margin: 0;
}

header #language {
    width: 125px;
    font-size: 15px;
}

header a img{
    margin-right: 20px;
    width: 50px;
    
}
header * {
    height: 100%;
    transition: 0.5s;
}

header *:hover {
    transform: scale(1.1);
    transition: 0.5s;
}

#fullscreen {
    margin-right: auto;
}


/*main*/
.fortune-container {
    display: flex;
    flex-direction: column;
}

#fortune {
    text-align: center;
    width: 85%;
    max-width: 90vw;
    margin: auto;
    border-radius: 50%;
    font-size: 5vh;
}
.mind-reading {
    width: calc(100vh - 100px);
    height: calc(100vh - 100px);
    object-fit: contain;
}
.mind-reading > * {
position: absolute;
width: 100%;
height: 100%;
}

.crystal-ball {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
video {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: hue-rotate(60deg);
    transform: scale(0.9);    
}

#again {
    background-color:   #9d00ff6e;
    color:#fff;
    width: 125px;
    height: 50px;
    box-shadow: 0px 0px 10px #453e4f24;
    bottom: 8vh;
    left: 50%;
    transform: translate(-50%, 0);
    transition: 0.5s;
}

#again:hover {
    background-color: #9d00ff;
    box-shadow: 0px 0px 30px #453e4f;
    transition: 0.5s;
}
#again:active {
    background-color: #dca4ff;
    box-shadow: 0px 0px 30px #453e4f;
    transition: 0.1s;
}

/*Animation*/

@keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  .fade-out {
    animation: fadeOut 1s ease-in forwards;
  }

@keyframes fadeIn {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.fade-in {
animation: fadeIn 1s ease-in forwards;
}

@keyframes glow {
    0% {
        box-shadow: 0px 0px 10vh 0px rgba(115,33,166,0.43);
    }
    50% {
        box-shadow: 0px 0px 30vh 0px #7321a66e;
    }
    100% {
        box-shadow: 0px 0px 10vh 0px rgba(115,33,166,0.43);
    }
}
.glow {
    animation: glow 15s ease-in-out infinite;
    filter: drop-shadow(0px 0px 0px rgba(115,33,166,0.43));
    border-radius: 50%;
}