:root{--black: #222;--white: #fff;--theme-color: #000;--accent-color: #000}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{accent-color:var(--accent-color);color-scheme:var(--theme-color)}html *:focus-visible{outline:2px solid var(--accent-color);outline-offset:-2px}html input[type=checkbox]:focus-visible{outline-offset:2px}body{position:relative;font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--black);font-family:Tinos}::selection{background-color:#99d9f5}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2;overflow-wrap:break-word}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}img,picture,video,canvas,iframe{display:block;max-width:100%}img{border-style:none;vertical-align:middle;border:0}input,textarea,button,select,optgroup{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}input[type=checkbox],label{cursor:pointer}a{color:#007eb4;text-decoration:none;background-color:transparent}a:hover{color:#006894;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}p{line-height:28px;text-rendering:optimizeLegibility}ol,ul,dl{margin-top:0;margin-bottom:1rem}input,textarea,button,select,label,a{-webkit-tap-highlight-color:transparent}button,[type=button],[type=submit]{-webkit-appearance:button}button,select{text-transform:none}select{padding:2px;background-color:var(--white);border:1px solid var(--black);border-radius:2px;margin-top:2px;font-family:Poppins,sans-serif;font-size:12px}button,input{overflow:visible}button,summary,select{cursor:pointer}details{border:2px solid rgba(0,0,0,.1);margin-bottom:4px}details.misc{margin-bottom:0}summary{font-weight:700;letter-spacing:1px;padding:2px 15px 3px;font-size:18px;display:flex;align-items:center;justify-content:space-between}summary .count{font-size:12px;color:#a7a8aa;letter-spacing:1px;margin-top:1px;text-transform:uppercase;font-family:Poppins,sans-serif}details summary::-webkit-details-marker{display:none}body{margin:0;padding:0}main{position:relative;display:flex}.grid{display:grid;width:100vw;height:100vh;grid-auto-rows:25vh}@media (width < 480px){.grid{height:100dvh;grid-auto-rows:25dvh}}.grid--1,.grid--2{grid-auto-rows:50vh}@media (width < 480px){.grid--1,.grid--2{grid-auto-rows:50dvh}}.grid--3{grid-auto-rows:33.333vh}@media (width < 480px){.grid--3{grid-auto-rows:33.333dvh}}.grid--4{grid-auto-rows:25vh}@media (width < 480px){.grid--4{grid-auto-rows:25dvh}}.grid--5{grid-auto-rows:20vh}@media (width < 480px){.grid--5{grid-auto-rows:20dvh}}.grid--6{grid-auto-rows:16.666vh}@media (width < 480px){.grid--6{grid-auto-rows:16.666dvh}}.grid--7{grid-auto-rows:14.286vh}@media (width < 480px){.grid--7{grid-auto-rows:14.286dvh}}.grid .color{position:relative;display:flex;justify-content:center;align-items:center}@media (width < 640px){.grid .color{justify-content:space-between;padding-right:30px}}.grid .color .logo{display:flex;width:auto;height:50%}@media (width < 640px){.grid .color .logo{height:60px}}@media (width < 640px){.grid--2 .color .logo,.grid--3 .color .logo{height:100px}}.grid .color-box{position:absolute;bottom:0;left:0;gap:4px;margin:12px;padding:4px 8px;font-size:15px;line-height:15px;font-weight:500}@media (width < 640px){.grid .color-box{position:static}}.grid .color-name,.grid .color-hex,.grid .color-team{font-family:Poppins,sans-serif;font-weight:700;font-size:24px;line-height:26px;letter-spacing:1px;border:0;background-color:transparent;text-align:left;position:relative;display:flex;padding:0}@media (width < 480px){.grid .color-name,.grid .color-hex,.grid .color-team{font-size:21px;line-height:23px}}.grid .color-name:after,.grid .color-hex:after,.grid .color-team:after{content:"Copied!";display:none;position:absolute;top:4px;left:calc(100% + 8px);font-size:12px;-webkit-text-stroke:initial;background-color:#ffffffbf;color:var(--black);border-radius:4px;padding:5px 4px;line-height:10px;letter-spacing:0;font-weight:500}.grid .color-name.copied:after,.grid .color-hex.copied:after,.grid .color-team.copied:after{display:flex}.grid .color-team{font-size:18px;line-height:21px;text-transform:lowercase}.grid .color-hex{text-transform:lowercase}.main-random{position:absolute;top:17px;right:140px;width:32px;height:32px;display:flex;justify-content:center;align-items:center;border:0;padding:0 3px 3px 0;background-color:var(--white);outline:6px solid rgba(255,255,255,.25);border:2px solid rgba(0,0,0,.1);border-right:0;border-bottom:0}@media (width < 480px){.main-random{position:fixed;top:initial;bottom:0;right:0;outline:0;margin-bottom:0;padding:0 3px 3px 0}}.main-random svg{width:24px;height:19px}.main-random svg path{fill:var(--accent-color)}.main-random:hover svg{animation:shake .5s infinite}@media (width < 480px){.main-random:hover svg{animation:none}}.sidebar{position:absolute;top:17px;right:22px;background-color:var(--white);outline:6px solid rgba(255,255,255,.25)}@media (width < 480px){.sidebar{position:fixed;top:initial;right:initial;bottom:0;left:0;outline:0;margin-bottom:0;border-bottom:0;border-left:0}}.sidebar[open]{padding:12px 0;width:370px;height:calc(100% - 40px);overflow-y:auto}@media (width < 480px){.sidebar[open]{width:100%;height:100%;bottom:0;left:0;padding-bottom:48px}}.sidebar[open] .sidebar-trigger{width:32px;height:32px;position:absolute;top:0;right:0;background:var(--white);padding:0}@media (width < 480px){.sidebar[open] .sidebar-trigger{position:fixed;top:initial;bottom:0;left:0;width:48px;height:48px;padding-top:7px;padding-bottom:7px;display:flex;justify-content:center;align-items:center;border-top:2px solid rgba(0,0,0,.1);border-right:2px solid rgba(0,0,0,.1)}}.sidebar[open] .sidebar-trigger-words,.sidebar[open] .sidebar-trigger svg.burger{display:none}.sidebar[open] .sidebar-trigger svg.close{display:flex}.sidebar-trigger{display:flex;align-items:center;padding:0 4px;gap:6px}@media (width < 480px){.sidebar-trigger{padding:1px 4px}}.sidebar-trigger-words{font-family:Poppins,sans-serif;text-transform:uppercase;font-size:16px;color:var(--black);font-weight:700}.sidebar-trigger svg{width:32px;height:32px;flex:0 0 32px}.sidebar-trigger svg.burger{width:28px;height:28px;flex:0 0 28px}.sidebar-trigger svg.close{display:none}.sidebar .settings{overflow:auto;width:100%;height:100%;margin:0 auto;padding:0 12px}.sidebar .settings h1{font-family:Poppins,sans-serif;text-transform:uppercase;font-size:16px;color:var(--black);font-weight:700}.sidebar .settings-row{display:flex;gap:12px;margin-bottom:12px}.sidebar .settings-group{display:flex;align-items:center}.sidebar .settings-group input[type=checkbox]{width:14px;height:14px}.sidebar .settings-group label{padding-left:8px;font-size:14px}.sidebar .settings-group--stacked{flex-direction:column;align-items:flex-start}.sidebar .settings-group--stacked label{padding:0}.sidebar .settings-random{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border:0;padding:0;background-color:transparent}.sidebar .settings-random svg{width:24px;height:19px}.sidebar .settings-random svg path{fill:var(--accent-color)}@keyframes shake{0%{transform:translate(0) translateY(0)}20%{transform:translate(-2px) translateY(0)}40%{transform:translate(0) translateY(0)}60%{transform:translate(2px) translateY(0)}80%{transform:translate(0) translateY(-2px)}to{transform:translate(0) translateY(0)}}.sidebar .settings-random:hover svg{animation:shake .5s infinite}@media (width < 480px){.sidebar .settings-random:hover svg{animation:none}}.sidebar ul{margin:0;padding:0}.sidebar ul li{display:flex;height:42px}.sidebar ul button{width:100%;border:0;display:flex;align-items:center;gap:16px;background-color:var(--white);padding:6px}.sidebar ul button:hover,.sidebar ul button.active{background-color:#fed}.sidebar ul .logo-box{width:50px;display:flex;justify-content:center;align-items:center}.sidebar ul .logo{width:auto;max-width:100%;height:auto;max-height:30px}.sidebar ul .team-name{text-align:left;color:var(--black)}.sidebar ul .team-colors{display:flex;flex-grow:1;justify-content:flex-end;gap:5px}.sidebar ul .team-color{width:14px;height:14px;border:1px solid rgba(0,0,0,.1)}.sidebar .misc .misc-content{padding:4px 16px}.sidebar .misc .css-vars{position:relative;margin-bottom:8px}.sidebar .misc .css-vars-code{display:block;padding:6px 8px;border-radius:3px;font-size:14px}.sidebar .misc .css-vars-code--uppercase{text-transform:uppercase}.sidebar .misc .css-vars-code pre{overflow:auto}.sidebar .misc .css-vars .code-copy{position:absolute;bottom:0;right:0;display:flex;align-items:center;gap:6px;border:0;background-color:transparent;padding:6px;height:34px}.sidebar .misc .css-vars .code-copy.copied:before{content:"Copied!";font-size:14px}.sidebar .misc .css-vars .code-copy svg{width:18px;height:18px;flex:0 0 18px}.sidebar .misc .disclaimer{font-size:13px;line-height:14px;color:var(--black);margin:10px 0 4px}