html{background-color:#000;scroll-behavior:smooth;height:100%}*,:after,:before{box-sizing:border-box}*{margin:0}body{height:100%;min-height:100vh;font-family:Encode Sans,sans-serif;text-rendering:optimizeSpeed;line-height:calc(1em + .5rem);font-weight:300;-webkit-user-select:none;user-select:none;overflow:auto;-webkit-font-smoothing:antialiased;animation:fadeInAnimation 3s ease-out 1 forwards}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}html::-webkit-scrollbar{display:none}ul{list-style:none;padding:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}a{text-decoration:none;color:#fff}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;font-weight:300;color:#fff;text-shadow:0px 2px 4px rgba(0,0,0,.4)}.title{border-bottom:1px solid #ccc;display:inline-block;top:5%;left:5%;position:absolute;padding:2rem .5rem 1rem;color:#fff}main{display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:150rem;transform-style:preserve-3d;transform-origin:center;position:relative;margin:0 auto;min-height:100vh;padding-bottom:2rem}.container{position:absolute;top:0;margin-top:6rem;background-color:#f6a800;border-radius:.5rem;min-width:min(22rem,90vw);width:50%;max-width:32rem;min-height:auto;padding:2rem;transform-style:preserve-3d;transform-origin:center;backface-visibility:hidden;overflow:hidden;box-shadow:0 .5rem 1rem #0003;transition:all .5s ease-out}.container-front{transform:rotateY(0)}.container-front.flipped,.container-back{transform:rotateY(-180deg)}.container-back.flipped{transform:rotateY(0)}.container header{text-align:center}.container header h2{margin-bottom:.8rem;font-size:1.5rem}.container header h3{margin-top:.2rem;font-size:1rem;width:90%;margin:0 auto}.setting{margin:1rem;display:flex;flex-direction:column;color:#fff;text-shadow:0px 2px 4px rgba(0,0,0,.4)}.setting label{font-size:1rem;font-weight:400;letter-spacing:1px}.setting .sub-label{color:#fff;font-weight:300;font-size:1rem;margin:.2rem 0;letter-spacing:1px}input[type=text]{width:100%;padding:.5rem;margin:.5rem 0;border:1px solid #fff;border-radius:.5rem;font-size:1rem;font-weight:200;color:#fff;background-color:#fc503c!important;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 2px 4px #0006}input::placeholder{color:#fff;opacity:1}input[type=text]:focus{outline:none}.colors{display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin-bottom:1rem}.colors .setting{align-items:center;text-align:center}input[type=color]{width:3rem;height:3rem;border-radius:.3rem;border:1px solid #fc503c;margin:.5rem 0;font-size:1rem;font-weight:200;color:#fff;padding:.2rem;background-color:#fff;appearance:none;box-shadow:0 2px 2px #00000042;cursor:pointer}input[type=color]:focus{outline:none;border:2px solid rgb(255,76,56)}input::-webkit-color-swatch-wrapper{border:0}input::-webkit-color-swatch{border:0}input::-moz-color-swatch{border:0}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:.4rem;border-radius:.2rem;background-color:#fc503c;outline:none;border:none;padding:0;margin:0;box-shadow:0 2px 2px #00000042}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.2rem;height:1.2rem;border-radius:50%;border:1px solid rgb(255,49,26);background-color:#fff;cursor:pointer;box-shadow:0 2px 2px #00000042;transition:all .2s ease-out}input[type=range]::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:focus{background-color:#fc503c}input::-moz-range-track{background:#ffe0dd;border:none;border-radius:.2rem}input::-moz-focus-inner,input::-moz-focus-outer{border:0}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1rem;height:1rem;border-radius:50%;background-clip:content-box;border:1px solid rgb(255,49,26);background-color:#fff5f4}input[type=radio]:checked{background-color:#fc503c}input[type=radio]:focus{outline:none}fieldset{display:flex;flex-wrap:wrap;border:none;padding:0;margin:0;justify-content:space-between}fieldset legend{font-size:1rem;font-weight:400;margin-bottom:.5rem;letter-spacing:1px}fieldset div{border:1px solid #fc503c;border-radius:.2rem;padding:.25rem .5rem;display:flex;align-items:center;margin-right:.25rem;margin-bottom:.5rem;box-shadow:0 2px 2px #00000042}fieldset div:last-child{margin-right:0}fieldset div input{margin-right:.5rem;cursor:pointer}fieldset div label{cursor:pointer;font-size:.8rem;font-weight:300}.button-box{text-align:center}button{width:95%;padding:.5rem;border:1px solid #fc503c;border-radius:.3rem;font-size:1.2rem;font-weight:300;color:#fff;background-color:#fc503c;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 2px 4px #0006;text-shadow:0px 2px 4px rgba(0,0,0,.4);cursor:pointer;transition:all .2s ease-out}button:hover{transform:translateY(-.2rem);background-color:#ff442f}button:active{transform:scale(.9);box-shadow:inset 0 0 20px #fff}button:focus{outline:none}button:disabled{background-color:#fff5f4;color:#fd8476;cursor:not-allowed}input.error{border:3px solid rgb(255,79,59)}input.error:focus{border:2px solid rgb(255,25,0)}.setting img{width:90%;margin:.5rem auto}.info{margin-top:1rem;display:flex;flex-direction:column;text-align:center;font-weight:300;font-size:1rem;width:80%;margin:0 auto;text-shadow:0px 2px 4px rgba(0,0,0,.4)}.info .cta button{margin-top:1rem}