.what-to-draw{display:flex;flex-direction:row;font-size:1.3rem}.get-random-button{font-size:1.7rem}button{background-color:#d64444!important;border-color:#7a0000!important;border-width:5ch;border-radius:8px}.form-control{margin:1rem 0px}body{background-color:#0f0f0f;color:#f5f5f5}.side-bar-hide{margin-right:100px;animation-name:closeSideBar;animation-duration:.5s;animation-fill-mode:forwards}.side-bar-visable{margin-right:100px;animation-name:openSideBar;animation-duration:.5s;animation-fill-mode:forwards}.side-bar{position:absolute;min-height:100vh;width:20%;min-width:250px;background-color:#242424}.side-bar .btn-import{border-radius:8px 0 0 8px}.side-bar .btn-export{border-radius:0 8px 8px 0}.side-bar .side-bar-open-button{position:absolute;top:0;right:-30%;width:30%;height:50px;border-radius:0 0 8px}.side-bar .side-bar-body{padding:8px!important}.side-bar button{width:100%}.side-bar .import-export-buttons button{width:50%}.side-bar .add-charachter-form{margin:1rem 0}.side-bar .add-charachter-form .add-input-field{flex-direction:column}.side-bar .add-charachter-form .added-items{border-radius:8px;padding:8px;background-color:#3b3a3a}.side-bar .add-charachter-form .added-items .item-list{text-transform:capitalize;overflow-y:auto;max-height:100%;margin-left:.5rem}.side-bar .add-charachter-form .added-items button{margin:2rem 0px 0px;width:100%}.side-bar .add-charachter-form button{margin:1rem 0px}.chosen-charachter{text-align:center;text-transform:capitalize}.chosen-charachter img{border-radius:16px;width:100%}.list-animation{position:relative;display:flex;flex-direction:row;justify-content:center}.list-animation .charachter-option{margin:1rem;font-size:30px}.list-animation [id^=ch-]{position:absolute;transform:translate(-1000px);animation-name:changeposition;animation-duration:2s}.select-random-charachter{display:flex;flex-direction:column;max-width:320px;overflow:hidden;height:100vh;justify-self:center;justify-content:center}.select-random-charachter h1{text-align:center}.select-random-charachter button{margin:1rem 0px}@keyframes closeSideBar{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes openSideBar{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes changeposition{0%{transform:translate(-700px)}to{transform:translate(700px)}}.rcp-root{--rcp-background-color: #121212;--rcp-field-input-color: #ffffff;--rcp-field-input-border-color: #242424;--rcp-field-label-color: #808080}.rcp{display:flex;flex-direction:column;background-color:var(--rcp-background-color);border-radius:10px}.rcp-body{display:flex;flex-direction:column;gap:20px;padding:20px 10px}.rcp-section{display:flex;flex-direction:column;gap:10px}.rcp-interactive{width:100%;height:100%;-webkit-user-select:none;user-select:none;touch-action:none}.rcp-interactive[aria-disabled=true]{cursor:unset;pointer-events:none}.rcp-saturation{cursor:all-scroll;width:100%;position:relative;background-image:linear-gradient(to bottom,transparent,black),linear-gradient(to right,white,transparent);border-radius:10px 10px 0 0}.rcp-saturation-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-10px)}.rcp-hue{cursor:ew-resize;position:relative;width:100%;height:12px;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:10px}.rcp-hue-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-alpha{cursor:ew-resize;position:relative;width:100%;height:12px;border-radius:10px}.rcp-alpha-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-fields{display:flex;flex-direction:column;gap:10px}.rcp-fields-floor{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.rcp-field{display:flex;flex-direction:column;width:100%}.rcp-field-input{width:100%;font-family:inherit;font-size:14px;text-align:center;color:var(--rcp-field-input-color);background-color:transparent;border:2px solid var(--rcp-field-input-border-color);border-radius:5px;outline:none;padding:5px 0}.rcp-field-input:read-only{opacity:.8}.rcp-field-label{font-size:14px;text-align:center;color:var(--rcp-field-label-color)}