body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{user-select:none;transition:background-color .25s ease-in-out,color .25s ease-in-out}body.dark,body.dark #input{background-color:#121212;color:#e1e1e1}body.dark .moon{display:none}body.dark #title a{color:#e1e1e1}body.light,body.light #input{background-color:#fff;color:#222}body.light .sun{display:none}body.light #title a{color:#222}#wrapper{max-width:1200px;margin:0 auto;display:flex;flex-direction:column}header{padding:.5em 1em;display:flex;align-items:center;justify-content:space-between}.moon,.sun{width:1.5em;height:1.5em}.moon{fill:#222}.sun{fill:#e1e1e1}#title{font-size:1.5em}#title a{text-decoration:none;transition:color .25s ease-in-out;font-weight:700}#switch{cursor:pointer}main{flex:1;padding:1em;display:flex;flex-direction:column}#input{font-size:1.25em;padding:.5rem;margin:0;border:none;border-bottom:1px solid grey;transition:background-color .25s ease-in-out,color .25s ease-in-out}#colors{margin:0;padding:1em 0;list-style-type:none;display:flex;flex-wrap:wrap;justify-content:center}.color{width:20vmin;height:20vmin;margin:1em;border-radius:10vmin}