body{margin:0;display:flex;position:absolute;top:0;right:0;bottom:0;left:0}@media (width < 400px){html{font-size:80%}}@media (width < 300px){html{font-size:60%}}@media (width < 200px){html{font-size:50%}}.main{flex:1;display:grid;place-content:center;padding:1rem;min-width:-moz-fit-content;min-width:fit-content;box-sizing:border-box;background:radial-gradient(circle at center,#494490 0,#1c1a23)}.card-form{display:flex;flex-direction:column;gap:2rem;align-items:flex-end;width:100%;position:relative}.card-form .card-form__loading{position:absolute;top:50%;left:50%;z-index:1;translate:-50% -125%}.loader{width:4.5rem;aspect-ratio:1;display:grid;border:.3rem solid #0000;border-radius:50%;border-color:#ccc #0000;animation:loader 1s infinite linear}.loader:before,.loader:after{content:"";grid-area:1/1;margin:.2rem;border:inherit;border-radius:50%}.loader:before{border-color:#ffffff #0000;animation:inherit;animation-duration:.5s;animation-direction:reverse}.loader:after{margin:1.2rem}@keyframes loader{to{transform:rotate(1turn)}}.card{border:2px solid black;display:flex;flex-direction:column;width:15rem;max-width:100%;height:25rem;padding:2rem 1.5rem;gap:1rem;border-radius:10px;position:relative;isolation:isolate;background:#fff}.card.card--faded{opacity:.25}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#802200;-webkit-mask-image:url(cardboard-mask.png);mask-image:url(cardboard-mask.png);z-index:-1}.card:after{content:"";position:absolute;top:.4rem;right:.7rem;border-radius:100%;width:1rem;aspect-ratio:1/1;--color: #c05e5e;background-color:var(--color);border:1px solid hsl(from var(--color) h s calc(l - 13))}.card .card__image{flex:5;background:linear-gradient(130deg,#d8d8d870,#adadad70);border:1px solid #797979;border-radius:5px}.card .card__title{flex:0 0 0}.card .card__title.card__title--input{flex:none;padding:.7rem .5rem;background:#ffffffa0}.card .card__description{flex:1}.card .card__description.card__description--input{resize:none;background:#ffffffa0;padding:.7rem .5rem;border-width:2px;border-style:inset;border-color:light-dark(rgb(118,118,118))}.btn{border:none;padding:1.1rem 1rem;border-radius:25px;cursor:pointer;background-color:#00679f;color:#fff}.btn:not(:disabled):active{translate:0 2px}.btn:disabled{opacity:.2;cursor:not-allowed}.btn.btn--generate{position:absolute;bottom:-5rem}