:root{--white:#fff;--greyLight-1:#e4ebf5;--greyLight-2:#c8d0e7;--white:#005e73;--greyLight-1:#113035;--greyLight-1:#fbf7ee;--wave-light:#f6ead5;--white:#f2e0c0;--wave-dark:#edd6ab;--greyLight-2:#000;--greyLight-3:#bec8e4;--greyDark:#9baacf;--white:#d7b36a;--greyLight-1:#ead6b8;--greyLight-2:#fff2dd}tokeep{--white:#eaffff;--greyLight-1:#ead6b8;--greyLight-2:#eac7b9;--white:#e6c07d;--greyLight-1:#fff2dd;--greyLight-2:#c9ad74;--white:#f3c888;--greyLight-1:#fff6e8;--greyLight-2:#e2b66b;--white:#f3d7a9;--greyLight-1:#fbf7ee;--greyLight-2:#ead1a1}.circle{margin:1rem;border-radius:1rem;display:grid;justify-items:center;align-items:center}.circle__btn{grid-row:1/2;grid-column:1/2;width:4rem;height:4rem;display:flex;margin:.2rem;justify-content:center;align-items:center;border-radius:50%;font-size:2rem;color:var(--primary);z-index:2;background:var(--greyLight-1);box-shadow:.15rem .15rem .3rem var(--greyLight-2),-.1rem -.1rem .25rem var(--white);cursor:pointer;position:relative}.circle__btn.shadow{box-shadow:inset .1rem .1rem .25rem var(--greyLight-2),inset -.1rem -.1rem .25rem var(--white)}.circle__btn .play{position:absolute;transition:all .2s linear}.circle__btn .play.visibility{opacity:0}.circle__btn .pause{position:absolute;opacity:0;transition:all .2s linear}.circle__btn .pause.visibility{opacity:1}.circle__back-1,.circle__back-2{grid-row:1/2;grid-column:1/2;width:4rem;height:4rem;border-radius:50%;filter:blur(1px);z-index:1}.circle__back-1{box-shadow:.2rem .2rem .4rem var(--greyLight-2),-.2rem -.2rem .4rem var(--white);background:linear-gradient(to bottom right,var(--greyLight-2) 0,var(--white) 100%);-webkit-animation:waves 4s linear infinite;animation:waves 4s linear infinite}.circle__back-1.initial{transform:scale(1.45);opacity:.75;-webkit-animation:none;animation:none}.circle__back-1.paused{-webkit-animation-play-state:paused;animation-play-state:paused}.circle__back-2{box-shadow:.2rem .2rem .4rem var(--greyLight-2),-.2rem -.2rem .4rem var(--white);-webkit-animation:waves 4s linear 2s infinite;animation:waves 4s linear 2s infinite}.circle__back-2.initial{transform:scale(1);opacity:.25;-webkit-animation:none;animation:none}.circle__back-2.paused{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes waves{0%{transform:scale(1);opacity:1}50%{opacity:1}to{transform:scale(2);opacity:0}}@keyframes waves{0%{transform:scale(1);opacity:1}50%{opacity:1}to{transform:scale(2);opacity:0}}.dribbble{position:fixed;font-size:2.6rem;right:2rem;bottom:1rem;color:#ea4c89}