#menue .main{background:var(--fontcolor);color:#000;z-index:1;position:absolute;top:0;left:-370px;bottom:0;width:270px;padding:140px 50px 100px;transition:left 1s;display:flex;flex-direction:column;justify-content:space-between}#menue .main ul{list-style-type:none;margin:0;padding:0}#menue .main ul.main-nav li{margin-bottom:7px}#menue .main ul.main-nav li a{font-size:40px;font-family:soehne-fett}#menue .main ul.footer-nav li{margin-bottom:5px}#menue .main ul.footer-nav li a{font-size:18px;font-family:soehne-mono;text-transform:uppercase}#menue .main ul.footer-nav li a:before{content:"<"}#menue .main ul.footer-nav li a:after{content:">"}#menue .close-btn{position:absolute;top:44vh;right:20px;padding:20px;cursor:pointer}#menue .close-btn span{width:70px;height:4px;background:#000;text-indent:-10000px;display:block;cursor:pointer}#menue.open .main{left:0}#menue .opener{position:absolute;left:50px;top:43vh;bottom:0;margin:auto;cursor:ponter;display:block;z-index:1;cursor:pointer;transition:left .1s}#menue .opener span{height:70px;width:4px;background:var(--fontcolor);display:block;float:left;margin:0 2px;cursor:ponter}#menue.open .opener{left:-20px}a{cursor:pointer}#header{max-height:200px}#logo{cursor:pointer}svg{width:200px;height:45px;fill:var(--fontcolor)}.f-fgx{font-family:phase-fgx;font-variation-settings:"phon" 67,"phtw" 9,"phth" 45;font-size:2em}.f-hgx{font-family:phase-hgx;font-variation-settings:"phon" 67,"phtw" 9,"phth" 45;font-size:2em}.f-dgx{font-family:phase-dgx;font-variation-settings:"phon" 67,"phtw" 9,"phth" 45;font-size:2em}.f-gflex{font-family:GT Flexa VAR;font-variation-settings:"wght" 317,"wdth" 100,"ital" 100;font-size:2em}.f-cheee{font-family:cheee;font-variation-settings:"yest" 0,"grvt" 430,"temp" 700;font-size:2em}#buttons{align-self:flex-end;display:grid;grid-column-gap:30px;grid-template-columns:1fr 1fr 1fr 1fr 1fr}.dropbtn{background:transparent;width:100%;color:var(--fontcolor);text-align:left;padding:10px 10px 10px 20px;font-family:soehne-mono;text-transform:uppercase;font-size:18px;line-height:1;height:45px;position:relative}.dropbtn,.dropbtn .icon{border:2px solid var(--fontcolor)}.dropbtn .icon{width:24px;height:24px;display:block;position:absolute;text-align:center;top:6px;bottom:6px;right:6px}.dropbtn .icon:after{content:"+";font-size:25px;line-height:20px}.dropbtn .label:before{content:"<";line-height:1}.dropbtn .label:after{content:">";line-height:1}.dropup-content{font-family:soehne-mono;display:none;position:absolute;bottom:44px;width:100%;z-index:1;border:2px solid var(--fontcolor);box-sizing:border-box;padding:10px;padding-left:35px}.dropup-content a{position:relative}.dropup-content a i{display:block;border:2px var(--fontcolor) solid;background:transparent;height:10px;width:10px;position:absolute;right:10px;top:8px}.audio.dropup-content a i{right:10px;top:21px}.dropup-content i.voll{background:var(--fontcolor)}.dropup-content-color .holder{font-family:soehne-mono;display:none;position:absolute;bottom:44px;width:100%;z-index:1;border:2px solid var(--fontcolor);box-sizing:border-box;padding:10px;padding-left:35px}.dropup-content span{font-family:soehne-fett;font-size:16px;text-transform:uppercase;letter-spacing:.1em}.color .dropup-content{padding:10px}.color .dropup-content .holder{padding-left:0;background:transparent;display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}.color .dropup-content .holder a{border:2px var(--fontcolor) solid}.wide .dropup-content .holder{padding:10px;background:transparent;display:grid;grid-template-columns:2fr;grid-gap:10px}.dropup-content a{color:var(--fontcolor);text-decoration:none;display:block;border:0 solid var(--fontcolor);height:57px;font-size:18px}.dropup-content.font a{font-size:30px;height:45px}.dropup-content.audio a{font-family:soehne-fett;padding:8px 0}.dropup-content.audio a,.dropup-content.audio a span{font-size:16px;text-transform:uppercase;letter-spacing:.1em}.dropup-content.audio a span{font-family:soehne-mono;padding-bottom:5px}.dropup{position:relative}.dropup:hover .dropbtn{background:var(--fontcolor);color:var(--bgcolor)}.dropup:hover .dropbtn .icon{border-color:var(--background)}.dropup.open .dropup-content{display:block}.holder.sliders>div{display:grid;grid-template-columns:1fr 4fr 1fr;align-items:center;justify-items:left;height:25px;font-family:soehne-mono;font-size:18px}.slider{-webkit-appearance:none;width:100%;height:2px;border-radius:0;background:var(--fontcolor);outline:none;opacity:1;transition:opacity .2s}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:0;background:var(--fontcolor);cursor:pointer}.slider::-moz-range-thumb{width:14px;height:14px;border-radius:0;background:var(--fontcolor);cursor:pointer}.holder{display:block;font-family:soehne-mono}#results{align-self:center}#text{font-size:70px;text-align:center;text-transform:none}#text,#text button{color:var(--fontcolor)}#text button{text-transform:uppercase;font-family:soehne-fett;border:2px solid var(--fontcolor);background:transparent;font-size:22px;padding:5px 20px;cursor:pointer}#text button:hover{border:1px solid var(--fontcolor);background:var(--fontcolor);color:#000}#text p{color:var(--fontcolor)}#debug{position:absolute;right:10px;top:10px;display:flex}#debug h4{font-weight:400;margin:0 10px 0 0;padding:0}#debug div.results,#debug h4{font-family:soehne-mono;font-size:18px}#debug div.results{color:var(--fontcolor);display:grid;grid-row-gap:5px}#debug div.results .item{display:grid;grid-column-gap:20px;align-items:center;grid-template-columns:150px 1fr 100px}#debug div.results .item span{display:flex;justify-content:flex-end}#debug div.results .item span:after{content:"=";margin-left:20px}#debug div.results .item .result-slider{width:100%;height:4px;border:2px solid var(--fontcolor)}#debug div.results .item .result-slider div{background:var(--fontcolor);height:4px;width:auto}@font-face{font-family:soehne-fett;font-style:normal;font-weight:400;src:local("soehne"),local("soehne-fett"),url(../fonts/soehne-web-fett.dc275fd0.woff2) format("woff2")}@font-face{src:url(../fonts/GT_Flexa_VAR.86fd520e.woff2) format("woff2-variations");font-family:GT Flexa VAR;font-style:normal}@font-face{font-family:soehne-mono;font-style:normal;font-weight:400;src:local("soehne-mono"),local("soehne-mono-buch"),url(../fonts/soehne-mono-web-buch.3beb5a27.woff2) format("woff2")}@font-face{src:url(../fonts/CheeeVariable.aa849f6b.woff2) format("woff2-variations");font-family:cheee;font-style:normal}@font-face{font-family:phase-fgx;font-style:normal;font-weight:400;src:url(../fonts/Phase-FGX.826951f1.ttf) format("truetype")}@font-face{font-family:phase-dgx;font-style:normal;font-weight:400;src:url(../fonts/Phase-DGX.cd337c93.ttf) format("truetype")}@font-face{font-family:phase-hgx;font-style:normal;font-weight:400;src:url(../fonts/Phase-HGX.e4faa280.ttf) format("truetype")}:root{--bgcolor:#000;--fontcolor:#fff}html{width:100vw}body,html{height:100vh;margin:0;padding:0}body{background:var(--bgcolor);color:var(--fontcolor);font-family:soehne-fett;overflow:hidden;font-size:15px}main{margin:0;padding:0;width:100vw;height:100vw}#holder{height:calc(100vh - 200px);margin:80px 100px;display:grid;grid-template-rows:2fr 6fr 2fr;position:relative}body.supermysticgradient{background:linear-gradient(-45deg,#ee7752,#e73c7e,var(--bgcolor),#23d5ab);background-size:400% 400%;-webkit-animation:gradient 15s ease infinite;animation:gradient 15s ease infinite}div.plaingrain{display:none}body.plaingrainbackground div.plaingrain{display:block;background-color:#943b3b;margin:0;overflow-x:hidden;position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;width:200%;height:200vh;background:transparent url(http://assets.iceable.com/img/noise-transparent.png) repeat 0 0;background-repeat:repeat;-webkit-animation:bg-animation .5s infinite;animation:bg-animation .5s infinite;opacity:.95;visibility:visible}@-webkit-keyframes bg-animation{0%{transform:translate(0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}40%{transform:translate(-5%,15%)}50%{transform:translate(-10%,5%)}60%{transform:translate(15%)}70%{transform:translateY(10%)}80%{transform:translate(-15%)}90%{transform:translate(10%,5%)}to{transform:translate(5%)}}@keyframes bg-animation{0%{transform:translate(0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}40%{transform:translate(-5%,15%)}50%{transform:translate(-10%,5%)}60%{transform:translate(15%)}70%{transform:translateY(10%)}80%{transform:translate(-15%)}90%{transform:translate(10%,5%)}to{transform:translate(5%)}}.lead{font-size:3.6em}.align-center{text-align:center}.content{max-width:1200px;width:80vw;margin:0 auto}@-webkit-keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.optiillusion{display:none}body.opticalbulbillustion .optiillusion{display:block;position:fixed;top:-10vh;left:-10vw;height:120vh;width:120vw}#circle{width:110vw;height:110vh;top:0;left:0;right:0;bottom:0;margin:auto;position:absolute;background:radial-gradient(var(--bgcolor) 3px,transparent 5px,#000 7px,transparent 9px,var(--bgcolor) 11px,transparent 13px,15px,transparent 17px,#000 19px,transparent 21px,var(--bgcolor) 23px,transparent 25px,#fff 27px,transparent 29px,#000 31px,transparent 33px);background-size:30px 30px}.optiillusion .a{-webkit-animation:adjustHue 1s infinite alternate}@-webkit-keyframes adjustHue{0%{-webkit-filter:hue-rotate(30deg)}50%{-webkit-filter:hue-rotate(60deg)}to{-webkit-filter:hue-rotate(90deg)}}@-webkit-keyframes loading{to{-webkit-transform:rotate(1turn)}}@keyframes loading{to{transform:rotate(1turn)}}.optiillusion #circle{-webkit-animation-name:blinker;-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-moz-animation-name:blinker;-moz-animation-duration:3s;-moz-animation-timing-function:linear;-moz-animation-iteration-count:infinite;animation-name:blinker;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite;color:red}@-webkit-keyframes blinker{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes blinker{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.optiillusion .a{background:radial-gradient(var(--bgcolor) 3px,transparent 5px,#000 7px,transparent 9px,var(--bgcolor) 11px,transparent 13px,15px,transparent 17px,#000 19px,transparent 21px,var(--bgcolor) 23px,transparent 25px,#fff 27px,transparent 29px,#000 31px,transparent 33px);background-color:#000;background-size:32px 32px;overflow:hidden;width:120vw;height:120vh;margin:-10px}.opticalbulbillustion div.optiillusion{z-index:-10;overflow:hidden;background:#000;transform-style:preserve-3d;@include perspective(1000px)}#defaultCanvas0{z-index:-1;position:absolute;top:0;left:0;height:100vh;width:100vw}