*,*:before,*:after{box-sizing:border-box}body{display:flex;align-items:center;justify-content:center;margin:10px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}main#colourExplorer{display:grid;grid-template-columns:auto minmax(22vw,400px) auto minmax(22vw,400px) auto;grid-template-rows:repeat(5,auto);column-gap:0px;row-gap:10px;justify-content:center;align-items:center}@media (min-width: 400px){main#colourExplorer{grid-template-rows:repeat(4,auto);column-gap:30px;row-gap:5px}}main#colourExplorer label{margin-top:10px}main#colourExplorer input[type=search],main#colourExplorer select{width:100%;height:40px;border-radius:5px;border:2px solid hsl(0,0%,0%);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;text-indent:10px}main#colourExplorer input::placeholder{color:#9c9c9c}main#colourExplorer #colourNameFormItem{grid-row:1;grid-column:2 / 5}main#colourExplorer #colourGroupFormItem{grid-row:2;grid-column:2 / 5}@media (min-width: 400px){main#colourExplorer #colourGroupFormItem{grid-row:2;grid-column:4 / 5}}main#colourExplorer #colourThemeFormItem{grid-row:3;grid-column:2 / 5}@media (min-width: 400px){main#colourExplorer #colourThemeFormItem{grid-row:2;grid-column:2 / 3}}main#colourExplorer #colourList{grid-row:4;grid-column:2 / 5}@media (min-width: 400px){main#colourExplorer #colourList{grid-row:3;grid-column:2 / 5}}main#loading{display:flex;flex-direction:column;align-items:center;grid-row:4;grid-column:2 / 5}@media (min-width: 400px){main#loading{grid-row:3;grid-column:2 / 5}}main#loading h2{text-align:center}main#colour-info{display:flex;flex-direction:column;align-items:center;width:90vw;max-width:900px}@media (min-width: 400px){main#colour-info{display:grid;grid-template-columns:repeat (2,auto);grid-template-rows:repeat (5,auto);justify-items:center}}@media (min-width: 600px){main#colour-info{display:grid;grid-template-columns:repeat (3,auto);grid-template-rows:repeat (4,auto)}}@media (min-width: 400px){h2{grid-column:1 / span 2;grid-row:1}}@media (min-width: 600px){h2{grid-column:2;grid-row:1}}svg{width:40%}@media (min-width: 400px){svg{grid-column:1 / span 2;grid-row:2}}@media (min-width: 600px){svg{width:50%;grid-column:2;grid-row:2}}@media (min-width: 400px){#css__colour-hex{grid-column:1;grid-row:3}}@media (min-width: 600px){#css__colour-hex{grid-column:1;grid-row:3}}@media (min-width: 400px){#css__colour-rgb{grid-column:2;grid-row:3}}@media (min-width: 600px){#css__colour-rgb{grid-column:2;grid-row:3}}@media (min-width: 400px){#css__colour-hsv{grid-column:1;grid-row:4}}@media (min-width: 600px){#css__colour-hsv{grid-column:3;grid-row:3}}@media (min-width: 400px){#css__colour-hsl{grid-column:2;grid-row:4}}@media (min-width: 600px){#css__colour-hsl{grid-column:1;grid-row:4}}@media (min-width: 400px){#css__colour-xyz{grid-column:1;grid-row:5}}@media (min-width: 600px){#css__colour-xyz{grid-column:2;grid-row:4}}@media (min-width: 400px){#css__colour-cmyk{grid-column:2;grid-row:5}}@media (min-width: 600px){#css__colour-cmyk{grid-column:3;grid-row:4}}