@import"https://fonts.googleapis.com/css?family=Russo+One";.am-canvas[data-astro-cid-y3soregm]{z-index:-1;position:fixed;inset:0}.container-circle[data-astro-cid-5wnvluim]{width:100%;min-height:100vh;position:relative;scroll-snap-align:center}.circle[data-astro-cid-5wnvluim]{width:80vmin;aspect-ratio:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);clip-path:circle(50%);mask:radial-gradient(farthest-side,#000 95%,#0000);border-radius:50%}@property --i{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --inc{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --s{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --start{syntax: "<angle>"; inherits: true; initial-value: 0deg;}.am-img[data-astro-cid-5wnvluim]{--i: var(--deg);--inc: 0deg;--s: var(--custom-s);--start: var(--i);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover;object-position:center;transition-delay:0s,0s,0s,0s,0s,0s,.5s;transition:object-position 1s,opacity .5s,--i 1s,--s 1s,--inc 1s,--start 1s;&:hover{animation:changePosition 3s ease-in-out both alternate}}.am-img-1[data-astro-cid-5wnvluim]{clip-path:polygon(50% 50%,85% 0,15% 0);z-index:5}.am-img-2[data-astro-cid-5wnvluim]{clip-path:polygon(50% 50%,100% 70%,100% 0,70% 0)}.am-img-3[data-astro-cid-5wnvluim]{clip-path:polygon(50% 50%,100% 65%,100% 100%,50% 100%)}.am-img-4[data-astro-cid-5wnvluim]{clip-path:polygon(50% 50%,0 60%,0% 100%,50% 100%)}.am-img-5[data-astro-cid-5wnvluim]{clip-path:polygon(50% 50%,50% 0,0 0%,0 65%)}@keyframes changePosition{0%{object-position:50% 50%}25%{object-position:100% 100%}75%{object-position:50% 50%}to{object-position:0% 0%}}svg[data-astro-cid-kmetj66o]{position:absolute;width:100%;height:100%}.demo--text[data-astro-cid-kmetj66o]{font:16em/1 Russo One,Impact;font-size:5vmax;letter-spacing:.05em}.symbols-item[data-astro-cid-kmetj66o]{animation:offset-direction 6s linear infinite;fill:none;stroke-width:2}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+1){animation-delay:-.044444s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+2){animation-delay:-.088889s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+3){animation-delay:-.133333s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+4){animation-delay:-.177778s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+5){animation-delay:-.222222s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+6){animation-delay:-.266667s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+7){animation-delay:-.311111s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+8){animation-delay:-.355556s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+9){animation-delay:-.4s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+10){animation-delay:-.444444s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+11){animation-delay:-.488889s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+12){animation-delay:-.533333s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+13){animation-delay:-.577778s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+14){animation-delay:-.622222s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+15){animation-delay:-.666667s}.symbols-item[data-astro-cid-kmetj66o] .text--item[data-astro-cid-kmetj66o]{fill-opacity:.3;animation:anim-move 2s linear infinite alternate;stroke-opacity:.4}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+1) .text--item[data-astro-cid-kmetj66o]{stroke:red;fill:red;fill-opacity:.45;stroke-opacity:.4;animation-delay:-.066667s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+2) .text--item[data-astro-cid-kmetj66o]{stroke:#ff6a00;fill:#ff6a00;fill-opacity:.3;stroke-opacity:.4;animation-delay:-.133333s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+3) .text--item[data-astro-cid-kmetj66o]{stroke:#ffd500;fill:#ffd500;fill-opacity:.25;stroke-opacity:.4;animation-delay:-.2s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+4) .text--item[data-astro-cid-kmetj66o]{stroke:#bfff00;fill:#bfff00;fill-opacity:.225;stroke-opacity:.4;animation-delay:-.266667s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+5) .text--item[data-astro-cid-kmetj66o]{stroke:#5f0;fill:#5f0;fill-opacity:.21;stroke-opacity:.4;animation-delay:-.333333s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+6) .text--item[data-astro-cid-kmetj66o]{stroke:#00ff15;fill:#00ff15;fill-opacity:.2;stroke-opacity:.4;animation-delay:-.4s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+7) .text--item[data-astro-cid-kmetj66o]{stroke:#00ff80;fill:#00ff80;fill-opacity:.193;stroke-opacity:.4;animation-delay:-.466667s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+8) .text--item[data-astro-cid-kmetj66o]{stroke:#00ffea;fill:#00ffea;fill-opacity:.188;stroke-opacity:.4;animation-delay:-.533333s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+9) .text--item[data-astro-cid-kmetj66o]{stroke:#0af;fill:#0af;fill-opacity:.183;stroke-opacity:.4;animation-delay:-.6s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+10) .text--item[data-astro-cid-kmetj66o]{stroke:#0040ff;fill:#0040ff;fill-opacity:.18;stroke-opacity:.4;animation-delay:-.666667s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+11) .text--item[data-astro-cid-kmetj66o]{stroke:#2a00ff;fill:#2a00ff;fill-opacity:.173;stroke-opacity:.4;animation-delay:-.733333s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+12) .text--item[data-astro-cid-kmetj66o]{stroke:#9500ff;fill:#9500ff;fill-opacity:.175;stroke-opacity:.4;animation-delay:-.8s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+13) .text--item[data-astro-cid-kmetj66o]{stroke:#f0f;fill:#f0f;fill-opacity:.173;stroke-opacity:.4;animation-delay:-.866667s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+14) .text--item[data-astro-cid-kmetj66o]{stroke:#ff0095;fill:#ff0095;fill-opacity:.171;stroke-opacity:.4;animation-delay:-.933333s}.symbols-item[data-astro-cid-kmetj66o]:nth-child(15n+15) .text--item[data-astro-cid-kmetj66o]{stroke:#ff002b;fill:#ff002b;fill-opacity:.17;stroke-opacity:.4;animation-delay:-1s}@keyframes offset-direction{25%{transform:translate(-200px)}75%{transform:translate(200px)}}@keyframes anim-move{50%{transform:translateY(40px)}}section[data-astro-cid-bbe6dxrz]{height:100vh;position:relative;scroll-snap-align:center}.am-img-codepen[data-astro-cid-bbe6dxrz]{position:absolute;top:70%;left:50%;transform:translate(-50%,-50%);width:7vmax;animation:chang 1s ease-in-out alternate infinite;@media (width <= 1111px) and (orientation: portrait){display:none}}@keyframes chang{0%{filter:invert(1)}to{filter:invert(.5)}}:root{--gradient: linear-gradient(to bottom, lime, cyan)}@font-face{font-family:AnotherDanger;src:url(/20-projects-in-codepen/assets/AnotherDanger.otf) format("opentype");font-weight:400;font-style:normal}html,body{scroll-snap-type:y mandatory}body{--sb-track-color: #000;--sb-thumb-color: var(--gradient);--sb-size: .7vmax;overflow-x:hidden}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue}a,button,img{-webkit-tap-highlight-color:transparent;user-select:none}button{background-color:transparent;border:none;outline:none}body{min-height:100vh;height:max-content;width:100%;flex-direction:column}h1,h2,h3,h4,h5{font-family:AnotherDanger}body::-webkit-scrollbar{width:var(--sb-size)}body::-webkit-scrollbar-track{background:var(--sb-track-color)}body::-webkit-scrollbar-thumb{background:var(--sb-thumb-color)}@supports not selector(::-webkit-scrollbar){body{scrollbar-color:var(--sb-thumb-color) var(--sb-track-color)}}