.fon{background-image:url(img/fon.jpg);background-size:cover;background-position:center;padding:0;margin:1em 0;border-radius:1em;overflow:hidden;height:480px;position:relative}.suggestions.zodiak.zvport a:hover{text-decoration:none !important}@media screen and (min-width:601px){.suggestions.zodiak.zvport .img{width:19%}}@media screen and (min-width:1101px){.suggestions.zodiak.zvport .img{width:15%}}@media screen and (min-width:499px) and (max-width:600px){.suggestions.zodiak.zvport .img{width:20%}}@media screen and (max-width:378px){.suggestions.zodiak.zvport .img{width:25%}}#main_content_main .suggestions.zodiak.zvport{margin:2em 0}.suggestions.zodiak.zvport a .img img{padding-left:10px}.suggestions.zodiak .prevtxt p:nth-of-type(2){color:unset;text-align:unset;text-decoration:unset}.suggestions.zodiak .prevtxt p:nth-of-type(2):hover{text-decoration:unset}.suggestions.zodiak .prevtxt p{margin-top:0.5em}#main_content_main .block .suggestions.zodiak .prevtxt h3{padding:0;margin:0.5em 0}.suggestions.zodiak.zvport a:nth-of-type(1) .dt,.suggestions.zodiak.zvport span:nth-of-type(1) a .img{background:linear-gradient(to right,rgba(75,219,245,1),rgba(87,159,254,1))} .container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);cursor:grab;max-width:95%;max-height:95%} .container.dragging{cursor:grabbing;transition:none} .eight-ball{width:400px;height:400px;background-image:url('img/shar.png');background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:50%;position:relative;transform-style:preserve-3d} .window{position:absolute;width:220px;height:220px;background:rgba(0,0,0,0.7);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 20px rgba(0,0,0,0.5)} .triangle{position:absolute;width:170px;height:170px;background:rgba(0,174,240,0.4);clip-path:url(#roundedTriangle);top:50%;left:50%;transform:translate(-50%,-60%);box-shadow:0 0 60px rgba(0,174,240,0.8)} .triangle::before{content:'';position:absolute;width:100%;height:100%;background:rgba(0,174,240,0.15);filter:blur(30px)} .answer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75%;color:white;font-family:Arial,sans-serif;font-size:26px;font-weight:bold;text-align:center;padding:3% 3%;line-height:1.15;text-shadow:0 0 10px rgba(255,255,255,0.8);z-index:2;box-sizing:border-box;opacity:0;transition:opacity 0.3s ease} .answer.visible{opacity:1} .reflection{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.15) 0,rgba(255,255,255,0) 50%);pointer-events:none} @keyframes glow{0%{filter:brightness(1)} 100%{filter:brightness(1.3)} } @keyframes colorShift{0%{background:rgba(0,174,240,0.4)} 50%{background:rgba(0,190,255,0.6)} 100%{background:rgba(0,255,255,0.4)} } @keyframes shake{0%,100%{transform:translate(0,0) rotate(0deg)} 10%{transform:translate(-10px,-10px) rotate(-5deg)} 20%{transform:translate(10px,-5px) rotate(5deg)} 30%{transform:translate(-10px,5px) rotate(-3deg)} 40%{transform:translate(10px,5px) rotate(3deg)} 50%{transform:translate(-5px,-10px) rotate(-4deg)} 60%{transform:translate(5px,10px) rotate(4deg)} 70%{transform:translate(-10px,-5px) rotate(-2deg)} 80%{transform:translate(10px,-10px) rotate(2deg)} 90%{transform:translate(-5px,5px) rotate(-1deg)} } @keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-60%) scale(1);filter:blur(0px)} 100%{opacity:0;transform:translate(-50%,-60%) scale(0.3);filter:blur(8px)} } @keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-60%) scale(0.3);filter:blur(8px)} 100%{opacity:1;transform:translate(-50%,-60%) scale(1);filter:blur(0px)} } @keyframes fadeOutText{0%{opacity:1;transform:translate(-50%,var(--vertical-offset,-50%)) scale(1);filter:blur(0px)} 100%{opacity:0;transform:translate(-50%,var(--vertical-offset,-50%)) scale(0.3);filter:blur(8px)} } @keyframes fadeInText{0%{opacity:0;transform:translate(-50%,var(--vertical-offset,-50%)) scale(0.3);filter:blur(8px)} 100%{opacity:1;transform:translate(-50%,var(--vertical-offset,-50%)) scale(1);filter:blur(0px)} } .shaking{animation:shake 800ms ease-in-out 2} .fading-out{animation:fadeOut 800ms ease-in forwards} .fading-in{animation:fadeIn 2000ms ease-out forwards} .fading-out-text{animation:fadeOutText 800ms ease-in forwards} .fading-in-text{animation:fadeInText 2000ms ease-out forwards} @keyframes gentleSway{0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(3px,-2px) rotate(2deg)} 50%{transform:translate(-2px,3px) rotate(0deg)} 75%{transform:translate(2px,-3px) rotate(-2deg)} } @keyframes floatInLiquid{0%,100%{transform:translate(-50%,-60%) scale(1) rotate(0deg)} 25%{transform:translate(-50%,-56%) scale(1) rotate(3deg)} 50%{transform:translate(-50%,-64%) scale(1) rotate(0deg)} 75%{transform:translate(-50%,-58%) scale(1) rotate(-3deg)} } .swaying{animation:gentleSway 4s ease-in-out infinite} .floating{animation:floatInLiquid 5s ease-in-out infinite;animation-delay:0.5s;opacity:1 !important} .glowing{animation:glow 2s infinite alternate,colorShift 3s infinite alternate} @media (prefers-reduced-motion:reduce){.shaking{animation-duration:0.4s} .fading-out,.fading-in{animation-duration:0.3s} .swaying,.floating{animation:none} } @media (max-width:880px){.eight-ball{width:40vw;height:40vw;max-width:450px;max-height:450px} .window{width:55%;height:55%} .triangle{width:77%;height:77%} .answer{font-size:28px} } @media (max-width:600px){.eight-ball{width:75vw;height:75vw}} @media (max-width:540px){.container{margin-top:-6vw}} @media (max-width:480px){.eight-ball{width:85vw;height:85vw} .window{width:55%;height:55%} .triangle{width:77%;height:77%} .answer{font-size:32px;width:85%;padding:5% 2%} }@media (max-width:430px){.container{margin-top:-11vw}} @media (max-width:360px){.eight-ball{width:85vw;height:85vw} .window{width:55%;height:55%} .triangle{width:77%;height:77%} .answer{font-size:34px;width:88%}.container{margin-top:-20vw} }