@font-face{font-family:"Commissioner-Regular";src:url(5a4e8a555dc8e6dd8fba.ttf)}body{margin:0;background-color:#57362c;color:#cbefda;font-family:"Commissioner-Regular"}body .container{display:grid;padding:1em;justify-content:center;justify-items:center}body .container .load-animation{transform:translateY(0px) !important;opacity:1 !important}body .container .bounce-animation{transform:translateY(0px) !important;opacity:1 !important}body .container .main-title{font-size:48px;color:#e1e1e1;transition:.3s;transform:translateY(-30px);opacity:0}body .container .form-container{position:absolute;top:10em;bottom:4em;width:70%;min-height:300px;padding:.7em;background-color:#099459;border-radius:7px;box-sizing:border-box;box-shadow:5px 5px 10px -2px rgba(0,0,0,.4666666667);transition:.3s;transform:translateY(-60px);opacity:0}body .container .form-container .form{position:relative;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;border-radius:7px;border:4px dashed rgba(0,0,0,.4666666667);transition:.2s}body .container .form-container .form:hover{border:4px dashed rgba(51,51,51,.4666666667)}body .container .form-container .form input{position:absolute;top:0;box-sizing:border-box;left:0;width:100%;height:100%;opacity:0;cursor:pointer;display:flex;background-color:#000;z-index:10}body .container .form-container .form .content-block{display:grid;justify-items:center}body .container .form-container .form .content-block .icon{position:relative;width:70px;height:70px}body .container .form-container .form .content-block .icon .up-icon{position:absolute;width:70px;height:70px;background-image:url(c5c3559cf21e7190e694.svg);transform:translateY(0px);animation:up 1s infinite;transition:.2s}body .container .form-container .form .content-block .icon .up-icon.active{animation:up_active 1s 1 forwards ease-out}body .container .form-container .form .content-block .icon .down-icon{position:absolute;width:70px;height:70px;background-image:url(4f38e42592d767d94d0b.svg)}body .container .form-container .form .content-block svg{width:70px;height:70px;fill:#e1e1e1}body .container .form-container .form .content-block .text{text-align:center;font-size:28px;color:#e1e1e1;box-sizing:border-box}body .container .output_img{transform:translateY(-60px);opacity:0;transition:.3s}body .container .output_img img{max-width:500px;max-height:350px;border-radius:5px}body .container .output_colors{width:100%;display:flex;flex-wrap:wrap;gap:.5em;margin-top:.5em;justify-content:space-between;box-sizing:border-box;transition:.3s}body .container .output_colors div{position:relative;padding:1em;width:50px;height:30px;border-radius:5px;transform:translateY(30px);cursor:pointer;opacity:0;transition:.3s}body .container .output_colors div .copied_alert{padding:4px;position:absolute;width:100%;height:25px;color:#e1e1e1;font-size:14px;text-align:center;justify-content:center;opacity:0;left:0;right:0;bottom:10px;box-sizing:border-box;background-color:#099459;transition:.1s}body .container .output_colors div .copied_alert.active{opacity:1;bottom:0px}body .container .output_colors div .color-text{margin:0;position:absolute;font-size:14px;text-align:center;top:20px;left:0;right:0;left:0}body .container .delete-block{display:none;margin-top:2em;transition:.3s;opacity:0;transform:translateY(40px);cursor:pointer}body .container .delete-block svg{width:50px;height:50px;fill:#e1e1e1}@keyframes up{0%{transform:translateY(0px)}50%{transform:translateY(-5px)}100%{transform:translateY(0px)}}@keyframes up_active{from{transform:translateY(-5px)}to{transform:translateY(0px)}}