body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}body,html,ol,ul{margin:0;padding:0}:root{background-color:#d6d6d6;color:#666}.header{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;box-shadow:0 10px 10px rgba(0,0,0,.133333),inset 0 -10px 10px rgba(0,0,0,.133333)}@keyframes animate{0%{background-position:0}to{background-position:110%}}.header a{text-decoration:none;position:relative;background:linear-gradient(56deg,#34b,#34b 48%,#6ad 50%,#6ad 52%,#34b 54%);background-repeat:no-repeat;background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:hsla(0,0%,100%,0)}.header a:hover{animation:animate 2s ease infinite}.header .title{padding:0 1rem;margin:2rem;border-radius:40px;align-self:flex-start;box-shadow:-5px -5px 10px rgba(0,0,0,.2),inset 5px 5px 10px rgba(0,0,0,.2),5px 5px 10px hsla(0,0%,100%,.4),inset -5px -5px 10px hsla(0,0%,100%,.4)}.header h1{margin:1rem;background:-webkit-linear-gradient(-60deg,#333,#00f);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header .nav{margin:2rem;padding:1rem 0 1rem 1rem;border-radius:40px;display:flex;flex-direction:row;box-shadow:-5px -5px 10px rgba(0,0,0,.2),inset 5px 5px 10px rgba(0,0,0,.2),5px 5px 10px hsla(0,0%,100%,.4),inset -5px -5px 10px hsla(0,0%,100%,.4)}.header a{font-weight:700;font-size:1.5rem;padding-right:1rem}.main{padding:1vw 5vw;display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.main *{animation:fadeIn 2s}.main h2{color:#555;padding-left:2rem}@keyframes growOut{0%{box-shadow:0 0 0 transparent}to{box-shadow:-10px -10px 10px hsla(0,0%,100%,.4),inset 10px 10px 10px hsla(0,0%,100%,.4),10px 10px 10px rgba(0,0,0,.2),inset -10px -10px 10px rgba(0,0,0,.2)}}@keyframes growIn{0%{box-shadow:inset 0 0 0 transparent}to{box-shadow:inset -10px -10px 5px hsla(0,0%,100%,.4),inset 10px 10px 5px rgba(0,0,0,.2)}}@keyframes growOutNarrow{0%{box-shadow:0 0 0 transparent}to{box-shadow:-10px -10px 5px hsla(0,0%,100%,.4),inset 10px 10px 5px hsla(0,0%,100%,.4),10px 10px 5px rgba(0,0,0,.2),inset -10px -10px 5px rgba(0,0,0,.2)}}.main .panel{max-width:900px;height:auto;margin-bottom:2rem;border-radius:3rem;box-shadow:-10px -10px 10px hsla(0,0%,100%,.4),inset 10px 10px 10px hsla(0,0%,100%,.4),10px 10px 10px rgba(0,0,0,.2),inset -10px -10px 10px rgba(0,0,0,.2);align-self:center;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;animation:growOut 2s}.main .panel .preview-container{height:20rem;box-shadow:inset -10px -10px 5px hsla(0,0%,100%,.4),inset 10px 10px 5px rgba(0,0,0,.2);animation:growIn 2s}.main .panel .options,.main .panel .preview-container{display:flex;align-items:center;justify-content:center;margin:1rem;width:20rem;border-radius:1rem}.main .panel .options{height:30rem;flex-direction:column;text-align:center;box-shadow:-10px -10px 10px hsla(0,0%,100%,.4),inset 10px 10px 10px hsla(0,0%,100%,.4),10px 10px 10px rgba(0,0,0,.2),inset -10px -10px 10px rgba(0,0,0,.2);animation:growOut 2s}.main .panel .options h4{margin:0}.main .panel .options .sliders{display:flex;flex-direction:column;justify-content:center}.main .panel .options .css-display{width:70%;padding:1rem;margin-top:2rem;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;background-color:#444;color:#bbb;font-size:12px}.main .panel .options .css-display p{margin:.1em}.main .panel .options .css-display o{color:#e19933}.main .panel .options .css-display b{color:#3bc}.main .sub{display:flex;align-items:flex-start;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;animation:fadeIn 2s}.main .sub .intro{max-width:30rem;padding-right:3vw}.main .sub .intro b{background:-webkit-linear-gradient(-60deg,#00f,#69d);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.main .ex-container{display:flex;flex-direction:column}.main .ex-container .row{display:flex;flex-wrap:wrap;flex-direction:row;animation:fadeIn 3s ease}.main .ex-container .row .item{margin:1vw;animation:fadeInRight 2s ease;position:relative}@keyframes fadeInRight{0%{opacity:0;left:-2vw}to{opacity:1;left:0}}.main .ex-container .row .description{font-weight:600;color:#666}.main .ex-container .row .pad-top{padding-top:4rem}.main .ex-container .row .example{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;box-shadow:10px 10px 20px rgba(0,0,0,.2),-10px -10px 20px hsla(0,0%,100%,.4)}.main .ex-container .row .hole{box-shadow:inset 5px 5px 10px rgba(0,0,0,.2),inset -5px -5px 10px hsla(0,0%,100%,.4);display:flex;align-items:center;justify-content:center}.main .ex-container .row .led{height:1rem;width:1rem;background-color:#666;transition:.3s}.main .ex-container .row .led:hover{background-color:orange;box-shadow:0 0 5px orange;transition:.2s}.main .ex-container .row .led:active{background-color:red;box-shadow:0 0 5px orange;transition:.5s}.main .ex-container .row .concave{box-shadow:inset 5px 5px 10px rgba(0,0,0,.2),inset -5px -5px 10px hsla(0,0%,100%,.4),10px 10px 20px rgba(0,0,0,.2),-10px -10px 20px hsla(0,0%,100%,.4)}.main .ex-container .row .concave:active{box-shadow:inset 5px 5px 5px rgba(0,0,0,.2),inset -5px -5px 5px hsla(0,0%,100%,.4),10px 10px 20px rgba(0,0,0,.2),-10px -10px 20px hsla(0,0%,100%,.4);transition-duration:.2s}.main .ex-container .row .convex{box-shadow:inset 5px 5px 5px hsla(0,0%,100%,.4),inset -5px -5px 5px rgba(0,0,0,.2),10px 10px 20px rgba(0,0,0,.2),-10px -10px 20px hsla(0,0%,100%,.4)}.main .ex-container .row .convex:active{box-shadow:inset -5px -5px 5px hsla(0,0%,100%,.4),inset 5px 5px 5px rgba(0,0,0,.2),10px 10px 20px rgba(0,0,0,.2),-10px -10px 20px hsla(0,0%,100%,.4);transition-duration:.2s}.main .ex-container .row .smaller{height:2rem;width:2rem}.main .ex-container .row .small{height:3rem;width:3rem}.main .ex-container .row .medium{height:5rem;width:5rem}.main .ex-container .row .circle-switch{height:5rem;width:3rem;border-radius:100%/50%}.main .ex-container .row .big{height:8rem;width:8rem}.main .ex-container .row .inner{width:6rem;height:6rem;box-shadow:inset 5px 5px 20px rgba(0,0,0,.133333),inset -5px -5px 20px hsla(0,0%,100%,.4)}.main .ex-container .row .inner-ring{height:6rem;width:6rem;box-shadow:inset 5px 5px 5px rgba(0,0,0,.133333),-5px -5px 5px rgba(0,0,0,.133333),5px 5px 10px hsla(0,0%,100%,.4)}.main .ex-container .row .ring{box-shadow:inset 5px 5px 5px hsla(0,0%,100%,.4),inset -5px -5px 5px rgba(0,0,0,.2),10px 10px 20px rgba(0,0,0,.2),-10px -10px 20px hsla(0,0%,100%,.4)}.main .ex-container .row .circle{border-radius:100%}.main .ex-container .row .square{border-radius:20%}.main .ex-container .row .double-radius{border-radius:50%/30%}.main .ex-container .row .switch,.main .ex-container .row .switch input[type=checkbox]{-webkit-user-select:none;-ms-user-select:none;user-select:none}.main .ex-container .row .switch input[type=checkbox]{position:absolute;-webkit-appearance:none;width:5rem;height:3rem;border:5px solid hsla(0,0%,100%,0);outline:none;box-shadow:inset 5px 5px 10px rgba(0,0,0,.2),inset -5px -5px 10px hsla(0,0%,100%,.4),5px 5px 10px rgba(0,0,0,.2),-5px -5px 10px hsla(0,0%,100%,.4)}.main .ex-container .row .switch input:before{content:"";position:absolute;margin:auto;top:0;bottom:0;left:.2rem;height:2rem;width:2rem;box-shadow:inset 5px 5px 5px hsla(0,0%,100%,.4),inset -5px -5px 5px rgba(0,0,0,.2),3px 3px 5px rgba(0,0,0,.2),-3px -3px 5px hsla(0,0%,100%,.4);transition:.3s;z-index:9999}.main .ex-container .row .switch input[type=checkbox]:checked:before{left:2rem;transition:.3s}.main .ex-container .row .circle-switch input[type=checkbox]{border-radius:3rem}.main .ex-container .row .circle-switch input:before{border-radius:50%}.main .ex-container .row .square-switch input[type=checkbox]{border-radius:1rem}.main .ex-container .row .square-switch input:before{border-radius:.5rem}.main .ex-container .row .dr-switch input[type=checkbox]{border-radius:50%}.main .ex-container .row .dr-switch input:before{height:1.5rem;border-radius:100%}.footer{position:fixed;bottom:0;width:100%;background-color:#000}.footer nav{display:flex;flex-direction:row}.footer nav a{font-weight:600;text-decoration:none;color:#ddd;margin-left:1rem;padding:.5rem}
/*# sourceMappingURL=main.e6c36bf5.chunk.css.map */