:root{--input-font-size: 32px;--primary-font-size: 128px;--secondary-font-size: 16px;--off-black-clr: hsl(0, 0%, 8%);--white-clr: hsl(0, 0%, 100%);--off-white-clr: hsl(0, 0%, 94%);--light-grey: hsl(0, 0%, 86%);--smokey-grey: hsl(0, 1%, 44%);--purple-primary-clr: hsl(259, 100%, 65%);--light-red-primary-clr: hsl(0, 100%, 67%);--mobile-breakpoint: 375px;--desktop-breakpoint: 1440px}*,*:before,*:after{padding:0;margin:0;box-sizing:border-box}.App{min-height:100vh;min-height:100dvh;font-family:Inter,sans-serif;display:grid;place-items:center;background-color:var(--light-grey)}input[type=number]::-webkit-inner-spin-button{display:none}.container{width:min(90%,55rem);padding:3rem;background-color:var(--off-white-clr);border-radius:1rem 1rem 10rem}.InputPanel{display:flex;gap:1rem}.InputField>label{font-size:1.2rem;color:var(--smokey-grey);text-transform:uppercase;letter-spacing:3px}.InputField input{cursor:pointer;margin-block:.25rem;width:100%;max-width:10rem;padding:.25em .5em;border:2px solid var(--light-grey);border-radius:10px;font-size:var(--input-font-size);font-weight:700;caret-color:var(--purple-primary-clr)}.InputField input.error{border:2px solid var(--light-red-primary-clr)}.InputField input:focus{outline:none!important;border-color:var(--purple-primary-clr)}.InputField .error:not(input){color:var(--light-red-primary-clr)}.SubmitInput{display:flex;align-items:center;height:100px;margin-bottom:1rem}.SubmitInput .line{height:3px;flex:1;background-color:var(--light-grey)}.SubmitInput .button{cursor:pointer;height:100px;aspect-ratio:1;padding:2rem;background-image:url(https://shazaaam101.github.io/age-calculator-app/assets/icon-arrow-ca520b94.svg);background-position:center;background-repeat:no-repeat;background-size:4rem;background-color:var(--purple-primary-clr);border-radius:50%;border:0;transition:.125s ease-in-out}.SubmitInput .button:is(:hover,:focus){background-color:var(--off-black-clr)}.ShowPanel .ShowValue{font-size:4rem;font-style:italic;font-weight:800}.ShowPanel .ShowValue span{color:var(--purple-primary-clr)}.footer{margin-top:auto;background-color:var(--off-white-clr);padding:2em;border-radius:1em 1em 0 0}.footer>span{color:var(--purple-primary-clr);font-style:oblique}@media screen and (max-width: 500px){.container{padding:3rem 1rem}.InputField input{font-size:1.5rem}.InputField>label{font-size:.75rem}.SubmitInput{position:relative}.SubmitInput .button{height:75px;background-size:3rem;position:absolute;left:50%;transform:translate(-50%)}.ShowPanel .ShowValue{font-size:3rem}}