*{box-sizing:border-box;margin:0;padding:0}*:before *:after{box-sizing:inherit}body{font-family:Onest Variable,sans-serif;height:100dvh;width:100vw;overflow:hidden;color:#444}.hero-logo{width:60px;height:auto}#app{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;width:100%;z-index:0;background-image:url(/bg.svg);background-repeat:no-repeat;background-position:bottom;background-size:100%;background-attachment:fixed}main{display:flex;flex-direction:column;align-items:center;height:auto;width:500px;padding:16px;gap:12px}main h1{text-align:center;font-weight:bolder;font-size:2em}main button{display:flex;align-items:center;justify-content:center;background-color:#c62368;gap:6px}main button:hover{background-color:#e34c67;transition:all .3s ease}main span{text-align:center;font-size:1.2rem;font-weight:600;color:#555}.btn{border:none;color:#fff;width:240px;height:44px;padding:6px;border-radius:20px;font-size:larger;font-weight:700;cursor:pointer}#img-section{display:flex;flex-direction:column;align-items:center;gap:20px}#img-section button{display:flex;align-items:center;justify-content:center;width:240px;gap:4px;background-color:#f1f5ff;color:#e34c67}#img-section button .svg-hover{display:none}#img-section button:hover{background-color:#e34c67;color:#f1f5ff;transition:all .3s ease}#img-section button:hover .svg{display:none}#img-section button:hover .svg-hover{display:flex}#img-preview{width:250px;height:250px;overflow:hidden;border-radius:50%;border:2px solid #c62368;box-shadow:0 0 10px #fa7268;background-color:#fff}#img-preview img{width:100%;height:100%;object-fit:contain}#img-preview.dragover{scale:1.1}*.dragover{background-color:#00000023}@media screen and (max-width: 768px){main{width:90vw}main h1{font-size:1.5em}main button{width:200px;height:40px;font-size:medium}main span{font-size:1rem}#img-preview{width:200px;height:200px}}