body,html{height:100%;width:100%}body{background:#ff5f6d;background:linear-gradient(to right, #ff5f6d, #ffc371);background-size:cover;box-sizing:border-box;font-family:Arial, Helvetica, sans-serif;font-size:16px;height:100%;margin:0;padding:1rem}a{color:#eee;text-decoration:none}.btn{border:0;border-radius:.5rem;cursor:pointer;display:block;font-size:1.2rem;font-weight:500;outline:none;margin:.125rem;padding:.5rem 1rem}.btn--generate{background-color:rgba(100,149,237,0.5);border:0.125rem solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.6);margin:0 auto}.btn--generate:hover{background-color:rgba(100,149,237,0.75);border:0.125rem solid #fff;color:#fff}.btn--options{background:transparent;color:rgba(255,255,255,0.8);margin:-2rem 0;position:absolute;right:0}.btn--t-l{transition:all .3s linear}.category{cursor:pointer;transition:.3s all linear}.category--enabled{color:#7ba5f0}.category--uppercase{text-transform:capitalize}.container{background:rgba(0,0,0,0.75);border:0.125rem solid rgba(0,0,0,0.5);border-radius:.5rem;box-sizing:border-box;margin:0 auto;padding:2rem;width:100%;z-index:10}.custom__input{resize:none}.features{background:rgba(0,0,0,0.75);border:0.125rem solid rgba(0,0,0,0.25);border-radius:.5rem;box-sizing:border-box;margin:2rem 0;padding:1rem;width:100%}@media (min-width: 768px){.features{max-height:100%;transition:1s all ease-in}}.features__header{color:#fff;font-size:1.5rem;font-weight:700;text-align:center}.features__header p{margin:1rem}@media (min-width: 768px){.features__header p{margin:0 0 1rem}}.features__body{color:#aaa}.features--hidden{max-height:0;opacity:0;pointer-events:none}.features--grid{display:grid;grid-display:1fr 1fr 1fr / 100%}@media (min-width: 768px){.features--grid{grid-template:100% / 1fr 1fr 1fr}}.features__wrapper{width:100%}@keyframes rotation{0%{transform:scaleX(1)}25%{transform:scaleX(0)}50%{transform:scaleX(-1)}75%{transform:scaleX(0)}100%{transform:scaleX(1)}}.footer{text-align:center;margin:2rem}.fa-github{color:#000}.copy{font-size:.8rem}.output{max-width:100%}.output__username{color:#fff;font-size:1.5rem;font-weight:700;margin:2rem 0;outline:none;text-align:center}@media (min-width: 768px){.output__username{font-size:3rem}}.quote{color:#222;font-size:1.5rem;opacity:0;position:fixed;transition:1s opacity linear}.quote--show{opacity:.125}.setting{transition:.3s all linear;cursor:pointer}.setting--number{background:#ddd;border:0;outline:none;text-align:center;width:2rem}.setting--enabled{color:#7ba5f0}.title--common{color:#222;font-family:'Fredoka One', Arial, Helvetica, sans-serif;text-align:center;text-align:center}.title{margin:0;font-size:2.5rem;transition:color 3s linear}@media (min-width: 768px){.title{font-size:3.5rem}}.subtitle{opacity:.6;font-size:1rem;margin:0 0 -1rem}@media (min-width: 768px){.subtitle{margin-top:-.5rem;margin-left:15rem}}.wrapper{box-sizing:border-box;height:100%;margin:0 auto;max-width:50rem;position:relative;z-index:1}