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