*{box-sizing:border-box}html,body{margin:0;padding:0}body{display:flex;flex-direction:column;justify-content:center;font-family:"Baloo Tamma 2",cursive}header{width:100%;height:60px;display:flex;justify-content:center;align-items:center;transition:.5s ease-in-out;transform:scale(2) translateY(200%)}.logo{height:80%;margin-right:.5rem}h1{margin:0;font-family:Tilt Warp,cursive;font-size:2.5em;font-weight:800}span{margin:0;padding:0}main{display:flex;flex-direction:column;flex-grow:1;transition:.5s;opacity:0}.options-bar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:50px;padding:.8rem;border-top:1px solid #cecece;border-bottom:1px solid #cecece}.color-options{display:flex;justify-content:center;align-items:center}form{margin:0;display:flex;align-items:center;gap:.5rem}.hamburger{display:none}#refresh-button{display:inline-block;margin-right:1.5rem;font-size:1.5rem;transition-property:transform;transition-duration:.7s;transition-timing-function:ease-in-out;cursor:pointer}.color-area{display:flex;flex-grow:1;height:100%;transition:filter .2s ease-in-out}.generator-color{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2rem;opacity:0;transition:1s;max-height:100%}.hex-text{font-size:1.3rem;font-weight:800;cursor:pointer}.name-text{padding-bottom:2rem;cursor:pointer}input,select{margin-right:.8rem}.rgb-text,.hsl-text,.hsv-text{opacity:0;transition:.5s ease-out;cursor:pointer}.generator-color:hover .rgb-text,.generator-color:hover .hsv-text,.generator-color:hover .hsl-text{opacity:100}.c{color:#ad1745}.o{color:#027b93}.l{color:#c5cc30}.r{color:#84a37a}.p{color:#f77e29}.a{color:#febc22}.color-text p{margin:0}.color-text{position:relative;display:inline-block}.color-text .copy-text{visibility:hidden;font-size:16px;width:150px;padding:10px 10px 5px;background-color:#273549b3;color:#fff;text-align:center;border-radius:6px;position:absolute;z-index:1;bottom:140%;left:50%;margin-left:-75px;opacity:0;transition:opacity .3s}.color-text .copy-text:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#273549b3 transparent transparent transparent}.color-text:hover .copy-text{visibility:visible;opacity:1}@media (max-width:1025px){.tips-area{display:none}.options-bar{justify-content:center}}@media (max-width:630px){.options-bar{z-index:100;height:0;width:100%;align-items:flex-start;justify-content:flex-start;margin:0;padding:0;border:none;background-color:transparent}.color-options{position:relative;top:30px;right:-500px;width:90%;margin:0 auto;height:350px;background-color:#444;padding:1rem;border-radius:6px;opacity:0;justify-content:flex-start;align-items:flex-start}#color-options-form{display:flex;flex-direction:column;align-items:flex-start;width:100%;color:#cecece}form{position:relative;margin:0 auto}label{margin-top:1.5rem}input,select{margin:0}#color-number{width:50px}.hamburger{display:block;position:fixed;top:18px;right:0px;cursor:pointer;margin-right:1.25rem}.bar{display:block;width:1.5625rem;height:.1875rem;margin:5px auto;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background-color:#000;border-radius:5px}.hamburger.active .bar:nth-child(2){opacity:0}.hamburger.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg);background-color:#ad1745}.hamburger.active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);background-color:#ad1745}#refresh-button{margin-left:1.25rem;position:fixed;display:block;top:18px;font-size:1.7rem;left:0px}}@media (max-width:420px){h1{font-size:2rem}.logo{height:70%;margin-right:.5rem}}.color-area.small{flex-direction:column}.generator-color.small{flex-direction:row-reverse}.name-text.small,.rgb-text.small,.hsl-text.small,.hsv-text.small{display:none}.hex-text.small{margin-left:2.5rem}.color-area.medium{flex-direction:row}.generator-color.medium{flex-direction:column}.name-text.medium,.rgb-text.medium,.hsl-text.medium,.hsv-text.medium{display:none}.hex-text.medium{transform:rotate(-90deg);position:relative;bottom:100px}.copy-text.medium{transform:rotate(90deg);left:unset;margin-left:unset;left:45%;bottom:-3px}.color-area.blur{filter:blur(20px)}.color-options.active{opacity:100;transition:.2s ease-in-out;right:unset}