[data-v-28a1cbd2]:root{--clr-theme1-backgrounds-400: hsl(222, 26%, 31%);--clr-theme1-backgrounds-500: hsl( 224, 36%, 15% );--clr-theme1-backgrounds-600: hsl( 223, 31%, 20% );--clr-theme1-keys-100: hsl(224, 28%, 35%);--clr-theme1-keys-200: hsl(225, 21%, 49%);--clr-theme1-keys-300: hsl(225, 51%, 76%);--clr-theme1-keys-400: hsl(6, 63%, 50%);--clr-theme1-keys-500: hsl(6, 70%, 34%);--clr-theme1-keys-600: hsl(6, 93%, 67%);--clr-theme1-keys-700: hsl(30, 25%, 89%);--clr-theme1-keys-800: hsl(28, 16%, 65%);--clr-theme1-keys-900: hsl(0, 0%, 100%);--clr-theme1-text-100: hsl(0, 0%, 100%);--clr-theme1-text-200: hsl(0, 0%, 100%);--clr-theme1-text-300: hsl(0, 0%, 100%);--clr-theme1-text-400: hsl(0, 0%, 100%);--clr-theme1-text-600: hsl(221, 14%, 31%);--clr-theme1-text-700: hsl(221, 14%, 31%);--clr-theme2-backgrounds-400: hsl(0, 0%, 90%);--clr-theme2-backgrounds-500: hsl(0, 0%, 93%);--clr-theme2-backgrounds-600: hsl( 0, 5%, 81% );--clr-theme2-keys-100: hsl(185, 58%, 25%);--clr-theme2-keys-200: hsl(185, 42%, 37%);--clr-theme2-keys-300: hsl(185, 40%, 56%);--clr-theme2-keys-400: hsl(25, 98%, 40%);--clr-theme2-keys-500: hsl(25, 99%, 27%);--clr-theme2-keys-600: hsl(25, 100%, 61%);--clr-theme2-keys-700: hsl(45, 7%, 89%);--clr-theme2-keys-800: hsl(35, 11%, 61%);--clr-theme2-keys-900: hsl(0, 0%, 100%);--clr-theme2-text-100: hsl(60, 10%, 19%);--clr-theme2-text-200: hsl(0, 0%, 100%);--clr-theme2-text-400: hsl(0, 0%, 100%);--clr-theme2-text-600: hsl(60, 10%, 19%);--clr-theme2-text-700: hsl(0, 0%, 100%);--clr-theme3-backgrounds-400: hsl(268, 75%, 9%);--clr-theme3-backgrounds-500: hsl( 268, 71%, 12% );--clr-theme3-backgrounds-600: hsl( 268, 71%, 12% );--clr-theme3-keys-100: hsl(285, 91%, 52%);--clr-theme3-keys-200: hsl(281, 89%, 26%);--clr-theme3-keys-300: hsl(280, 56%, 44%);--clr-theme3-keys-400: hsl(176, 100%, 44%);--clr-theme3-keys-500: hsl(177, 92%, 70%);--clr-theme3-keys-600: hsl(176, 100%, 79%);--clr-theme3-keys-700: hsl(268, 47%, 21%);--clr-theme3-keys-800: hsl(290, 70%, 36%);--clr-theme3-keys-900: hsl(268, 54%, 44%);--clr-theme3-text-500: hsl(198, 20%, 13%);--clr-theme3-text-600: hsl(52, 100%, 62%);--clr-theme3-text-100: hsl(52, 100%, 62%);--clr-theme3-text-200: hsl(0, 0%, 100%);--ff-primary: "League Spartan", sans-serif;--ff-body: var(--ff-primary);--fw-regular: 700;--size-100: .6875rem;--size-200: .75rem;--size-300: .8125rem;--size-400: 1rem;--size-500: 1.5rem;--size-600: 1.75rem;--size-700: 2rem;--size-800: 2.5rem;--size-900: 3.5rem;--fs-100: var(--size-100);--fs-200: var(--size-200);--fs-300: var(--size-300);--fs-400: var(--size-400);--fs-500: var(--size-500);--fs-600: var(--size-600);--fs-700: var(--size-700);--fs-800: var(--size-800);--fs-900: var(--size-900);--fs-body: var(--fs-700)}body.theme1 footer .attribution[data-v-28a1cbd2]{margin-top:2rem;text-align:center;color:var(--clr-theme1-text-100)}body.theme1 footer .attribution a[data-v-28a1cbd2]{color:var(--clr-theme1-keys-400);text-decoration:none}body.theme2 footer .attribution[data-v-28a1cbd2]{margin-top:2rem;text-align:center;color:var(--clr-theme2-text-100)}body.theme2 footer .attribution a[data-v-28a1cbd2]{color:var(--clr-theme2-keys-400);text-decoration:none}body.theme3 footer .attribution[data-v-28a1cbd2]{margin-top:2rem;text-align:center;color:var(--clr-theme3-text-100)}body.theme3 footer .attribution a[data-v-28a1cbd2]{color:var(--clr-theme3-keys-400);text-decoration:none}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}html,body{height:100%}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg{max-width:100%;display:block}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--clr-theme1-backgrounds-400: hsl(222, 26%, 31%);--clr-theme1-backgrounds-500: hsl( 224, 36%, 15% );--clr-theme1-backgrounds-600: hsl( 223, 31%, 20% );--clr-theme1-keys-100: hsl(224, 28%, 35%);--clr-theme1-keys-200: hsl(225, 21%, 49%);--clr-theme1-keys-300: hsl(225, 51%, 76%);--clr-theme1-keys-400: hsl(6, 63%, 50%);--clr-theme1-keys-500: hsl(6, 70%, 34%);--clr-theme1-keys-600: hsl(6, 93%, 67%);--clr-theme1-keys-700: hsl(30, 25%, 89%);--clr-theme1-keys-800: hsl(28, 16%, 65%);--clr-theme1-keys-900: hsl(0, 0%, 100%);--clr-theme1-text-100: hsl(0, 0%, 100%);--clr-theme1-text-200: hsl(0, 0%, 100%);--clr-theme1-text-300: hsl(0, 0%, 100%);--clr-theme1-text-400: hsl(0, 0%, 100%);--clr-theme1-text-600: hsl(221, 14%, 31%);--clr-theme1-text-700: hsl(221, 14%, 31%);--clr-theme2-backgrounds-400: hsl(0, 0%, 90%);--clr-theme2-backgrounds-500: hsl(0, 0%, 93%);--clr-theme2-backgrounds-600: hsl( 0, 5%, 81% );--clr-theme2-keys-100: hsl(185, 58%, 25%);--clr-theme2-keys-200: hsl(185, 42%, 37%);--clr-theme2-keys-300: hsl(185, 40%, 56%);--clr-theme2-keys-400: hsl(25, 98%, 40%);--clr-theme2-keys-500: hsl(25, 99%, 27%);--clr-theme2-keys-600: hsl(25, 100%, 61%);--clr-theme2-keys-700: hsl(45, 7%, 89%);--clr-theme2-keys-800: hsl(35, 11%, 61%);--clr-theme2-keys-900: hsl(0, 0%, 100%);--clr-theme2-text-100: hsl(60, 10%, 19%);--clr-theme2-text-200: hsl(0, 0%, 100%);--clr-theme2-text-400: hsl(0, 0%, 100%);--clr-theme2-text-600: hsl(60, 10%, 19%);--clr-theme2-text-700: hsl(0, 0%, 100%);--clr-theme3-backgrounds-400: hsl(268, 75%, 9%);--clr-theme3-backgrounds-500: hsl( 268, 71%, 12% );--clr-theme3-backgrounds-600: hsl( 268, 71%, 12% );--clr-theme3-keys-100: hsl(285, 91%, 52%);--clr-theme3-keys-200: hsl(281, 89%, 26%);--clr-theme3-keys-300: hsl(280, 56%, 44%);--clr-theme3-keys-400: hsl(176, 100%, 44%);--clr-theme3-keys-500: hsl(177, 92%, 70%);--clr-theme3-keys-600: hsl(176, 100%, 79%);--clr-theme3-keys-700: hsl(268, 47%, 21%);--clr-theme3-keys-800: hsl(290, 70%, 36%);--clr-theme3-keys-900: hsl(268, 54%, 44%);--clr-theme3-text-500: hsl(198, 20%, 13%);--clr-theme3-text-600: hsl(52, 100%, 62%);--clr-theme3-text-100: hsl(52, 100%, 62%);--clr-theme3-text-200: hsl(0, 0%, 100%);--ff-primary: "League Spartan", sans-serif;--ff-body: var(--ff-primary);--fw-regular: 700;--size-100: .6875rem;--size-200: .75rem;--size-300: .8125rem;--size-400: 1rem;--size-500: 1.5rem;--size-600: 1.75rem;--size-700: 2rem;--size-800: 2.5rem;--size-900: 3.5rem;--fs-100: var(--size-100);--fs-200: var(--size-200);--fs-300: var(--size-300);--fs-400: var(--size-400);--fs-500: var(--size-500);--fs-600: var(--size-600);--fs-700: var(--size-700);--fs-800: var(--size-800);--fs-900: var(--size-900);--fs-body: var(--fs-700)}.bg-theme1-400{background-color:var(--clr-theme1-backgrounds-400)}.bg-theme1-500{background-color:var(--clr-theme1-backgrounds-500)}.bg-theme1-600{background-color:var(--clr-theme1-backgrounds-600)}.keys-theme1-100{background-color:var(--clr-theme1-keys-100)}.keys-theme1-200{background-color:var(--clr-theme1-keys-200)}.keys-theme1-400{background-color:var(--clr-theme1-keys-400)}.keys-theme1-500{background-color:var(--clr-theme1-keys-500)}.keys-theme1-700{background-color:var(--clr-theme1-keys-700)}.keys-theme1-800{background-color:var(--clr-theme1-keys-800)}.text-theme1-100{background-color:var(--clr-theme1-text-100)}.keys-theme1-700{background-color:var(--clr-theme1-text-700)}.bg-theme2-400{background-color:var(--cl2-theme1-backgrounds-400)}.bg-theme2-500{background-color:var(--cl2-theme1-backgrounds-500)}.bg-theme2-600{background-color:var(--cl2-theme1-backgrounds-600)}.keys-theme2-100{background-color:var(--clr-theme2-keys-100)}.keys-theme2-200{background-color:var(--clr-theme2-keys-200)}.keys-theme2-400{background-color:var(--clr-theme2-keys-400)}.keys-theme2-500{background-color:var(--clr-theme2-keys-500)}.keys-theme2-700{background-color:var(--clr-theme2-keys-700)}.keys-theme2-800{background-color:var(--clr-theme2-keys-800)}.text-theme2-100{background-color:var(--clr-theme2-text-100)}.keys-theme2-700{background-color:var(--clr-theme2-text-700)}.bg-theme3-400{background-color:var(--cl3-theme1-backgrounds-400)}.bg-theme3-500{background-color:var(--cl3-theme1-backgrounds-500)}.keys-theme3-100{background-color:var(--clr-theme3-keys-100)}.keys-theme3-200{background-color:var(--clr-theme3-keys-200)}.keys-theme3-400{background-color:var(--clr-theme3-keys-400)}.keys-theme3-500{background-color:var(--clr-theme3-keys-500)}.keys-theme3-700{background-color:var(--clr-theme3-keys-700)}.keys-theme3-800{background-color:var(--clr-theme3-keys-800)}.text-theme3-100{background-color:var(--clr-theme3-text-100)}.keys-theme3-400{background-color:var(--clr-theme3-text-400)}.keys-theme3-700{background-color:var(--clr-theme3-text-700)}.fw-regular{font-weight:var(--fw-regular)}.fs-body{font-size:var(--fs-body)}.lh-100{line-height:var(--size-100)}.lh-200{line-height:var(--size-200)}.lh-300{line-height:var(--size-300)}.lh-400{line-height:var(--size-400)}.lh-500{line-height:var(--size-500)}.lh-600{line-height:var(--size-600)}.lh-700{line-height:var(--size-700)}.lh-800{line-height:var(--size-800)}.lh-900{line-height:var(--size-900)}.fs-100{font-size:var(--fs-100)}.fs-200{font-size:var(--fs-200)}.fs-300{font-size:var(--fs-300)}.fs-400{font-size:var(--fs-400)}.fs-500{font-size:var(--fs-500)}.fs-600{font-size:var(--fs-600)}.fs-700{font-size:var(--fs-700)}.fs-800{font-size:var(--fs-800)}.fs-900{font-size:var(--fs-900)}.flex{display:flex}.align-items-center{align-items:center}.align-items-flex-end{align-items:flex-end}.justify-content-center{justify-content:center}.justify-content-end{justify-content:end}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.flex-direction-column{flex-direction:column}.flex-direction-row{flex-direction:row}.text-center{text-align:center}.text-decoration-none{text-decoration:none}.opacity-50{opacity:.5}body.theme1{background-color:var(--clr-theme1-backgrounds-400)}body.theme1 header h1{color:var(--clr-theme1-text-100)}body.theme1 header .theme-changer h3{color:var(--clr-theme1-text-100)}body.theme1 header .theme-changer .option-group .labels span{color:var(--clr-theme1-text-100)}body.theme1 header .theme-changer .option-group .inputs{background-color:var(--clr-theme1-backgrounds-600)}body.theme1 header .theme-changer .option-group .inputs input[type=radio]:checked+label{background-color:var(--clr-theme1-keys-400)}body.theme1 header .theme-changer .option-group .inputs input[type=radio]:checked+label:hover{background-color:var(--clr-theme1-keys-600)}body.theme1 section.display{background-color:var(--clr-theme1-backgrounds-500);color:var(--clr-theme1-text-100)}body.theme1 section.keypad{background-color:var(--clr-theme1-backgrounds-600)}body.theme1 section.keypad button{background-color:var(--clr-theme1-keys-700);box-shadow:inset 0 -4px 0 var(--clr-theme1-keys-800);color:var(--clr-theme1-text-600)}body.theme1 section.keypad button:hover{background-color:var(--clr-theme1-keys-900)}body.theme1 section.keypad button.keys-200{background-color:var(--clr-theme1-keys-200);box-shadow:inset 0 -4px 0 var(--clr-theme1-keys-100)}body.theme1 section.keypad button.keys-200:hover{background-color:var(--clr-theme1-keys-300)}body.theme1 section.keypad button.text-200{color:var(--clr-theme1-text-200)}body.theme1 section.keypad button.keys-400{background-color:var(--clr-theme1-keys-400);box-shadow:inset 0 -4px 0 var(--clr-theme1-keys-500)}body.theme1 section.keypad button.keys-400:hover{background-color:var(--clr-theme1-keys-600)}body.theme1 section.keypad button.text-400{color:var(--clr-theme1-text-400)}body.theme2{background-color:var(--clr-theme2-backgrounds-400)}body.theme2 header h1{color:var(--clr-theme2-text-100)}body.theme2 header .theme-changer h3{color:var(--clr-theme2-text-100)}body.theme2 header .theme-changer .option-group .labels span{color:var(--clr-theme2-text-100)}body.theme2 header .theme-changer .option-group .inputs{background-color:var(--clr-theme2-backgrounds-600)}body.theme2 header .theme-changer .option-group .inputs input[type=radio]:checked+label{background-color:var(--clr-theme2-keys-400)}body.theme2 header .theme-changer .option-group .inputs input[type=radio]:checked+label:hover{background-color:var(--clr-theme2-keys-600)}body.theme2 section.display{background-color:var(--clr-theme2-backgrounds-500);color:var(--clr-theme2-text-100)}body.theme2 section.keypad{background-color:var(--clr-theme2-backgrounds-600)}body.theme2 section.keypad button{background-color:var(--clr-theme2-keys-700);box-shadow:inset 0 -4px 0 var(--clr-theme2-keys-800);color:var(--clr-theme2-text-600)}body.theme2 section.keypad button:hover{background-color:var(--clr-theme2-keys-900)}body.theme2 section.keypad button.keys-200{background-color:var(--clr-theme2-keys-200);box-shadow:inset 0 -4px 0 var(--clr-theme2-keys-100)}body.theme2 section.keypad button.keys-200:hover{background-color:var(--clr-theme2-keys-300)}body.theme2 section.keypad button.text-200{color:var(--clr-theme2-text-200)}body.theme2 section.keypad button.keys-400{background-color:var(--clr-theme2-keys-400);box-shadow:inset 0 -4px 0 var(--clr-theme2-keys-500)}body.theme2 section.keypad button.keys-400:hover{background-color:var(--clr-theme2-keys-600)}body.theme2 section.keypad button.text-400{color:var(--clr-theme2-text-400)}body.theme3{background-color:var(--clr-theme3-backgrounds-400)}body.theme3 header h1{color:var(--clr-theme3-text-100)}body.theme3 header .theme-changer h3{color:var(--clr-theme3-text-100)}body.theme3 header .theme-changer .option-group .labels span{color:var(--clr-theme3-text-100)}body.theme3 header .theme-changer .option-group .inputs{background-color:var(--clr-theme3-backgrounds-600)}body.theme3 header .theme-changer .option-group .inputs input[type=radio]:checked+label{background-color:var(--clr-theme3-keys-400)}body.theme3 header .theme-changer .option-group .inputs input[type=radio]:checked+label:hover{background-color:var(--clr-theme3-keys-600)}body.theme3 section.display{background-color:var(--clr-theme3-backgrounds-500);color:var(--clr-theme3-text-100)}body.theme3 section.keypad{background-color:var(--clr-theme3-backgrounds-600)}body.theme3 section.keypad button{background-color:var(--clr-theme3-keys-700);box-shadow:inset 0 -4px 0 var(--clr-theme3-keys-800);color:var(--clr-theme3-text-600)}body.theme3 section.keypad button:hover{background-color:var(--clr-theme3-keys-900)}body.theme3 section.keypad button.keys-200{background-color:var(--clr-theme3-keys-200);box-shadow:inset 0 -4px 0 var(--clr-theme3-keys-100)}body.theme3 section.keypad button.keys-200:hover{background-color:var(--clr-theme3-keys-300)}body.theme3 section.keypad button.text-200{color:var(--clr-theme3-text-200)}body.theme3 section.keypad button.keys-400{background-color:var(--clr-theme3-keys-400);box-shadow:inset 0 -4px 0 var(--clr-theme3-keys-500)}body.theme3 section.keypad button.keys-400:hover{background-color:var(--clr-theme3-keys-600)}body.theme3 section.keypad button.text-400{color:var(--clr-theme3-text-400)}body{font-family:var(--ff-body);font-size:var(--fs-body);min-height:708px;margin:var(--size-700) 0;display:flex;align-items:center;justify-content:center}body #app main{max-width:33.75rem;width:33.75rem}@media (max-width: 375px){body #app main{width:20.43rem}}body #app main header{margin-bottom:var(--size-700)}body #app main header h1{line-height:1.8125rem}body #app main header .theme-changer h3{margin-right:1.625rem;letter-spacing:1px}body #app main header .theme-changer .option-group{position:relative}body #app main header .theme-changer .option-group .labels{margin:0 10px}body #app main header .theme-changer .option-group .labels span{line-height:var(--size-100)}body #app main header .theme-changer .option-group .inputs{margin-top:5px;border-radius:var(--size-200)}body #app main header .theme-changer .option-group .inputs input[type=radio]{display:none}body #app main header .theme-changer .option-group .inputs label{cursor:pointer;width:var(--size-400);height:var(--size-400);margin:5px;border-radius:100vmax;border:none}body #app main section.display{padding:var(--size-700);border-radius:10px;text-align:right;line-height:3.25rem;letter-spacing:-.933333px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width: 375px){body #app main section.display{padding:var(--size-500);letter-spacing:-.666667px;font-size:var(--fs-800);line-height:2.3125rem}}body #app main section.keypad{margin-top:var(--size-500);padding:var(--size-700);border-radius:10px}@media (max-width: 375px){body #app main section.keypad{padding:var(--size-500)}}body #app main section.keypad>div:not(:last-child){margin-bottom:var(--size-500)}body #app main section.keypad button{line-height:2.3125rem;letter-spacing:-.666667px;padding:var(--size-200);border-radius:10px;width:100px;height:64px;border:none;cursor:pointer}@media (max-width: 375px){body #app main section.keypad button{border-radius:5px;width:60px;font-size:var(--fs-700);padding:var(--size-100)}}body #app main section.keypad button.w-2x{width:227px}@media (max-width: 375px){body #app main section.keypad button.w-2x{width:133px}}body #app main section.keypad button.text-200,body #app main section.keypad button.text-400{letter-spacing:-.466667px}@media (max-width: 375px){body #app main section.keypad button.text-200,body #app main section.keypad button.text-400{font-size:1.25rem;line-height:1.125rem;letter-spacing:-.333333px}}