@import"https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:League Spartan,sans-serif;font-weight:700}button{cursor:pointer}body{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2vw}main{width:min(90vw,35rem);height:min(auto,40rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;flex:1 1 30rem}header{display:flex;align-items:flex-end;justify-content:space-between;color:#fff}header h2{font-size:2rem}.theme_wrapper{display:flex;align-items:flex-end;gap:1rem}.theme_wrapper p{font-size:clamp(.6rem,1vw,.8rem);text-transform:uppercase;letter-spacing:.15rem}.theme_container{display:grid;grid-template-columns:repeat(3,1.25rem);grid-template-rows:1rem 1.5rem;grid-template-areas:"markers markers markers" "button button button";gap:.2rem}.theme_markers{grid-area:markers;display:flex;justify-content:space-between;align-items:center;padding:.4rem}.theme_markers span{font-size:.875rem}.theme_container button{grid-area:button;width:100%;background-color:#182034;border:none;border-radius:2rem;padding:.4rem;position:relative}.theme_container button:before{content:"";width:1rem;height:1rem;background-color:#d03f2f;position:absolute;top:50%;border-radius:50%}.phase_1:before{left:.2rem;transform:translateY(-50%)}.phase_2:before{left:50%;transform:translate(-50%,-50%)}.phase_3:before{left:calc(100% - 1.2rem);transform:translateY(-50%)}.screen{height:6rem;background-color:#182034;color:#fff;padding:1rem;border:none;border-radius:.6rem;font-size:2rem;width:100%;text-align:end}.keypad_wrapper{flex:1;background-color:#232c43;border-radius:.6rem;padding:1rem;display:grid;grid-template-columns:repeat(4,minmax(2rem,1fr));grid-auto-rows:minmax(3rem,5rem);gap:1rem}.key{font-size:2rem;border:none;border-radius:.4rem;background-color:#e6e6e6;color:#444b5a;box-shadow:inset 0 -4px #b4a597;padding:.6rem;min-width:0}.key:not(.delete_btn,.reset_btn,.equals_btn):hover{background-color:#fff}.delete_btn{font-size:1.8rem;color:#fff;background-color:#637097;box-shadow:inset 0 -4px #404e72}.reset_btn{grid-column:span 2;background-color:#637097;box-shadow:inset 0 -4px #404e72}.equals_btn{grid-column:span 2;background-color:#d03f2f;box-shadow:inset 0 -4px #93261a}.reset_btn:hover,.equals_btn:hover,.delete_btn:hover{filter:brightness(2)}.reset_btn,.equals_btn{padding:.4rem;border-radius:.4rem;border:none;font-size:1.8rem;color:#fff}.theme_1{background-color:#3a4764}.theme_2{background-color:#e6e6e6}.theme_2 header h2,.theme_2 .theme_wrapper p,.theme_2 .theme_markers{color:#35352c}.theme_2 .theme_container button{background-color:#d1cccc}.theme_2 .theme_container button:before{background-color:#ca5502}.theme_2 .screen{background-color:#ededed;color:#35352c}.theme_2 .keypad_wrapper{background-color:#d1cccc}.theme_2 .key{background-color:#e6e6e6;box-shadow:inset 0 -4px #a69d91;color:#35352c}.theme_2 .key:not(.delete_btn,.reset_btn):hover{background-color:#fff}.theme_2 .delete_btn,.theme_2 .reset_btn{background-color:#377f86;box-shadow:inset 0 -4px #1b5f65;color:#fff}.theme_2 .equals_btn{background-color:#ca5502;box-shadow:inset 0 -4px #893901}.theme_2 .delete_btn:hover,.theme_2 .reset_btn:hover,.theme_2 .equals_btn:hover{filter:brightness(2)}.theme_3{background-color:#160628}.theme_3 header h2,.theme_3 .theme_wrapper p,.theme_3 .theme_markers{color:#ffe53d}.theme_3 .theme_container button{background-color:#1d0934}.theme_3 .theme_container button:before{background-color:#00e0d1}.theme_3 .screen{background-color:#1d0934;color:#ffe53d}.theme_3 .keypad_wrapper{background-color:#1d0934}.theme_3 .key{background-color:#341c4f;box-shadow:inset 0 -4px #871c9c;color:#ffe53d}.theme_3 .key:hover{background-color:#341c4f}.theme_3 .delete_btn,.theme_3 .reset_btn{background-color:#58077d;box-shadow:inset 0 -4px #bc15f4;color:#fff}.theme_3 .equals_btn{background-color:#00e0d1;box-shadow:inset 0 -4px #6cf9f2}.theme_3 .equals_btn:hover{color:#1b2428}.theme_3 .key:hover,.theme_3 .delete_btn:hover,.theme_3 .reset_btn:hover,.theme_3 .equals_btn:hover{filter:brightness(2)}