*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}img{max-inline-size:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;font-size:inherit;font-weight:inherit}h1,h2,h3,h4,h5,figure,p,ol,ul{margin:0}ol[role=list],ul[role=list]{list-style:none;padding-inline:0}#root,#__next{isolation:isolate}:root{--background-color: #ffffff;--text-color: rgb(10, 10, 13);--button-bg-color: #f9f9f9;--button-text-color: #000}body{font-family:Poppins,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;overflow-x:hidden;background-color:var(--background-color);color:var(--text-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:3em;line-height:1.1;padding-bottom:10px;font-family:Poppins,Helvetica,sans-serif;font-weight:700;font-style:normal}body.dark{--background-color: #121212;--text-color: #ffffff;--button-bg-color: #333333;--button-text-color: #ffffff}button{background-color:var(--button-bg-color);color:var(--button-text-color)}.container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(1fr 6fr,auto);grid-template-areas:"header header" "main main";min-height:100vh;min-width:100vw;box-sizing:border-box}.App-header{grid-area:header}.navbar{display:flex;align-items:center;background:#672280;background:radial-gradient(circle,#672280,#fd1dcb 46%,#fcb045);color:#fff;box-shadow:0 2.98px 7.46px #0000004d;padding:.5rem}.App-logo{height:5em;width:auto}.App-title{font-family:Karla;font-size:30px;font-weight:700;line-height:25px;letter-spacing:.1em;text-align:left}.main-container{grid-area:main;padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;cursor:pointer}.user-input-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px}.input-container{display:flex;gap:30px;justify-content:space-between}.input-wrapper>label{line-height:35px;font-weight:700;cursor:pointer}.input-wrapper input{padding:10px;width:20rem;border:1px solid #ccc;border-radius:4px;margin-bottom:5px;transition:border-color .3s ease,box-shadow .3s ease}.input-wrapper input:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80;outline:none}.content-button{display:flex;justify-content:center;align-items:center;gap:20px;border-radius:10px;padding:1rem 5rem;background:radial-gradient(circle,#672280,#fd1dcb 46%,#fcb045);color:#fff;border:none;cursor:pointer;font-size:16px;transition:background-color .3s ease,transform .3s ease}.content-button img{width:30px;height:30px}.content-button:hover{background:radial-gradient(circle,#9160a3,#ff84e4 46%,#ffcc85);transform:scale(1.05)}.content-button:active{transform:scale(.95)}.meme-container{position:relative;width:100%;max-width:500px;margin-top:30px;display:flex;justify-content:center;align-items:center}.meme{font-family:Impact;font-size:32px;font-weight:900;line-height:39.03px;text-align:center;position:absolute;width:100%;color:#fff;text-shadow:2px 2px 5px black}.meme-img{width:100%;height:auto;max-height:500px;object-fit:contain}.top-text{top:10px}.bottom-text{bottom:10px}@media (max-width: 900px){.input-container{flex-direction:column;align-items:center}.input-wrapper{max-width:100%}.content-button{padding:1rem 2rem;width:100%;max-width:400px}.meme-container{max-width:400px}.meme{font-size:24px;line-height:29px}}@media (max-width: 600px){.main-container{padding:1rem}.content-button{font-size:14px;padding:.5rem 1rem;width:100%;max-width:300px}.input-wrapper input{padding:8px}.meme-container{max-width:300px}.meme{font-size:18px;line-height:22px}}