@import"https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";body{margin:0;padding:0;box-sizing:border-box;font-family:Noto Sans,sans-serif;display:flex;background-color:#fff;color:#000}.dark-mode{background-color:#000!important;color:#fff!important}.light-mode{background-color:#fff!important;color:#000!important}NAV,DIV,SECTION{padding:0}@media(orientation:portrait){body{flex-direction:column}nav{height:50px;width:100%;display:flex;flex-direction:row}#main{width:100%;display:flex;flex-direction:column-reverse;align-content:flex-start;align-items:flex-start;justify-self:flex-start}#palette{width:100%;height:calc(100vh - 360px)}#tools{width:100%;display:flex;flex-direction:column}}@media(orientation:landscape){body{flex-direction:row;height:100vh}nav{width:5vw;height:100%}#main{display:flex;flex-direction:row;width:95vw;height:100%}#palette{width:70%;height:100%}#tools{width:30%;height:100%;display:flex;flex-direction:column}}#palette{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:flex-start}#palette{overflow-x:hidden;overflow-y:scroll}.emoji{font-family:"Noto Emoji",sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal}#toolbar{--button-size:32px;--separator-size:20px;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:flex-start;box-sizing:border-box;padding:5px;gap:5px;background-color:#222;color:#fff}@media(orientation:portrait){#toolbar{width:100%;height:60px;flex-direction:row}}@media(orientation:landscape){#toolbar{width:auto;height:100%;flex-direction:column;flex-wrap:nowrap}}.toolBarButton{width:var(--button-size);height:var(--button-size);cursor:pointer;border:none;box-sizing:border-box;display:flex;justify-content:center;align-items:center;text-align:center;font-size:1.5em;line-height:var(--button-size)}.toolBarButton:hover,.dialogTool input[type=file]::file-selector-button:hover,.dialogTool input[type=button]:hover,.dialogTool a:hover{background:linear-gradient(120deg,red,#ff9a00,#d0de21,#4fdc4a,#3fdad8,#2fc9e2,#1c7fee,#5f15f2,#ba0cf8,#fb07d9,red)}.toolBarButton img{width:auto;height:auto;max-width:90%;max-height:90%;object-fit:contain}.toolContainer{padding:0;margin:0;display:flex}@media(orientation:portrait){.toolContainer{flex-direction:row;width:100%;height:300px;border-bottom:2px solid #444}}@media(orientation:landscape){.toolContainer{flex-direction:column;width:auto;height:100%;border-left:2px solid #444}}.dialogTool{background-color:gray;position:fixed;margin:0;padding:0;top:5%;left:5%;width:90%;height:90%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:5em;z-index:1000;border:#eee solid 2px;border-radius:25px;box-shadow:16px 14px 21px 3px #000000bf!important}.dialogTool h2{font-size:1em;color:#fff}.dialogTool label{font-size:.8em;color:#000}.dialogTool input[type=color],.dialogTool input[type=checkbox]{width:50px;height:50px;border:none;padding:0;margin:0;cursor:pointer}.dialogTool input[type=button]{width:5em;height:2em;display:inline;border:none;font-size:.5em;padding:0;margin:0;cursor:pointer;border-radius:10px;background-color:#444;color:#fff}.dialogTool input[type=file]{cursor:pointer;width:100%;font-size:.5em;height:auto;display:inline;color:#fff}.dialogTool input[type=file]::file-selector-button{cursor:pointer;color:#fff;background-color:#444;border-radius:10px;height:2em;width:6em;margin:0;padding:0;display:inline}.dialogTool input[type=number]{width:4em;height:2em;font-size:.5em}#tools section{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;align-content:flex-start}#tools h2{font-size:1em}#tools .colorBloc{width:100%;height:100%}.toolInput .color-card{width:140px!important;height:140px!important;margin:0;padding:0}.toolOutput .color-card{width:70px!important;height:70px!important;margin:0;padding:0}#tools .toolInput{padding:5px;margin:0}#tools .toolOutput{padding:5px;margin:0;overflow-x:hidden;overflow-y:scroll}@media(orientation:portrait){#tools .toolInput{width:300px;border-right:2px solid #444}#tools .toolOutput{width:calc(100% - 300px)}.toolSeparator{width:var(--separator-size);height:var(--button-size);background-color:#4440}}@media(orientation:landscape){#tools .toolInput{border-bottom:2px solid #444}.toolSeparator{width:var(--button-size);height:var(--separator-size);background-color:#4440}}.toolInput select{box-sizing:content-box;height:auto;text-align:left;padding:5px;background-color:#fff;border:1px solid #ccc;margin-left:5px;margin-top:5px}.toolInput input[type=number]{box-sizing:content-box;height:auto;text-align:left;border:1px solid #ccc;padding:5px;margin-left:5px;margin-top:5px}.color-card{width:150px;height:200px;margin:0;border:#808080 1px solid;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Outfit,sans-serif;font-weight:400;font-size:.8em}.color-card div{text-align:center}.colorName{font-size:1em;padding-bottom:10px;width:80%}.colorHex{font-family:monospace;text-transform:uppercase}.colorName:hover{background-color:#d3d3d3!important;color:#000!important;cursor:text}.colorBloc{width:140px;height:140px}.full-close-button{padding:10px;margin-top:10dvw;cursor:pointer;font-size:1em;width:90vw;height:5vmax;border-radius:1em;text-align:center}.full-screen-color{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:5em;z-index:1000}#fullHex{font-family:monospace;text-transform:uppercase;font-size:1.5em}.aboutToolContainer{height:calc(100% - 20px);width:calc(100% - 20px);padding:10px;color:#000;background:#ffb3b3;background:linear-gradient(120deg,#ffb3b3,#ffffb3,#b3ffb3,#b3ffff,#b3b3ff,#ffb3ff)}.aboutToolContainer h2{margin-top:0}.aboutToolContainer p{font-size:14px;line-height:1.5}.aboutToolContainer a{color:#000;text-decoration:none;border:1px solid #000000;padding:2px 5px;border-radius:5px;transition:background-color .3s,color .3s;background-color:gray;color:#fff}#aboutTool h3{font-size:20pt}#aboutTool h2{font-size:30pt}#aboutTool p{font-size:20pt;margin:10px 0;padding:5px}#aboutTool a{font-size:15pt;margin:5px;border:none}#aboutTool{--saturation: 50%;--ligntness: 35%;margin-top:10px;background:linear-gradient(120deg,hsl(0,var(--saturation),var(--ligntness)),hsl(60,var(--saturation),var(--ligntness)),hsl(120,var(--saturation),var(--ligntness)),hsl(180,var(--saturation),var(--ligntness)),hsl(240,var(--saturation),var(--ligntness)),hsl(300,var(--saturation),var(--ligntness)))}#aboutTool img{width:100px;height:100px}#inExcludedColor{border:1px solid white}#gradientTool label{text-align:right;padding:5px;width:30px!important}#gradientTool input[type=number]{text-align:left;padding:5px;width:75px!important}#gradientTool select{width:75px!important}#gradientTool .gradientInput{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;align-content:flex-start;flex-wrap:wrap;width:140px}@media(orientation:portrait){#gradientTool .gradientInput{width:140px}}#gradientTool h2{width:100%;height:auto}#sliderTool .toolInput .color-card{width:auto;height:auto}#sliderTool .toolInput label,#sliderTool .toolInput input[type=number]{height:auto;text-align:right}#sliderTool .sliderInputs{display:flex;flex-direction:row;flex-wrap:wrap;width:50%}#sliderTool h2{width:100%;height:auto}#sliderSize{height:auto}#sliderTool .toolInput input[type=number]{width:40%!important}#sliderTool .toolInput label{width:30%!important}@media(orientation:portrait){#loremTool .toolInput .color-card{width:auto;height:auto}#loremTool .toolInput label{width:50%;height:auto;text-align:right;padding:5px}#loremTool .toolInput{width:auto}.loremCard{width:15%}}@media(orientation:landscape){#loremTool .toolInput label{width:auto;height:auto;text-align:right;padding:5px}#loremTool .toolInput input[type=number]{text-align:left;padding:5px}#loremTool .toolInput{width:auto;flex-direction:row}.loremCard{width:30%}}#loremTool .toolOutput{display:flex;flex-wrap:wrap;justify-content:space-between;flex-direction:row}#loremTool h2{width:100%!important;height:auto}.loremCard{height:140px;font-size:9pt;display:flex;flex-direction:column;align-items:center;border:2px solid #777777}.loremText{width:100%;height:auto;text-align:center}.loremBlock{width:50px;height:50px}#lockTool{--inBlocSize: 50px;display:flex;flex-direction:column}#lockTool h2{margin:0;width:100%}#lockTool main{display:flex}@media(orientation:portrait){#lockTool{flex-direction:row}#lockTool .toolInput{width:100%!important}#lockTool .toolOutput{width:50%!important}#lockTool main{display:flex;flex-direction:row;width:100%}}@media(orientation:landscape){#lockTool{flex-direction:column}}#lockTool .colorCardArray{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;width:200px;height:200px}#lockTool .colorCardArray .color-card,#lockTool .colorCardArray .colorBloc{width:var(--inBlocSize)!important;height:var(--inBlocSize)!important}#lockTool .inputControls{display:flex;justify-content:center;align-items:center;gap:10px}#lockInputControls{display:flex;flex-direction:row;gap:10px;align-items:flex-start!important;justify-content:flex-start!important;width:150px!important}#lockInputControls label{width:30px;text-align:right;display:inline-block}#sortPalette{width:350px}@scope (#sortPalette){select{width:70px;font-size:14pt}option{font-size:14pt!important}label{font-size:14pt!important;width:100px;display:inline-block;text-align:right}input[type=checkbox]{width:30px!important;height:30px!important;vertical-align:middle}input[type=button]{font-size:14pt!important}#sortExcludedColor label{width:150px;height:30px!important;display:inline-block}#sortExcludedColor input[type=color]{width:30px!important;height:30px!important;display:inline-block;border:1px solid white;vertical-align:middle}#sortButtonsContainer{text-align:center}#sortExcludedColor{display:flex;width:100%;flex-direction:row;justify-content:center}}