*{font-family:Montserrat;margin:0;color:#f3f8f2}body{background-color:#1f1f1e}header{display:flex;justify-content:space-between;align-items:center;padding:0 3rem;background-color:#393e41}header .logo-container{display:flex;align-items:center}header .logo-container h2{font-size:1.8rem}header .logo-container .logo{max-width:4rem;margin:.8rem}header .nav-container{display:flex;align-items:center;gap:2rem}header .nav-container img{max-width:3rem}header .nav-container img:hover{transform:scale(1.1);transition:.3s}header .nav-container img:active{transform:scale(.95);transition:.1s}header .logo-container:hover{transform:scale(1.05);transition:.2s}header .logo-container:active{transform:scale(.95);transition:.1s}header .create-button{background-color:#3f88c5;border:none;border-radius:.3rem;color:#fff;padding:.7rem 1.4rem;font-size:1rem;font-weight:500;cursor:pointer}header .create-button:hover{transform:scale(1.1);transition:.3s}header .create-button:active{transform:scale(.95);transition:.1s}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center}.loading p{max-width:265px;overflow:hidden;border-right:.15em solid orange;white-space:nowrap;margin:0 auto;letter-spacing:.15em;animation:typing 3s steps(90,end),blink-caret .75s step-end infinite}section .hero{display:flex;align-items:center;gap:5rem}section .text-container h1{font-weight:700;margin-bottom:.5rem;font-size:1.5rem}section .text-container .hero-text{font-size:1.05rem}section .form-field-container{margin-top:1rem}section .loading-container{margin-top:2rem}section .loading-container h2{font-weight:300;font-size:1.4rem;margin-bottom:4rem}section .loading-container h2 span{color:#222328;font-weight:600}section .loading-container .image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:orange}}.photo-container{position:relative}.photo-container img{max-width:30rem;border-radius:1rem}.photo-container .hover-container{position:absolute;bottom:0;left:0;right:0;background-color:#000;opacity:0;display:flex;justify-content:space-between;border-radius:1rem;margin:.8rem .5rem;align-items:center;max-height:10rem;gap:1rem;padding:1rem;flex-direction:column}.photo-container .hover-container p{color:#fff}.photo-container .hover-container .bottom-container{display:flex;justify-content:space-between;width:100%;align-items:center}.photo-container .hover-container .name-container{display:flex;align-items:center;gap:.5rem}.photo-container .hover-container .name-container p{color:#fff}.photo-container .hover-container .name-container div{color:#fff;background:#d77a61;display:flex;align-items:center;justify-content:center;object-fit:cover;width:1.5rem;height:1.5rem;border-radius:100%;opacity:1}.photo-container:hover .hover-container{display:flex;opacity:.8;transition:.3s}.photo-container button{all:unset;cursor:pointer;width:2rem;height:2rem}.photo-container button img{background:transparent;max-width:2rem}.photo-container button:hover{transform:scale(1.15);transition:.3s;border:white}.photo-container button:active{transform:scale(.95);transition:.1s}section{max-width:1400px;margin:auto}section .text-container{padding-top:1rem}section .text-container h1{font-weight:700;color:#f6f7eb;margin-bottom:.5rem}section .text-container p{font-size:1rem;max-width:800px}section form .form-container .image-container{position:relative;display:flex;max-width:25rem;max-height:25rem;min-width:20rem;min-height:20rem;border:1px solid gray;background-color:#eff1f3;border-radius:1rem;justify-content:center;align-items:center}section form .form-container .image-container .form-img,section form .form-container .image-container .preview-img{width:50%;object-fit:contain}section form .form-container .image-container .preview-img{opacity:.4}section form .form-container .image-container .loading-img{top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;position:absolute;border-radius:1rem;background:#00000080}section form .form-container .button-container{margin-top:1rem}section form .btn{padding:.8rem;border-radius:.8rem;border:none;color:#fff;font-size:1rem;cursor:pointer}section form .generate{width:10rem;background:#b48b7d}section form .share{margin-top:.5rem;background-color:#3f88c5;width:20rem}section form .generate:hover,section form .share:hover{transform:scale(1.05);transition:.2s}section form .generate:active,section form .share:active{transform:scale(.95);transition:.1s}.form-container{margin:1.2rem 0}.form-container input{padding:.8rem;width:40rem;border-radius:.5rem;border:none;border-bottom:1px solid gray;background-color:#eff1f3;margin:.5rem 0;color:#000}.form-container input:focus{transform:scale(1.01);transition:.3s;border:unset}.form-container .form{display:flex;align-items:center;gap:1rem}.form-container .form button{display:flex;align-items:center;gap:.2rem;font-weight:500;border:none;border-radius:.4rem;padding:.2rem .4rem;background-color:#b48b7d;cursor:pointer}.form-container .form button img{max-width:1.5rem}.form-container .form button:hover{transform:scale(1.05);transition:.2s}.form-container .form button:active{transform:scale(.99);transition:.1s}