*{box-sizing:border-box}body{margin:0;font-family:sans-serif}.nav{width:100%;background:linear-gradient(90deg,#ff3838 10%,#ff7373);display:flex;align-items:center;color:#fff;font-size:1.4rem;gap:5px;height:70px}.nav--logo{margin-left:30px;width:30px;background-color:transparent}.main{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-top:20px}.main--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;align-items:center;justify-content:center;width:min(100%,520px)}.main--button{grid-column:1 / -1;padding:10px;background:linear-gradient(90deg,#ff3838 10%,#ff7373);border:none;border-radius:5px;color:#fff;font-size:1.1rem}.main--button:active{-webkit-box-shadow:inset 2px 2px 3px 2px rgba(0,0,0,.6);-moz-box-shadow:inset 2px 2px 3px 2px rgba(0,0,0,.6);box-shadow:inset 2px 2px 3px 2px #0009}.main--top-text,.main--bottom-text{padding:10px;border:1px solid gray;border-radius:5px;font-size:1.1rem;text-indent:5px;outline:none}.main--output{margin-top:10px;width:100%;position:relative;grid-column:1/-1}.main--output-img{width:100%}.main--output-text-up,.main--output-text-down{position:absolute;text-align:center;width:100%;color:#fff;font-size:3rem;text-transform:uppercase;text-shadow:4px 4px 0 #000,-4px -4px 0 #000,4px -4px 0 #000,-4px 4px 0 #000,0px 4px 0 #000,4px 0px 0 #000,0px -4px 0 #000,-4px 0px 0 #000}.main--output-text-up{top:0}.main--output-text-down{bottom:0}