:root{--header-height: 60px;--footer-height: 0px;--scroll-width: 16px;--thumb-width: 12px;--label-height: 40px;--title-height:60px;--icon-tray-height:50px;--vw:100vw;--vh:100vh;--max-width: calc(var(--vw));--min-width:300px;--hover-color:red;--focus-color:green;--row-height:40px;--row-font-size:32px;--row-cell-width:425px;--font-family:"Alexandria", serif;--header-color:#ffffff;--header-text-color:#000000;--main-color:#ffffff;--header-text-color-greyscale:1;--greycalc: clamp(0, 1, calc(( var(--header-text-color-greyscale) - .15) * 1000) );--thumb-hover-color:calc(255 * (1 - var(--greycalc)));--side-padding-left:40px;--side-padding-right:calc( var(--side-padding-left) + var(--scroll-width) )}html,body{margin:0;overflow:hidden;display:flex;align-items:center;justify-content:center;width:var(--max-width);height:var(--vh);background:var(--main-color)}header{min-width:var(--min-width);width:var(--max-width);height:var(--header-height);background-color:var(--header-color)}header h1{white-space:nowrap;margin-top:4px;height:calc(var(--title-height) - 4px);margin-bottom:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;color:var(--header-text-color)}.title{font-family:var(--font-family);font-optical-sizing:auto;font-weight:800;font-style:normal;font-size:42px;padding-left:var(--side-padding-left)}footer{min-width:var(--min-width);height:var(--footer-height);background-color:#7fffd4}label{font-size:15px}.label-height{height:var(--label-height)}#row-holder{min-width:var(--min-width);width:var(--max-width);height:calc(var(--vh) - var(--header-height) - var(--footer-height) - var(--label-height));background-color:var(--main-color)}.row-thing{width:var(--max-width);background-color:#fff;min-height:var(--row-height)}.row-box{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:600}.row-thing>div{text-align:center;font-size:var(--row-font-size);font-family:var(--font-family);font-optical-sizing:auto;font-style:normal;text-align:left;-webkit-user-select:none;user-select:none}.row-thing:hover{font-weight:300}.custom-scrollbar{position:fixed;top:0;right:0;width:var(--scroll-width);height:100%;z-index:5}.scroll-thumb{position:absolute;top:0;left:0;width:var(--thumb-width);background:var(--header-text-color);border-radius:6px;cursor:pointer}.scroll-thumb:hover{background:rgba(var(--thumb-hover-color),var(--thumb-hover-color),var(--thumb-hover-color),.7);transition:background .2s}.loader{z-index:10;position:fixed;bottom:0;right:0;width:var(--vw);height:var(--vh);background:#fff;transition:background .1s}.spacer{flex:1}.colName{min-width:var(--row-cell-width);flex:1;white-space:nowrap}.spacer-between{flex:.15;min-width:25px}.colHex{min-width:var(--row-cell-width);flex:1;white-space:nowrap}.icon-tray{display:flex;flex-direction:row;gap:10px;padding-right:var(--side-padding-right)}.icon-tray button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;padding:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.icon-tray svg{pointer-events:none;height:25px;background:none;border:none;cursor:pointer;padding-top:10px;padding-bottom:10px}@media (hover: hover) and (pointer: fine){.icon-tray button:hover svg{opacity:.5}}.settings-btn{padding:0}.settings-btn svg{transition:transform .3s ease,filter .3s ease}.settings-btn:hover svg{transform:rotate(30deg)}.modal{display:none;position:fixed;z-index:7;left:0;top:0;width:var(--vw);height:var(--vh);background-color:#00000080;font-family:var(--font-family)}.modal p{font-size:18px}.modal-content{background-color:#fff;color:#000;margin:var(--header-height) auto;padding:20px;min-height:150px;width:300px;text-align:center;position:relative;border-radius:6px}.close{position:absolute;top:10px;right:15px;font-size:30px;cursor:pointer}.settings-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.settings-form{display:flex;justify-content:space-between;width:100%;align-items:center}.modal select,.modal label{font-family:var(--font-family)}.settings-form label{flex:1;text-align:left}.settings-form select{flex:1.45}.settings-toggle{display:flex;justify-content:space-between;width:100%;align-items:center}.settings-toggle label{flex:1;text-align:left}.settings-toggle input{flex:1}@supports (height: 100dvh){:root{--vh:100dvh;--vw:100dvw}}@media only screen and (max-width: 1200px){:root{--row-font-size: 28px;--row-cell-width: 380px}.row-thing .spacer:first-of-type{flex:0;width:0}.spacer-between{flex:.15;min-width:25px}.colName,.colHex{min-width:380px}}@media only screen and (max-width: 875px){:root{--row-height:35px;--row-font-size: 24px;--row-cell-width: 312px}.colName,.colHex{min-width:312px}}@media only screen and (max-width: 750px){:root{--header-height: calc(var(--title-height) + var(--icon-tray-height));--row-height:30px;--row-font-size: 20px;--row-cell-width: 275px;--side-padding-left:0px --side-padding-right:0px }header .row-box{flex-direction:column}.title{font-size:38px}.spacer{min-width:15px;max-width:25px}.spacer-between{min-width:15px}.colName,.colHex{min-width:unset;width:unset;max-width:275px}#fullscreen-button{display:none}}@media only screen and (max-width: 600px){:root{--title-height:42px}.row-thing:hover{font-weight:600}.title{font-size:30px;padding-left:0}.spacer-between{min-width:15px}}@media only screen and (max-width: 400px){:root{--title-height:38px}.title{font-size:28px;padding-left:0}}.test-container{height:100px;background:teal;display:flex;flex-direction:column;padding-left:40vw}.test-row{display:grid;grid-template-columns:auto 1fr;column-gap:100px;align-items:center}.test-row>div{text-align:center;font-size:32px;font-family:var(--font-family);font-optical-sizing:auto;font-weight:600;font-style:normal;text-align:left;-webkit-user-select:none;user-select:none}.colorName,.colorHex{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}