main.css

:root{
    --color-primary: hsl(0 0% 90%);

    --bg-color-primary: hsl(0 0% 10%);
    --bg-color-secondary: hsl(0 0% 5%);

    --height-header: 10vh;
    --height-display: 80vh;
    --height-controls: 10vh;

    --spacing: .75rem;

    --box-shadow-inward: 2px 2px 5px hsl(0 0% 0% / 0.8),
    -2px -2px 5px hsl(0 0% 90% / 0.2),
    inset 2px 2px 5px hsl(0 0% 0% / 0.85),
    inset -2px -2px 5px hsl(0 0% 100% / 0.2);

    --box-shadow-outward: 2px 2px 5px hsl(0 0% 0% / 0.8),
    -1px -1px 2px hsl(0 0% 0% / 0.2),
    inset 2px 2px 5px hsl(0 0% 100% / 0.2),
    inset -2px -2px 5px hsl(0 0% 20% / 0.2);

    --title-gradient: linear-gradient(90deg, 
        hsl(225 2% 52%), 
        hsl(228 2% 55%), 
        hsl(225 3% 69%), 
        hsl(228 3% 67%), 
        hsl(225 2% 64%),
        hsl(225 2% 58%)
    );
    --btn-gradient-inc: radial-gradient(hsl(120 61% 50% / 0.2), hsl(0 0% 0% / 0.2) 50%);
    --btn-gradient-dec: radial-gradient(hsl(219 79% 66% / 0.2), hsl(0 0% 0% / 0.2) 50%);
    --btn-gradient-inp: radial-gradient(hsl(60 100% 50% / 0.2), hsl(0 0% 0% / 0.2) 50%);

}
/*
*   RESETS
*/
*{margin: 0;padding: 0;box-sizing: border-box;}
h1{
    font-size: 1rem;
    font-weight: 500;
}

/*
*     UTILITIES
*/
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }

/*
*   SITEWIDE
*/
html{
    font-family: Helvetica, sans-serif;
    color: var(--color-primary);
}
body{
    text-align: center;
    min-height: 100vh;
    background-color: var(--bg-color-primary);
}

.c-calc{
    position: relative;
    padding-right: var(--spacing);
    padding-left: var(--spacing);
    width: 100vw;
    max-width: 350px;
    height: 100vh;
    margin: 0 auto;
}
.c-calc__menu{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    z-index: 1;
    border-radius: 50%;
    transform-origin: top;
    transform: scaleY(0);
    transition: all 250ms ease-in-out;
}
.c-calc__menu.open{
    border-radius: 0%;
    transform: scaleY(1);
}
.c-calc__menu-content > ul{
    list-style: none;
}
.c-calc__menu-content > ul > li > a{
    text-decoration: none;
    text-transform: uppercase;
    background-image: var(--title-gradient);
    background-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.close-menu-btn{
    width: 90%;
    margin: 0 auto;
    border-radius: 50px;
    font-size: 1rem;
    padding: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--box-shadow-outward);
}
.close-menu-btn:active{
    box-shadow: var(--box-shadow-inward);
    transform: scale(.9);
}
.c-calc header{
    height: var(--height-header);
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-calc header h1{
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    background-image: var(--title-gradient);
    background-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 3px black);
}
.c-calc__canvas-ctn{
    position: relative;
    height: var(--height-display);
    background-color: var(--bg-color-secondary);
    border-radius: 10px;
    box-shadow: var(--box-shadow-inward);
    overflow: hidden;
}
.num-input-ctn{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    padding: 1rem;
    background-color: var(--bg-color-primary);
    transform-origin: top;
    transform: scaleY(0);
    transition: all 250ms ease;
}
.num-input-ctn.open{
    transform: scaleY(1);
}
.num-btn_container{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(2,1fr);
    gap: 5px;
}
.num-btn{
    box-shadow: var(--box-shadow-outward);
    padding: .55rem;
    border-radius: 5px;
    font-family: monospace;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
}
.num-btn:active{
    box-shadow: var(--box-shadow-inward);
    transform: scale(.9);
}
.num-btn-controls_container{
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    display: flex;
    justify-content: space-around;
}
.c-calc__canvas-ctn canvas{
    width: 100%;
    height: 100%;
}
.c-calc-decimal-display{
    position: absolute;
    bottom: 0; right: 0;
    padding: 1.5rem;
    border-top-left-radius: 10px;
    background-color: hsl(0 0% 20% / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-calc__btns{
    padding: var(--spacing);
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: var(--height-controls);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: var(--spacing);
}
.c-calc__btns .btn{
    box-shadow: var(--box-shadow-outward);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* transition: all 200ms ease; */
}
.c-calc__btns .btn:active{
    box-shadow: var(--box-shadow-inward);
    transform: scale(.9);
}
.menu-btn{
    display: flex;
    flex-direction: column;
    gap: 10%;
}
.menu-btn .bar{
    width: 33%;
    max-width: 30px;
    height: 5%;
    border-radius: 10px;
    background-image: var(--title-gradient);
}
.input-btn{
    font-weight: 900;
    background-image: var(--btn-gradient-inp);
}
.decrement-btn{
    font-size: 1.5rem;
    background-image: var(--btn-gradient-dec);
}
.increment-btn{
    font-size: 1.5rem;
    background-image: var(--btn-gradient-inc);
}