body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*{padding:0;margin:0;box-sizing:border-box}@font-face{font-family:"CustomFont";src:url(/static/media/3AAC62_0_0.6083e9de.woff2),url(/static/media/3AAC62_2_0.b6d61193.woff2),url(/static/media/3AAC62_3_0.f4de430c.woff2)}html{font-size:62.5%}body,html{font-family:"CustomFont",Arial,Helvetica,sans-serif}body{width:100%;height:100vh;font-size:1.6rem;overflow:hidden;color:#0f141e;background-color:#e8ecf2}header{padding:1rem 2rem;height:7rem;display:flex;justify-content:space-between;align-items:center}header .social a{color:#0f141e;text-decoration:none;font-size:2rem;margin:0 1.5rem;opacity:.3;transition:all .5s}header .social a:last-child{margin-right:0}header .social a:hover{opacity:1}.guideline{padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;height:7.7rem}.guideline div+div{text-align:right}.guideline p{margin:0;font-weight:300;font-size:1.3rem}.generate-btn{padding:.7rem 2.5rem;border-radius:2rem;font-weight:300;background-color:#0f141e;color:#fff;outline:none!important;cursor:pointer;border:1px solid #0f141e!important;transition:all .5s cubic-bezier(.26,.1,.27,.55)}.generate-btn:hover{transform:scale(.95)}.generate-btn:active{transform:scale(1)}.color-list{display:flex;height:calc(100vh - 14.7rem);align-items:center;justify-content:space-between}.color-item{width:20%;cursor:pointer;height:60%;padding:2rem;background:linear-gradient(117.76deg,hsla(0,0%,100%,.3) -7.21%,hsla(0,0%,100%,.7) 118.08%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:5px;margin:2rem 2rem 30px;border:1px solid #fff;-ms-box-shadow:0 10px 20px 0 rgba(0,0,0,.02);-o-box-shadow:0 10px 20px 0 rgba(0,0,0,.02);box-shadow:0 10px 20px 0 rgb(0 0 0/2%)}.color-item .color{height:85%;border-radius:.5rem}.color-item h1{text-align:center;margin-top:2rem}.success-modal{position:fixed;top:-5rem;left:50%;transform:translateX(-50%);background-color:#d4edda;color:#155724;padding:1rem 3rem;border-radius:.2rem;transition:all .5s cubic-bezier(.075,.82,.165,1)}.success-modal h3{font-weight:300}@media screen and (max-width:768px){.color-list{flex-flow:column;padding:0 2rem}.color-item{width:100%;height:100%;margin:1rem 0}.color-item .color{height:100%}.color-item .hex{display:none}}@media screen and (max-width:645px){.success-modal{width:30rem!important;padding-left:1rem;padding-right:1rem;text-align:center}}@media screen and (max-width:500px){.guideline div:last-child,.social{display:none}}
/*# sourceMappingURL=main.3dbed016.chunk.css.map */