.colors-input-container{align-items:center;background:#fff;border-radius:4px;bottom:50px;box-shadow:0 0 5px 2px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:15px;margin:0 auto;max-width:-moz-fit-content;max-width:fit-content;padding:30px;position:relative}.colors-input-container input{border-radius:4px;color:#3e3e52;font-size:34px;padding:5px 10px;text-align:center;width:365px}.colors-input-container label{align-items:center;display:flex;gap:15px;justify-content:space-between;width:100%}.section-header{color:#fff;padding-top:20px}.colors-submit{background:transparent;border:0;outline:none}.colors-submit svg{height:40px;width:40px}.colors-submit svg:focus{outline:none}.colors-submit:hover svg{fill:#145cf2;animation:spin .3s ease-in-out 0s 1}.color-title,.uppercase{text-transform:uppercase}.color-title{font-size:18px;font-weight:700}.center{margin-bottom:40px}button.easy-button.button-success,button.easy-button.button-success:hover{background:#2ea141;border-color:#2ea141;color:#fff;transition:all .3s}.colors-container{height:60 vh}.colors-header{background:#145cf2;height:300px;padding-top:30px;text-align:center;transition:all .3s;width:100%}.colors-header.light h1,.colors-header.light p{color:#fff}.colors-header.dark h1,.colors-header.dark p{color:#3e3e52}.colors-header h1{margin:0}.colors-header p{color:#fff}.colors-description{display:flex;gap:30px;list-style:none;margin:40px auto;max-width:930px}.colors-description p{margin-top:15px}.copy-button:disabled{pointer-events:none}section.more-tools{margin-top:60px;max-width:1000px;padding-bottom:100px}section.more-tools ul{display:flex;flex-direction:column;gap:20px;list-style:none;margin:0;padding:0}section.more-tools ul a{border:1px solid #ccc;border-radius:4px;color:#3e3e52;display:inline-block;padding:8px 18px;transition:all .3s;width:100%}section.more-tools ul a:hover{background:#145cf2;border-color:#145cf2;color:#fff}section.more-tools ul a.is-active{border-color:#145cf2;color:#145cf2;pointer-events:none}section.more-tools ul a span{font-weight:500}h2.sub-header{font-size:30px;max-width:none;text-align:center;width:100%}.more-tools-lists{display:flex;justify-content:space-between;text-align:center}.more-tools-lists h3{text-align:center}@keyframes slideInFromBottom{0%{transform:translateY(50%)}to{transform:translateY(0)}}@keyframes slideInFromTop{0%{transform:translateY(-50%)}to{transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.colors-input-container{animation:slideInFromBottom .3s ease-out 0s 1;z-index:1000}.colors-header h1,.colors-header p{animation:slideInFromTop .3s ease-out 0s 1;z-index:1000}