@font-face{font-family:"Mona Sans";src:url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"),url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");font-weight:100 1000}@layer properties{@property --bg-position{syntax:"<number>";inherits:true;initial-value:100}@property --after-blur{syntax:"<number>";inherits:true;initial-value:0}@property --after-opacity{syntax:"<number>";inherits:true;initial-value:1}@property --before-opacity{syntax:"<number>";inherits:true;initial-value:.3}@property --btn-offset{syntax:"<number>";inherits:true;initial-value:1}@property --btn-scale{syntax:"<number>";inherits:true;initial-value:1}}:root{--debug: 0;--body-bg: hsl(0, 0%, 6%);--btn-bg: hsl(0, 0%, 0%);--btn-border-width: 1.5;--btn-offset: 1;--btn-scale: 1;--after-bg: linear-gradient(to right, rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0), rgb(0 0 0));--after-blur: 10;--after-opacity: 1;--after-pos-y: 10;--before-opacity: 0.3;--bg-position: 100;--color-white: hsl(0, 0%, 100%);--color-cyan: hsl(180, 100%, 50%);--color-blue: hsl(240, 100%, 50%);--color-purple: hsl(270, 100%, 50%);--color-pink: hsl(330, 40%, 70%);--color-red: hsl(0, 100%, 50%);--color-yellow: hsl(60, 100%, 50%);--color-lime: hsl(90, 100%, 75%);--color-orange: oklch(69.1% 0.223 36.85)}@supports(color: color(display-p3 0 0 0)){:root{--color-white: color(display-p3 1 1 1);--color-cyan: color(display-p3 0 1 1);--color-blue: color(display-p3 0 0 1);--color-purple: color(display-p3 0.5 0 1);--color-pink: color(display-p3 1 0.4 0.7);--color-red: color(display-p3 1 0 0);--color-yellow: color(display-p3 1 1 0);--color-lime: color(display-p3 0.75 1 0);--color-orange: color(display-p3 0.96 0.39 0.2)}}*,*:before,*:after{box-sizing:border-box;outline:calc(var(--debug)*1px) dotted red;outline-offset:-1px}.slogon22 button{all:unset;background:rgba(0,0,0,0);border-width:0;transform:scale(var(--btn-scale));transition:--bg-position 3s ease,--after-blur .3s ease,--before-opacity .3s ease,--btn-offset .3s ease,--btn-scale .2s cubic-bezier(0.76, -0.25, 0.51, 1.13)}.slogon22 button>div{display:block;padding:.8em 1.2em;background:#fff;background:linear-gradient(264deg, rgb(255, 255, 255) 0%, rgb(142, 152, 161) 13%, rgb(37, 77, 112) 52%, rgb(99, 99, 105) 81%, rgb(255, 255, 255) 100%);color:#fff;font-weight:bold;border-radius:8px;font-size:55px;position:relative}.slogon22 button>div:not(:hover){transition:--after-blur .3s ease}.slogon22 button>div>span{background:linear-gradient(to right, var(--color-white), var(--color-white), var(--color-cyan), var(--color-blue), var(--color-purple), var(--color-pink), var(--color-red), var(--color-yellow), var(--color-lime), var(--color-white), var(--color-white)) no-repeat calc(var(--bg-position)*1%) 0%/900%;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);letter-spacing:.15ch;font-weight:600}.slogon22 button>div:after{display:block;position:absolute;content:"";width:100%;height:100%;background:#fff;background:linear-gradient(264deg, rgb(255, 255, 255) 0%, rgb(142, 152, 161) 13%, rgb(37, 77, 112) 52%, rgb(99, 99, 105) 81%, rgb(255, 255, 255) 100%);transform:translateY(calc(var(--after-pos-y) * 0.5px));left:0;top:0;z-index:-2;filter:blur(calc(var(--after-blur) * 1px));opacity:var(--after-opacity)}.slogon22 button>div:before{content:"";display:block;position:absolute;width:calc(100% + var(--btn-border-width)*2*1px);height:calc(100% + var(--btn-border-width)*2*1px);background:linear-gradient(to right, var(--color-white), var(--color-white), var(--color-cyan), var(--color-blue), var(--color-purple), var(--color-pink), var(--color-red), var(--color-yellow), var(--color-lime), var(--color-white), var(--color-white)) no-repeat calc(var(--bg-position)*1%) 0%/900%;border-radius:9px;z-index:-1;top:calc(var(--btn-border-width)*-1px);left:calc(var(--btn-border-width)*-1px);opacity:var(--before-opacity)}.slogon22 button:hover{--btn-scale: 1.05;--bg-position: 0;--after-bg: linear-gradient(to right, var(--color-white), var(--color-white), var(--color-cyan), var(--color-blue), var(--color-purple), var(--color-pink), var(--color-red), var(--color-yellow), var(--color-lime), var(--color-white), var(--color-white));--after-blur: 30;--after-opacity: 0.3;--after-pos-y: 0;--before-opacity: 1;--btn-offset: 5}.slogon22 button:hover:active{--btn-scale: 0.98;--after-blur: 15}*{box-sizing:border-box}.main-content{text-align:center;text-transform:uppercase;scroll-snap-type:y mandatory;position:relative;height:100vh}.hover,.word,.texth1{cursor:pointer}.texth1{position:relative;color:#fff;font:900 72px Noto Sans;text-shadow:0 10px 25px rgba(0,0,0,.3);background:#575757;background:linear-gradient(275deg, rgb(87, 87, 87) 0%, rgb(92, 92, 92) 28%, rgb(130, 130, 130) 45%, rgb(89, 88, 88) 68%, rgb(255, 255, 255) 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-stroke:8px rgba(0,0,0,0);padding:20px}.concept{position:relative;padding:5em;height:70vh;overflow:hidden;scroll-snap-align:center}.concept:before{content:"";width:100%;height:100%;top:0;left:0;opacity:0;transition:all 1s cubic-bezier(0.19, 1, 0.22, 1)}.concept:hover:before{opacity:.5}.concept-two{display:grid;grid:100%/repeat(6, 1fr);padding:5em 15em}.hover{position:relative;display:grid;place-items:center}.texth1{color:rgba(0,0,0,0);text-align:0 1px 1px;-webkit-text-stroke:2px #fff;text-shadow:none;transition:.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.hover:hover .texth1{transform:scale(1.5);-webkit-text-stroke:2px rgba(0,0,0,0);text-shadow:0 10px 20px rgba(0,0,0,.2);background-image:linear-gradient(90deg, rgb(255, 82, 82) 0%, rgb(10, 232, 252) 50%, rgb(255, 229, 0) 100%)}