@font-face{font-family:"Sen";font-weight:normal;src:url("../../assets/fonts/Sen-Regular.woff")}@font-face{font-family:"Sen";font-weight:500;src:url("../../assets/fonts/Sen-Medium.woff")}@font-face{font-family:"Sen";font-weight:bold;src:url("../../assets/fonts/Sen-Bold.woff")}html,body{box-sizing:border-box;font-family:Sen;margin:0;padding:0;transition:background-color .5s ease-in-out}:root{--near-background: #F5F7F5;--soft-blue: #4A5899}button{background-color:rgba(0,0,0,0);border:none;cursor:pointer}h2{font-weight:500;text-align:center;transition:color .5s ease-in-out}h3{font-weight:500;line-height:0;position:relative}h3::after,h3::before{position:absolute;transition:opacity .35s linear}h3::after{content:"UIColor";opacity:0}h3::before{content:"HEX";opacity:1}h3.content-transition::after{opacity:1}h3.content-transition::before{opacity:0}.dark-colors{color:#fff}.github-ribbon-container{display:flex;justify-content:flex-end}.github-ribbon-button{padding:0}.github-ribbon{color:#fff;fill:var(--soft-blue);transition:color .5s ease-in-out,fill .5s ease-in-out}.main-content{align-items:center;display:flex;flex-direction:column;gap:.5rem;min-height:100dvh}.website-extended-description{font-weight:normal;max-width:480px;padding:0 0.9375rem;text-align:center;transition:color .5s ease-in-out}.hex-uicolor-container{align-items:center;display:flex;font-size:1.5rem;font-weight:500;gap:.8rem;justify-content:center;transition:color .5s ease-in-out}.switch-mode-button{background-color:var(--near-background);border-radius:10px;padding:0.625rem 0.9375rem}.arrow{display:inline-block;font-size:1.5rem;transition:transform .35s ease-in-out}.arrow-rotation{transform:rotate(180deg)}.input-container{background-color:var(--near-background);border-radius:4px;display:flex;flex-direction:column;margin-top:1.5rem;padding:0.125rem 0.9375rem 0.9375rem}.input-field{border:0;border-radius:4px;box-shadow:inset 0 0 0 1px #ddd;font-size:.95rem;font-weight:500;height:20px;outline:none;padding:.4rem;width:320px}.input-field::placeholder{transition:opacity .35s linear}.input-field.content-transition::placeholder{opacity:0}.toast-container{bottom:1.875rem;display:flex;justify-content:center;padding:1.25rem;pointer-events:none;position:fixed}.copied-code-toast{background-color:#fff;border-radius:100px;border:1px solid #e0e0e0;box-shadow:0 8px 20px rgba(0,0,0,.1019607843);color:#333;min-width:140px;opacity:0;padding:1rem 1.5rem;text-align:center;transform:translateY(6.25rem);transition:opacity .35s,transform .4s}.copied-code-toast.fade-in{opacity:1;transform:translateY(0)}.language-blocks-container{display:flex;flex-direction:column;flex-grow:1;gap:1.5rem;opacity:0;padding:1.875rem;transition:opacity .5s ease-in-out,visibility .5s ease-in-out;visibility:hidden}.hex-container,.language-blocks-container>div{background-color:var(--near-background);border-radius:5px;display:flex;flex-direction:column;font-size:1.5rem;font-weight:bold;max-width:550px;text-align:left}.hex-container{margin-top:0;max-height:0;opacity:0;padding:0;transition:opacity .5s ease-in-out}.hex-container h4,.language-blocks-container h4{font-size:1.2rem;font-weight:500;margin:0}.language-blocks-container>div{padding:1rem}.fade-in-container{opacity:1;visibility:visible}.fade-in-hex-container{margin-top:2rem;max-height:72px;padding:1rem}.title-container{align-items:center;display:inline-flex;justify-content:space-between}.title-container p{margin:0}.copy-button{padding:1rem}.footer{align-items:center;background-color:var(--near-background);color:gray;display:flex;flex-direction:column;font-size:.8rem;gap:.5rem;justify-content:center;padding:1.75rem;max-width:100dvw}.link-icons{color:#4a5899;cursor:pointer;display:flex;gap:.5rem}@media screen and (min-width: 48em)and (prefers-reduced-motion: no-preference){.link-icons a{transition:scale 200ms ease-in-out}.link-icons a:hover{scale:1.2;transition:scale 200ms ease-in-out}}.github-link{padding-top:0.3125rem}.github-link .open-source-text{color:var(--soft-blue);position:relative;text-decoration:none}@media(min-width: 48em){.open-source-text::after{background-color:var(--soft-blue);bottom:-2px;content:"";height:1.8px;left:0;position:absolute;width:100%}}@media screen and (min-width: 48em)and (prefers-reduced-motion: no-preference){.open-source-text::after{transform:scaleX(0);transition:transform .35s ease}.open-source-text:hover::after{transform:scaleX(1)}}@media screen and (min-width: 48em)and (prefers-reduced-motion){.open-source-text::after{opacity:0;transition:opacity .35s ease}.open-source-text:hover::after{opacity:1}}/*# sourceMappingURL=styles.css.map */