@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";*{margin:0;padding:0}body{font-family:Outfit,sans-serif;background-color:#151515}.color-picker-container{display:flex;flex-direction:column;align-items:center;color:#cdcdcd;min-height:90vh}.picker-tool{margin-top:21px;margin-bottom:21px;width:100px;height:40px;border:1px solid #555555;border-radius:4px}h1{letter-spacing:.075em;margin:50px;font-size:3rem;color:#cdcdcd}.color-display{width:300px;height:300px;display:flex;justify-content:center;align-items:center;border:5px solid #454545;border-radius:25px;margin-bottom:25px;transition:.25s ease}.color-display p{color:gray;font-size:1.5rem;text-align:center}p{padding:5px 0}footer{height:20px;border-top:1px solid #454545;padding-top:20px;color:#dedede}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}a{color:#ccc;text-decoration:none;cursor:pointer}.results{font-family:Courier New,Courier,monospace;font-weight:600;font-size:23px;margin-top:25px}.picked{background-color:#fff;padding:10px;color:#232323;border-radius:10px}.site-header{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:600}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}