@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@font-face{font-family:Impact;src:url(/meme-generator/assets/impact-00f1fc23.ttf) format("truetype")}*{box-sizing:border-box}body{margin:0;padding:0}#root{font-family:Inter,Poppins,sans-serif;height:100vh;--theme-color: #4df}.App{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "main" "footer"}footer{grid-area:footer;text-align:center;padding:10px}footer a{color:var(--theme-color);text-decoration:none}footer a:hover{text-decoration:underline}header{grid-area:header;display:flex;gap:10px;align-items:center;padding:20px;background-color:var(--theme-color);background-image:linear-gradient(to right,rgba(0,0,0,.6),rgba(0,0,0,.2));color:#fff}.logo{width:30px}.header--title{flex-grow:1;font-weight:700;font-size:1.2rem}p{margin:0}.content{grid-area:main;padding:35px;display:grid;grid-template-columns:1fr;gap:40px;justify-items:center;align-content:flex-start}.content>:nth-child(n){width:100%;max-width:600px}.form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:15px}.form--btn{grid-column:1 / span 2}input,button{appearance:none;-webkit-appearance:none;outline:none;border-radius:5px;font-family:inherit}input{border:1px solid #d5d4d8}.statement,.form--btn{height:fit-content}.statement{font-size:.75rem;padding:9.25px}.form--btn{border:none;padding-block:11.25px;color:#fff;font-weight:700;cursor:pointer;background:linear-gradient(to right,rgba(0,0,0,.6),rgba(0,0,0,.2)),var(--theme-color)}.form--btn:active{background:var(--theme-color)}.meme{position:relative;display:flex;justify-content:center}.meme--img{width:100%;max-height:500px;object-fit:contain}.meme--text{font-weight:400;position:absolute;color:#fff;margin:0;left:50%;transform:translate(-50%);font-family:Impact,sans-serif;--shadow-spread: 5px;text-shadow:-2px 0 var(--shadow-spread) #000,0 2px var(--shadow-spread) #000,2px 0 var(--shadow-spread) #000,0 -2px var(--shadow-spread) #000;word-spacing:.2rem;letter-spacing:.1rem}.meme--text.top{top:5%}.meme--text.bottom{bottom:5%}@media screen and (max-width: 450px){html{font-size:80%}}body{overflow:overlay}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-thumb{background-color:#5a5a5a;border-radius:10px;border:2px solid rgba(0,0,0,0);background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}