body{height:100vh;background-color:#fff;background-image:linear-gradient(#e1ddce,#e8e5da);margin:0;padding:0;box-sizing:border-box;font-family:Quicksand,sans-serif;font-weight:700;overflow:hidden}.ring{background-color:#f7f6f2!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;display:flex;justify-content:center;align-items:center;background:transparent;border:5px solid #f7f6f2;border-radius:50%;text-align:center;line-height:150px;font-family:sans-serif;font-size:20px;color:#dcdcdc;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 5px #f7f6f2;box-shadow:0 0 20px #00000040;animation-duration:5s;animation-fill-mode:both}.ring p,.ring2 p{line-height:1.6!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}.ring:before{content:"";position:absolute;top:-5px;left:-5px;width:100%;height:100%;border:5px solid transparent;border-top:5px solid #84af79;border-right:5px solid #84af79;border-radius:50%;animation:animateC 2s linear infinite}.ball{display:block;position:absolute;top:calc(50% - 2px);left:50%;width:50%;height:4px;background:transparent;transform-origin:left;animation:animateBall 2s linear infinite}.ball:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#006b2b;top:-11px;right:-11px;box-shadow:0 0 20px #006b2b}@keyframes animateC{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes animateBall{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}.ring2{background-color:#f7f6f2!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;display:flex;justify-content:center;align-items:center;background:transparent;border:5px solid #f7f6f2;border-radius:50%;text-align:center;line-height:150px;font-family:sans-serif;font-size:20px;color:#dcdcdc;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 5px #f7f6f2;box-shadow:0 0 20px #00000040;animation-duration:5s;animation-fill-mode:both}@keyframes fadeIn2{0%{opacity:0}to{opacity:1}}.fadeIn2{animation-name:fadeIn2}.ring2:before{content:"";position:absolute;top:-5px;left:-5px;width:100%;height:100%;border:5px solid transparent;border-top:5px solid #84af79;border-right:5px solid #84af79;border-radius:50%;animation:animateC2 2s linear infinite}.ball2{display:block;position:absolute;top:calc(50% - 2px);left:50%;width:50%;height:4px;background:transparent;transform-origin:left;animation:animate2 2s linear infinite;animation-direction:reverse}.ball2:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#006b2b;top:-11px;right:292px;box-shadow:0 0 20px #006b2b}@keyframes animateC2{0%{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes animate2{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}