206206/* Circle Background Animation https://www.fdmdigital.co.uk/css-floating-background-shapes/ */ .circles { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .circles li { position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(96, 183, 199, 0.1); animation: animate 1s linear infinite; bottom: -100px; } .circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; animation-duration: 40s; border-radius: 50%; border-top-left-radius: 0 !important; background: var(--secondary-color); } .circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 0s; animation-duration: 60s; border-radius: 50%; border-top-left-radius: 0 !important; background: var(--primary-color); } .circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 0s; animation-duration: 50s; border-radius: 50%; border-top-left-radius: 0 !important; background: var(--primary-color-light); } .circles li:nth-child(4) { left: 75%; width: 60px; height: 60px; animation-delay: 2s; animation-duration: 40s; border-radius: 50%; border-top-left-radius: 0 !important; background: var(--primary-color); } .circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; animation-duration: 50s; border-radius: 50%; border-top-left-radius: 0 !important; background: var(--secondary-color-hover); } .circles li:nth-child(6) { left: 40%; width: 90px; height: 90px; animation-delay: 0s; animation-duration: 60s; border-radius: 50%; border-top-left-radius: 0 !important; background: var(--secondary-color-light); } .circles li:nth-child(7) { left: 35%; width: 50px; height: 50px; animation-delay: 0s; animation-duration: 70s; border-radius: 50%; border-top-left-radius: 0 !important; background: var(--gray-color); } .circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 0s; animation-duration: 80s; border-radius: 50%; border-top-left-radius: 0 !important; background: ; } .circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 0s; animation-duration: 90s; border-radius: 50%; border-top-left-radius: 0 !important; background: ; } .circles li:nth-child(10) { left: 85%; width: 50px; height: 50px; animation-delay: 0s; animation-duration: 100s; border-radius: 50%; border-top-left-radius: 0 !important; background: rgba(96, 183, 199, 0.1); } @keyframes animate { 0% { transform: translateY(0) rotate(0deg); opacity: .5; } 50% { transform: translateY(-250%) rotate(360deg); opacity: 1; } 100% { transform: translateY(-500%) rotate(720deg); opacity: 0; } }