*{padding:0;margin:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff;background-color:#111;color-scheme:dark}.App{margin:1.5rem 0;padding-inline:1rem}.elements{display:flex;flex-wrap:wrap;gap:2rem;padding:2rem;justify-content:center}.element{min-width:clamp(6rem,32vw,12rem);aspect-ratio:1;font-size:clamp(.75rem,4vw,1.5rem);outline:.25rem solid #333;outline-offset:5px;background-color:#333;display:flex;flex-direction:column}.element-head{text-align:left;padding:1rem 0 0 1rem}.element-body{flex-grow:1;display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;padding-bottom:2rem}img{width:10rem;height:10rem}form{width:100%;display:flex;gap:1rem;justify-content:center;font-size:1.5rem}button{width:40%;max-width:150px;font-size:1rem;font-weight:600;background-color:#4363d8;color:#fff;border-color:transparent}input{padding:.5rem;width:60%;max-width:300px;font-size:inherit;height:1.5rem}.red{outline-color:#e6194b;background-color:#e6194b}.blue{outline-color:#4363d8;background-color:#4363d8}.green{outline-color:#3cb44b;background-color:#3cb44b}.purple{outline-color:#911eb4;background-color:#911eb4}.orange{outline-color:#f58231;background-color:#f58231}.yellow{outline-color:#ffe119;background-color:#ffe119;color:#000}.lime{outline-color:#bfef45;color:#000;background-color:#bfef45}.cyan{outline-color:#42d4f4;color:#000;background-color:#42d4f4}.navy{outline-color:#000075;background-color:#000075}.maroon{outline-color:maroon;background-color:maroon}.lavender{outline-color:#dcbeff;background-color:#dcbeff;color:#000}