:root{--dark-color: #212121}body{font-family:system-ui;text-align:center;margin-top:40px;font-size:1.5em}h4{font-weight:400;margin-bottom:5px}h1{font-weight:400;margin-top:0;margin-bottom:40px;font-size:2em}img{border-radius:150%;height:120px}main{display:flex;flex-direction:column;align-items:center}main *{margin-bottom:12px}input{text-align:center;font-size:large;outline:none;border:none;border-bottom:1px solid #000;text-transform:capitalize}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:var(--dark-color)!important}button{background:#8bc34a;color:#fff;border:none;font-size:.8em;padding:5px 15px;margin:20px;border-radius:5px;cursor:pointer}a{color:#6492f6}@media(prefers-color-scheme:dark){body{background:var(--dark-color);color:#fff}input,input:active{background:var(--dark-color);border-color:#fff;color:#fff}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#fff!important}}