html,body{transition:background-color .5s ease;font-family:Arial,Helvetica,sans-serif;padding:0;box-sizing:border-box;max-width:1400px;margin:0 auto;font-size:16px;display:flex;justify-content:center;align-items:center;height:100vh}.light-mode{background-color:#d1fae5;color:#1f2937}.dark-mode{background-color:#1f2937;color:#f3f4f6}#toggleButton{padding:.6rem .8rem;cursor:pointer}.headline{display:flex;align-items:center}h1{font-size:1.8rem;margin-bottom:0;max-width:80%;letter-spacing:.2;transition:color .5s ease}span{color:#10b981}h3{font-size:1.2rem;margin-bottom:1rem;color:#d1d5db;font-weight:400;letter-spacing:.2}hr{border:none;height:1px;background-color:#d1d5db;width:100%;margin-left:0}button{background-color:#10b981;color:#f3f4f6;padding:.8rem 1rem;border:none;border-radius:.5rem;cursor:pointer;font-size:1rem;margin-top:1rem;margin-bottom:1rem;letter-spacing:.2;font-weight:700}input{padding:.6rem 2.5rem .6rem 1rem;border:none;border-radius:.5rem;margin-top:.5rem;margin-bottom:.5rem;background-color:#273549;color:#10b981;outline:none;letter-spacing:.2;position:relative}.container{margin:5rem;padding:5rem;max-width:800px}.input{position:relative}.icon{position:absolute;top:50%;transform:translateY(-50%);right:1rem;color:#d1d5db;padding:.5rem}.icon:hover{color:#10b981;cursor:pointer}.input-section{display:flex;margin-top:1rem;margin-bottom:1rem;gap:2rem}.notification{background-color:#10b981;color:#f3f4f6;padding:1rem;border-radius:.5rem;margin-top:1rem;margin-bottom:1rem;width:60%;text-align:center;z-index:1;position:fixed;top:0;visibility:hidden}.notification.show{visibility:visible;-webkit-animation:fadein .5s,fadeout 5s 2.5s;animation:fadein .5s,fadeout 5s 2.5s}@-webkit-keyframes fadein{0%{bottom:0;opacity:0}50%{bottom:15px;opacity:.5}to{bottom:30px;opacity:1}}@keyframes fadein{0%{top:0;opacity:0}50%{top:5px;opacity:.5}to{top:10px;opacity:1}}@-webkit-keyframes fadeout{0%{top:30px;opacity:1}50%{top:20px;opacity:.5}to{top:10px;opacity:0}}@keyframes fadeout{0%{top:30px;opacity:1}50%{top:20px;opacity:.5}to{top:10px;opacity:0}}.generator{display:flex;align-items:center;gap:2rem;margin-top:1rem;margin-bottom:1rem}.toggle-section{display:flex;gap:1rem;align-items:center;color:#f3f4f6}label{letter-spacing:.2;font-weight:400;margin-right:.2rem;color:#10b981}input[type=checkbox]{transform:scale(1.5);margin-right:.5rem}@media screen and (max-width: 768px){.container{margin:2rem;padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.headline{flex-direction:column;align-items:center;justify-content:center;gap:1rem}.header-section{display:flex;flex-direction:column;align-items:center}.generator{margin:0;padding:0}h1{font-size:1.5rem;text-align:center}h3{text-align:center}h3{font-size:1rem;margin-bottom:.01rem}hr,.input{width:100%}.icon{right:.5rem}.input-section{flex-direction:column;align-items:center;justify-content:space-between;gap:1rem}.notification{width:60%}.generator{flex-direction:column;gap:1rem}.toggle-section{flex-direction:column;align-items:center;justify-content:center}.toggle-section label,#toggleButton{margin:0}}