.RewardIcon{ transition: all 10s; color:transparent; height:100%; width:100%; background-color: var(--SecondLayerPrimary); translateZ(1px) clip-path: polygon( 15% 45%, 30% 20%, 70% 20%, 85% 45%, 15% 45%, 15% 47%, 85% 47%, 70% 80%, 25% 80%, 15% 47% ); } .RewardIcon.animate{ transform: translateZ(1px); animation: RewardAnimation 5s linear 0s 1 both; } .SecurityDoorRatingIcon{ transition: all 3s; color:transparent; height:100%; width:100%; background-color: var(--SecondLayerPrimary); clip-path: polygon( 10% 40%, 40% 40%, 50% 10%, 60% 40%, 90% 40%, 65% 55%, 75% 85%, 50% 65%, 25% 85%, 35% 55% ); } .SecurityDoorRatingIcon.Negative{ background-color: red; clip-path: polygon( 15% 35%, 40% 40%, 50% 25%, 60% 40%, 85% 35%, 65% 55%, 80% 80%, 50% 65%, 20% 80%, 35% 55% ); } .SecurityDoorRatingIcon.Positive{ background-color: green; } .RewardIcon{ transition: all 3s; color:transparent; height:100%; width:100%; background-color: var(--SecondLayerPrimary); clip-path: polygon( 10% 40%, 40% 40%, 50% 10%, 60% 40%, 90% 40%, 65% 55%, 75% 85%, 50% 65%, 25% 85%, 35% 55% ); clip-path: polygon( 15% 45%, 30% 20%, 70% 20%, 85% 45%, 15% 45%, 15% 47%, 85% 47%, 70% 80%, 25% 80%, 15% 47% ); } .SecurityDoorIcon{ color:transparent; height:100%; width:100%; background-color: var(--SecondLayerPrimary); clip-path: polygon( 16% 90%, 18% 90%, 18% 45%, 20% 35%, 25% 25%, 35% 15%, 45% 12%, 55% 12%, 65% 15%, 75% 25%, 80% 35%, 82% 45%, 82% 90%, 84% 90%, 84% 45%, 82% 35%, 76% 24%, 66% 14%, 56% 11%, 44% 11%, 34% 14%, 24% 24%, 18% 35%, 16% 45%, 16% 90%, 20% 90%, 20% 45%, 22% 35%, 26% 26%, 36% 16%, 45% 13%, 49.8% 13%, 49.8% 45%, 43% 45%, 43% 59%, 49.8% 59%, 49.8% 90%, 50.2% 90%, 50.2% 59%, 57% 59%, 57% 45%, 50.2% 45%, 50.2% 45.5%, 56.5% 45.5%, 56.5% 58.5%, 43.5% 58.5%, 43.5% 45.5%, 50.2% 45.5%, 50.2% 45%, 50.2% 13%, 55% 13%, 64% 16%, 74% 26%, 78% 35%, 80% 45%, 80% 90%, 50.2% 90%, 49.8% 90%, 20% 90%, 16% 90% ); } .SecurityDoorIconholder:hover .SecurityDoorIcon:not(.Opened), #Door_Icon:hover.SecurityDoorIcon{ background-color: var(--BitsPrimary); } .SecurityDoorIcon.Opened{ transition: all 10s; background-color: green; clip-path: polygon( 16% 90%, 18% 90%, 18% 45%, 20% 35%, 25% 25%, 35% 15%, 45% 12%, 55% 12%, 65% 15%, 75% 25%, 80% 35%, 82% 45%, 82% 90%, 84% 90%, 84% 45%, 82% 35%, 76% 24%, 66% 14%, 56% 11%, 44% 11%, 34% 14%, 24% 24%, 18% 35%, 16% 45%, 16% 90%, 20% 90%, 20% 45%, 22% 35%, 26% 26%, 35% 17.5%, 35% 17.5%, 35% 17.5%, 35% 41%, 33% 43%, 33% 58%, 35% 55%, 35% 70%, 65% 70%, 65% 55%, 67% 58%, 67% 43%, 65% 41%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 65% 41%, 65% 17%, 64% 17%, 65% 17%, 74% 26%, 78% 35%, 80% 45%, 80% 90%, 65% 70%, 35% 70%, 20% 90%, 16% 90% ); } .SecurityDoorIcon.Locked{ transition: all 10s; background-color: gray; clip-path: polygon( 16% 90%, 18% 90%, 18% 45%, 20% 35%, 25% 25%, 35% 15%, 45% 12%, 55% 12%, 65% 15%, 75% 25%, 80% 35%, 82% 45%, 82% 90%, 84% 90%, 84% 45%, 82% 35%, 76% 24%, 66% 14%, 56% 11%, 44% 11%, 34% 14%, 24% 24%, 18% 35%, 16% 45%, 16% 90%, 20% 90%, 20% 45%, 22% 35%, 26% 26%, 36% 16%, 45% 13%, 49.8% 13%, 49.8% 45%, 43% 45%, 43% 59%, 49.8% 59%, 49.8% 90%, 50.2% 90%, 50.2% 59%, 57% 59%, 57% 45%, 50.2% 45%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50.2% 45%, 50.2% 13%, 55% 13%, 64% 16%, 74% 26%, 78% 35%, 80% 45%, 80% 90%, 50.2% 90%, 49.8% 90%, 20% 90%, 16% 90% ); } .ActivateBoosterIcon{ transition: all 3s; color:transparent; height:100%; width:100%; background-color: var(--SecondLayerPrimary); clip-path: polygon( 15% 44%, 35% 60%, 80% 15%, 90% 25%, 90% 25%, 35% 80%, 35% 80%, 35% 80%, 35% 80%, 5% 55%, 5% 55%, 15% 44% ); } .UpgradeIcon{ transition: all 3s; color:transparent; height:100%; width:100%; background-color: var(--SecondLayerPrimary); clip-path: polygon( 50% 10%, 80% 40%, 60% 40%, 60% 90%, 60% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 60% 100%, 60% 90%, 40% 90%, 40% 40%, 20% 40%, 50% 10% ); } button:hover .UpgradeIcon{ animation: UpgradeAnimation 1s linear 0s 1 both; } .SlotIcon{ transition: all 10s; color:transparent; height:100%; width:100%; background-color: var(--SecondLayerPrimary); clip-path: polygon( 20% 10%, 30% 10%, 50% 10%, 70% 10%, 80% 10%, 80% 30%, 80% 50%, 80% 70%, 80% 90%, 70% 90%, 50% 90%, 35% 90%, 35% 80%, 50% 80%, 65% 80%, 65% 60%, 65% 40%, 65% 20%, 50% 20%, 35% 20%, 35% 40%, 35% 60%, 35% 80%, 35% 90%, 20% 90%, 20% 70%, 20% 50%, 20% 30% ); } .SlotIcon.Tier0{ clip-path: polygon( 20% 10%, 30% 10%, 50% 10%, 70% 10%, 80% 10%, 80% 30%, 80% 50%, 80% 70%, 80% 90%, 70% 90%, 50% 90%, 35% 90%, 35% 80%, 50% 80%, 65% 80%, 65% 60%, 65% 40%, 65% 20%, 50% 20%, 35% 20%, 35% 40%, 35% 60%, 35% 80%, 35% 90%, 20% 90%, 20% 70%, 20% 50%, 20% 30% ); } .SlotIcon.Tier1{ clip-path: polygon( 40% 10%, 45% 10%, 50% 10%, 55% 10%, 60% 10%, 60% 30%, 60% 50%, 60% 70%, 60% 90%, 55% 90%, 50% 90%, 50% 90%, 50% 80%, 50% 80%, 50% 80%, 50% 60%, 50% 40%, 50% 20%, 50% 20%, 50% 20%, 50% 40%, 50% 60%, 50% 80%, 50% 90%, 40% 90%, 40% 70%, 40% 50%, 40% 30% ); } .SlotIcon.Tier2{ clip-path: polygon( 25% 10%, 45% 10%, 50% 10%, 55% 10%, 75% 10%, 75% 30%, 75% 50%, 75% 70%, 75% 90%, 55% 90%, 50% 90%, 45% 90%, 45% 90%, 55% 90%, 55% 80%, 55% 60%, 55% 40%, 55% 10%, 50% 10%, 45% 10%, 45% 40%, 45% 60%, 45% 80%, 45% 90%, 25% 90%, 25% 70%, 25% 50%, 25% 30% ); } .SlotIcon.Tier3{ clip-path: polygon( 15% 10%, 35% 10%, 40% 10%, 60% 10%, 65% 10%, 85% 10%, 85% 50%, 85% 90%, 65% 90%, 65% 50%, 65% 10%, 60% 10%, 60% 50%, 60% 90%, 40% 90%, 40% 50%, 40% 10%, 35% 10%, 35% 50%, 35% 90%, 15% 90%, 15% 20%, 15% 30%, 15% 40%, 15% 60%, 15% 70%, 15% 80%, 15% 90% ); } .SlotIcon.Tier4{ clip-path: polygon( 10% 10%, 25% 10%, 35% 10%, 50% 10%, 62.5% 70%, 75% 10%, 90% 10%, 75% 90%, 50% 90%, 35% 10%, 25% 10%, 25% 50%, 25% 90%, 10% 90%, 10% 90%, 10% 50%, 10% 10%, 10% 10%, 10% 50%, 10% 90%, 10% 90%, 10% 20%, 10% 30%, 10% 40%, 10% 60%, 10% 70%, 10% 80%, 10% 90% ); } .SlotIcon.Tier5{ clip-path: polygon( 10% 10%, 10% 10%, 10% 10%, 30% 10%, 50% 70%, 70% 10%, 90% 10%, 65% 90%, 35% 90%, 10% 10%, 10% 10%, 10% 10%, 10% 90%, 10% 90%, 10% 90%, 10% 50%, 10% 10%, 10% 10%, 10% 50%, 10% 90%, 10% 90%, 10% 20%, 10% 30%, 10% 40%, 10% 60%, 10% 70%, 10% 80%, 10% 90% ); } .SlotIcon.Tier6{ clip-path: polygon( 10% 10%, 10% 10%, 10% 10%, 30% 10%, 50% 70%, 70% 10%, 90% 10%, 65% 90%, 35% 90%, 80% 90%, 95% 90%, 90% 50%, 80% 90%, 35% 90%, 35% 90%, 22.5% 50%, 10% 10%, 10% 10%, 10% 50%, 10% 90%, 10% 90%, 10% 20%, 10% 30%, 10% 40%, 10% 60%, 10% 70%, 10% 80%, 10% 90% ); } .SlotIcon.Tier7{ clip-path: polygon( 10% 10%, 10% 10%, 10% 10%, 30% 10%, 50% 70%, 70% 10%, 90% 10%, 65% 90%, 35% 90%, 80% 90%, 95% 90%, 90% 50%, 80% 90%, 5% 90%, 10% 50%, 20% 90%, 35% 90%, 10% 10%, 10% 50%, 10% 90%, 10% 90%, 10% 20%, 10% 30%, 10% 40%, 10% 60%, 10% 70%, 10% 80%, 10% 90% ); } .OpenIcon{ transition: all 0.3s; color:transparent; height:100%; width:100%; background: linear-gradient(130deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.4) 100%),linear-gradient(var(--SecondLayerPrimary),var(--SecondLayerPrimary)); clip-path: polygon( 10% 30%, 30% 40%, 50% 50%, 70% 40%, 90% 30%, 90% 40%, 90% 50%, 70% 60%, 50% 70%, 30% 60%, 10% 50%, 10% 40% ); } button:hover .OpenIcon{ clip-path: polygon( 15% 30%, 30% 40%, 50% 50%, 70% 40%, 85% 30%, 90% 40%, 85% 50%, 70% 60%, 50% 70%, 30% 60%, 15% 50%, 10% 40% ); } .OpenIcon.Opened{ clip-path: polygon( 10% 50%, 30% 40%, 50% 30%, 70% 40%, 90% 50%, 90% 60%, 90% 70%, 70% 60%, 50% 50%, 30% 60%, 10% 70%, 10% 60% ); } button:hover .OpenIcon.Opened{ clip-path: polygon( 15% 50%, 30% 40%, 50% 30%, 70% 40%, 85% 50%, 90% 60%, 85% 70%, 70% 60%, 50% 50%, 30% 60%, 15% 70%, 10% 60% ); } .InfoIcon{ transition: all 0.5s; color:transparent; height:100%; width:100%; background: linear-gradient(130deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.4) 100%),linear-gradient(var(--SecondLayerPrimary),var(--SecondLayerPrimary)); clip-path: polygon( 38% 10%, 63% 10%, 84% 25%, 93% 50%, 84% 75%, 63% 90%, 38% 90%, 17% 75%, 9% 50%, 16% 26%, 38% 10%, 41% 18%, 24% 30%, 18% 50%, 24% 69%, 40% 81%, 60% 81%, 76% 70%, 83% 50%, 77% 30%, 60% 18%, 41% 18%, 47% 24%, 53% 24%, 56% 24%, 56% 27%, 56% 33%, 56% 36%, 53% 36%, 53% 36%, 47% 36%, 44% 36%, 44% 44%, 56% 44%, 56% 75%, 44% 75%, 44% 44%, 44% 36%, 44% 33%, 44% 27%, 44% 24%, 47% 24%,41% 18% ); } button:hover .InfoIcon{ clip-path: polygon( 38% 10%, 63% 10%, 84% 25%, 93% 50%, 84% 75%, 63% 90%, 38% 90%, 17% 75%, 9% 50%, 16% 26%, 38% 10%, 41% 18%, 24% 30%, 18% 50%, 24% 69%, 40% 81%, 60% 81%, 76% 70%, 83% 50%, 77% 30%, 60% 18%, 41% 18%, 47% 24%, 53% 24%, 55% 25%, 56% 27%, 56% 33%, 55% 35%, 53% 36%, 53% 36%, 47% 36%, 45% 35%, 44% 44%, 56% 44%, 56% 75%, 44% 75%, 44% 44%, 45% 35%, 44% 33%, 44% 27%, 45% 25%, 47% 24%,41% 18% ); } button:focus .InfoIcon{ transition: all 0.5s; clip-path: polygon( 38% 10%, 63% 10%, 84% 25%, 93% 50%, 84% 75%, 63% 90%, 38% 90%, 17% 75%, 9% 50%, 16% 26%, 38% 10%, 41% 18%, 24% 30%, 18% 50%, 24% 69%, 40% 81%, 60% 81%, 76% 70%, 83% 50%, 77% 30%, 60% 18%, 41% 18%, 47% 24%, 53% 24%, 53% 27%, 56% 27%, 56% 33%, 53% 33%, 53% 36%, 53% 36%, 47% 36%, 47% 33%, 44% 44%, 56% 44%, 56% 75%, 44% 75%, 44% 44%, 47% 33%, 44% 33%, 44% 27%, 47% 27%, 47% 24%,41% 18% ); } .ForgeIcon{ transition: all 0.5s; color:transparent; height:100%; width:100%; background: linear-gradient(130deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.4) 100%),linear-gradient(var(--SecondLayerPrimary),var(--SecondLayerPrimary)); clip-path: polygon( 7% 44%, 47% 23%, 44% 16%, 44% 12%, 45% 10%, 52% 7%, 54% 8%, 56% 12%, 61% 22%, 62% 28%, 62% 31%, 56% 34%, 54% 33%, 52% 31%, 49% 26%, 9% 47%, 7% 46%, 7% 45%, 7% 44%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 7% 44% ); } button:hover .ForgeIcon { clip-path: polygon( 17% 34%, 55% 35%, 55% 29%, 56% 24%, 57% 23%, 64% 23%, 65% 24%, 66% 29%, 66% 39%, 65% 46%, 64% 47%, 62% 48%, 58% 48%, 56% 46%, 55% 38%, 18% 37%, 16% 36%, 16% 35%, 17% 34%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 17% 34% ); } .ForgeIcon.Animate { animation: ForgeIconAnimation 2s linear 0s 1 both; } .InventoryIcon{ transition: all 0.7s; color:transparent; height:100%; width:100%; background: linear-gradient(130deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.4) 100%),linear-gradient(var(--SecondLayerPrimary),var(--SecondLayerPrimary)); clip-path: polygon( 10% 10%, 10% 33%, 15% 33%, 15% 15%, 28% 15%, 28% 28%, 15% 28%, 15% 33%, 33% 33%, 33% 10%, 39% 10%, 39% 33%, 44% 33%, 44% 15%, 57% 15%, 57% 28%, 44% 28%, 44% 33%, 62% 33%, 62% 10%, 68% 10%, 68% 33%, 73% 33%, 73% 15%, 86% 15%, 86% 28%, 73% 28%, 73% 33%, 91% 33%, 91% 10%, 91% 33%, 10% 33%, 10% 39%, 10% 62%, 15% 62%, 15% 44%, 28% 44%, 28% 57%, 15% 57%, 15% 62%, 33% 62%, 33% 39%, 39% 39%, 39% 62%, 44% 62%, 44% 44%, 57% 44%, 57% 57%, 44% 57%, 44% 62%, 62% 62%, 62% 39%, 68% 39%, 68% 62%, 73% 62%, 73% 44%, 86% 44%, 86% 57%, 73% 57%, 73% 62%, 91% 62%, 91% 39%, 91% 68%, 10% 68%, 10% 68%, 10% 91%, 15% 91%, 15% 73%, 28% 73%, 28% 86%, 15% 86%, 15% 91%, 33% 91%, 33% 68%, 39% 68%, 39% 91%, 44% 91%, 44% 73%, 57% 73%, 57% 86%, 44% 86%, 44% 91%, 62% 91%, 62% 68%, 68% 68%, 68% 91%, 73% 91%, 73% 73%, 86% 73%, 86% 86%, 73% 86%, 73% 91%, 91% 91%, 91% 68%, 91% 39%,10% 39%, 10% 33%, 91% 33%, 91% 10%, 62% 10%, 33% 10% ); } button:hover .InventoryIcon{ transform: translateZ(0) scale(1.09); clip-path: polygon( 11% 11%, 7% 33%, 15% 33%, 15% 15%, 28% 15%, 28% 28%, 15% 28%, 15% 33%, 33% 33%, 33% 7%, 39% 7%, 39% 33%, 44% 33%, 44% 15%, 57% 15%, 57% 28%, 44% 28%, 44% 33%, 62% 33%, 62% 7%, 68% 7%, 68% 33%, 73% 33%, 73% 15%, 86% 15%, 86% 28%, 73% 28%, 73% 33%, 93% 33%, 89% 11%, 93% 33%, 7% 33%, 7% 39%, 7% 62%, 15% 62%, 15% 44%, 28% 44%, 28% 57%, 15% 57%, 15% 62%, 33% 62%, 33% 39%, 39% 39%, 39% 62%, 44% 62%, 44% 44%, 57% 44%, 57% 57%, 44% 57%, 44% 62%, 62% 62%, 62% 39%, 68% 39%, 68% 62%, 73% 62%, 73% 44%, 86% 44%, 86% 57%, 73% 57%, 73% 62%, 93% 62%, 93% 39%, 93% 68%, 7% 68%, 7% 68%, 11% 89%, 15% 90%, 15% 73%, 28% 73%, 28% 86%, 15% 86%, 15% 90%, 33% 93%, 33% 68%, 39% 68%, 39% 93%, 44% 93%, 44% 73%, 57% 73%, 57% 86%, 44% 86%, 44% 93%, 62% 93%, 62% 68%, 68% 68%, 68% 93%, 73% 92%, 73% 73%, 86% 73%, 86% 86%, 73% 86%, 73% 92%, 89% 89%, 93% 68%, 93% 39%,7% 39%, 7% 33%, 93% 33%, 89% 11%, 68% 7%, 33% 7% ); } button:focus .InventoryIcon { transform: translateZ(0) scale(1.1) rotate(360deg); clip-path: polygon( 10% 10%, 10% 33%, 15% 33%, 15% 15%, 28% 15%, 28% 28%, 15% 28%, 15% 33%, 33% 33%, 33% 10%, 39% 10%, 39% 33%, 44% 33%, 44% 15%, 57% 15%, 57% 28%, 44% 28%, 44% 33%, 62% 33%, 62% 10%, 68% 10%, 68% 33%, 73% 33%, 73% 15%, 86% 15%, 86% 28%, 73% 28%, 73% 33%, 91% 33%, 91% 10%, 91% 33%, 10% 33%, 10% 39%, 10% 62%, 15% 62%, 15% 44%, 28% 44%, 28% 57%, 15% 57%, 15% 62%, 33% 62%, 33% 39%, 39% 39%, 39% 62%, 44% 62%, 44% 44%, 57% 44%, 57% 57%, 44% 57%, 44% 62%, 62% 62%, 62% 39%, 68% 39%, 68% 62%, 73% 62%, 73% 44%, 86% 44%, 86% 57%, 73% 57%, 73% 62%, 91% 62%, 91% 39%, 91% 68%, 10% 68%, 10% 68%, 10% 91%, 15% 91%, 15% 73%, 28% 73%, 28% 86%, 15% 86%, 15% 91%, 33% 91%, 33% 68%, 39% 68%, 39% 91%, 44% 91%, 44% 73%, 57% 73%, 57% 86%, 44% 86%, 44% 91%, 62% 91%, 62% 68%, 68% 68%, 68% 91%, 73% 91%, 73% 73%, 86% 73%, 86% 86%, 73% 86%, 73% 91%, 91% 91%, 91% 68%, 91% 39%,10% 39%, 10% 33%, 91% 33%, 91% 10%, 62% 10%, 33% 10% ); } .GearIcon{ background: linear-gradient(225deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.4) 100%),linear-gradient(130deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.4) 100%),linear-gradient(var(--SecondLayerPrimary),var(--SecondLayerPrimary)); transition: all 0.3s; color:transparent; height:100%; width:100%; clip-path: polygon( 100% 69%, 84% 88%, 74% 79%, 63% 85%, 63% 100%, 38% 100%, 38% 85%, 26% 79%, 17% 87%, 0 69%, 13% 57%, 13% 43%, 0 31%, 17% 13%, 26% 21%, 38% 15%, 38% 0%, 63% 0%, 63% 14%, 75% 21%, 84% 12%, 100% 31%, 87% 43%, 87% 57% ); } button:hover .GearIcon{ clip-path: polygon( 38% 0%, 63% 0%, 63% 14%, 75% 21%, 84% 12%, 100% 31%, 87% 43%, 87% 57%, 100% 69%, 84% 88%, 74% 79%, 63% 85%, 63% 100%, 38% 100%, 38% 85%, 26% 79%, 17% 87%, 0 69%, 13% 57%, 13% 43%, 0 31%, 17% 13%, 26% 21%, 38% 15% ); } button:focus .GearIcon{ transform:rotate(360deg); clip-path: polygon( 38% 0%, 63% 0%, 63% 14%, 75% 21%, 84% 12%, 100% 31%, 87% 43%, 87% 57%, 100% 69%, 84% 88%, 74% 79%, 63% 85%, 63% 100%, 38% 100%, 38% 85%, 26% 79%, 17% 87%, 0 69%, 13% 57%, 13% 43%, 0 31%, 17% 13%, 26% 21%, 38% 15% ); } @keyframes UpgradeAnimation{ 6% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 12% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 18% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 26% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 36% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 58% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 68% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 76% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 82% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 95%, 55% 81%, 62% 81%, 62% 95%, 55% 95%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 78% 100%, 78% 79%, 78% 65%, 85% 65%, 85% 79%, 78% 79%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 88% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 65%, 55% 51%, 62% 51%, 62% 65%, 55% 65%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 49%, 78% 35%, 85% 35%, 85% 49%, 78% 49%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 94% { clip-path: polygon( 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 35%, 55% 21%, 62% 21%, 62% 35%, 55% 35%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 19%, 78% 5%, 85% 5%, 85% 19%, 78% 19%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 95% { 25% 10%, 45% 40%, 35% 40%, 35% 90%, 35% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 55% 0%, 55% 0%, 62% 0%, 62% 0%, 55% 0%, 55% 100%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 78% 0%, 78% 0%, 85% 0%, 85% 0%, 78% 0%, 78% 100%, 55% 100%, 35% 100%, 35% 90%, 15% 90%, 15% 40%, 5% 40%, 25% 10% ); } 100% { clip-path: polygon( 50% 10%, 80% 40%, 60% 40%, 60% 90%, 60% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 55% 100%, 55% 100%, 62% 100%, 62% 100%, 55% 100%, 55% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 78% 100%, 78% 100%, 85% 100%, 85% 100%, 78% 100%, 78% 100%, 55% 100%, 60% 100%, 60% 90%, 40% 90%, 40% 40%, 20% 40%, 50% 10% ); } } @keyframes ForgeIconAnimation { 0% { clip-path: polygon( 7% 44%, 47% 23%, 44% 16%, 44% 12%, 45% 10%, 52% 7%, 54% 8%, 56% 12%, 61% 22%, 62% 28%, 62% 31%, 56% 34%, 54% 33%, 52% 31%, 49% 26%, 9% 47%, 7% 46%, 7% 45%, 7% 44%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 7% 44% ); } 8% { clip-path: polygon( 17% 34%, 55% 35%, 55% 29%, 56% 24%, 57% 23%, 64% 23%, 65% 24%, 66% 29%, 66% 39%, 65% 46%, 64% 47%, 62% 48%, 58% 48%, 56% 46%, 55% 38%, 18% 37%, 16% 36%, 16% 35%, 17% 34%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 17% 34% ); } 25% { clip-path: polygon( 7% 44%, 47% 23%, 44% 16%, 44% 12%, 45% 10%, 52% 7%, 54% 8%, 56% 12%, 61% 22%, 62% 28%, 62% 31%, 56% 34%, 54% 33%, 52% 31%, 49% 26%, 9% 47%, 7% 46%, 7% 45%, 7% 44%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 7% 44% ); } 33% { clip-path: polygon( 17% 34%, 55% 35%, 55% 29%, 56% 24%, 57% 23%, 64% 23%, 65% 24%, 66% 29%, 66% 39%, 65% 46%, 64% 47%, 62% 48%, 58% 48%, 56% 46%, 55% 38%, 18% 37%, 16% 36%, 16% 35%, 17% 34%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 17% 34% ); } 55% { clip-path: polygon( 7% 44%, 47% 23%, 44% 16%, 44% 12%, 45% 10%, 52% 7%, 54% 8%, 56% 12%, 61% 22%, 62% 28%, 62% 31%, 56% 34%, 54% 33%, 52% 31%, 49% 26%, 9% 47%, 7% 46%, 7% 45%, 7% 44%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 7% 44% ); } 63% { clip-path: polygon( 17% 34%, 55% 35%, 55% 29%, 56% 24%, 57% 23%, 64% 23%, 65% 24%, 66% 29%, 66% 39%, 65% 46%, 64% 47%, 62% 48%, 58% 48%, 56% 46%, 55% 38%, 18% 37%, 16% 36%, 16% 35%, 17% 34%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 17% 34% ); } 66% { clip-path: polygon( 17% 34%, 55% 35%, 55% 29%, 56% 24%, 57% 23%, 64% 23%, 65% 24%, 66% 29%, 66% 39%, 65% 46%, 64% 47%, 62% 48%, 58% 48%, 56% 46%, 55% 38%, 18% 37%, 16% 36%, 16% 35%, 17% 34%, 2% 55%, 31% 55%, 31% 53%, 36% 53%, 39% 52%, 40% 51%, 42% 50%, 90% 50%, 92% 51%,93% 54%, 92% 57%, 88% 59%, 84% 60%, 80% 61%, 74% 63%, 70% 65%, 67% 69%, 66% 73%, 67% 78%, 70% 83%, 72% 86%, 76% 90%, 78% 93%, 79% 96%, 71% 96%, 69% 94%, 67% 93%, 64% 92%, 53% 91%, 48% 91%, 39% 92%, 37% 93%, 35% 94%, 33% 96%, 25% 96%, 26% 94%, 27% 93%, 29% 92%, 32% 90%, 34% 88%, 37% 84%, 38% 78%, 37% 74%, 35% 72%, 31% 71%, 27% 70%, 15% 64%, 2% 58%, 2% 56%, 3% 55%, 2% 55%, 17% 34% ); } 75% { clip-path: polygon( 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50% ); } 85% { clip-path: polygon( 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50% ); } 100% { clip-path: polygon( 0% 0%, 0% 0%, 0% 0%, 0% 0%, 25% 0%, 25% 0%, 25% 0%, 25% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 75% 0%, 75% 0%, 75% 0%, 75% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 33%, 100% 33%, 100% 33%, 100% 33%, 100% 66%, 100% 66%, 100% 66%, 100% 66%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 33% 100%, 33% 100%, 33% 100%, 33% 100%, 66% 100%, 66% 100%, 66% 100%, 66% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 75% 100%, 75% 100%, 75% 100%, 75% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 25% 100%, 25% 100%, 25% 100%, 25% 100%, 0% 100%, 0% 100%, 0% 100% ); } } @keyframes RewardAnimation { 0% { transform: translateZ(1px) scale(1); } 5% { transform: translateZ(1px) scale(1.04); } 15% { transform: translateZ(1px) scale(1); } 30% { transform: translateZ(1px) scale(1); } 35% { transform: translateZ(1px) scale(1.07); } 43% { transform: translateZ(1px) scale(1); } 48% { transform: translateZ(1px) scale(1); } 52% { transform: translateZ(1px) scale(1.07); } 58% { transform: translateZ(1px) scale(1); } 61% { transform: translateZ(1px) scale(1); } 63% { transform: translateZ(1px) scale(1.07); } 67% { transform: translateZ(1px) scale(1); } 69% { transform: translateZ(1px) scale(1); } 70% { opacity:1; } 71% { transform: translateZ(1px) scale(1.07); } 75% { transform: translateZ(1px) scale(1); } 76% { transform: translateZ(1px) scale(1); } 78% { transform: translateZ(1px) scale(1.07); } 82% { transform: translateZ(1px) scale(1); } 83% { transform: translateZ(1px) scale(1.07); } 85% { transform: translateZ(1px) scale(1); } 86% { transform: translateZ(1px) scale(1.07); } 88% { transform: translateZ(1px) scale(1); } 100% { transform: translateZ(1px) scale(1.07); opacity:0; } }