style.css

:root{
    --orange-050:#ffe8d9;
    --orange-100:#ffd0b5;
    --orange-200:#ffb088;
    --orange-300:#ff9466;
    --orange-400:#f9703e;
    --orange-500:#f35627;
    --orange-600:#de3a11;
    --orange-700:#c52707;
    --orange-800:#ad1d07;
    --orange-900:#841003;
  
    --grey-050:#f5f7fa;
    --grey-100:#e4e7eb;
    --grey-200:#cbd2d9;
    --grey-300:#9aa5b1;
    --grey-400:#7b8794;
    --grey-500:#616e7c;
    --grey-600:#52606d;
    --grey-700:#3e4c59;
    --grey-800:#323f4b;
    --grey-900:#1f2933;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html{
    font-size: 150%;
    font-weight: 300;
    font-family: "Roboto", Helvetica,Arial,sans-serif;
    line-height: 1;
  }
  
  button{
    padding: .9rem;
    background-color: transparent;
    border: 0.5px solid rgba(0, 0, 0, 0.6);
    font-size: .7em;
    border-radius: 0;
    
  }
  
  body{
    display: flex;
    background-image: linear-gradient(236deg, #a1c4fd 0%, #c2e9fb 100%);
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .calculator{
    box-shadow: 0 0 25px 0 rgba(0,0,0, 0.4);
    overflow: hidden; 
    border-radius: .3rem;
  }
  
  
  .calculator__display{
    background-color: var(--grey-900);
    color: var(--orange-050);
    width: 15.8rem;
    padding: 0.5rem 1rem;
    text-align: right;
    font-size: calc(1rem * 1.2);
  }
  
  .calculator__keys{
    background: var(--grey-100);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "delete delete perc split"
    "seven eight nine times"
    "four five six subt"
    "one two three plus"
    "zero zero doc equal";
  }
  
  .delete{
    grid-area: delete;
  }
  .perc{
    grid-area: perc;
  }
  
  .split{
    grid-area: split;
  }
  
  .times{
    grid-area: times;
  }
  
  .subt{
    grid-area: subt;
  }
  
  .add{
    grid-area: plus;
  }
  
  .equal{
    grid-area: equal;
  }
  
  .o-style{
    background-color: var(--orange-400);
    color:var(--grey-050);
  }
  
  .o-style:hover,
  .o-style:focus{
    background-color: var(--orange-500);
  }
  
  .seven{
    grid-area: seven;
    
  }
  
  .eight{
    grid-area: eight;
  }
  
  .nine{
    grid-area: nine;
  
  }
  
  .four{
    grid-area: four;
    
  }
  .five{
    grid-area: five;
   
  }
  .six{
    grid-area: six;
    
  }
  
  .one{
    grid-area: one;
  }
  .two{
    grid-area: two;
  
  }
  .three{
    grid-area: three;
  }
  
  .zero{
    grid-area: zero;
    text-align: left;
    
  }
  .doc{
    grid-area:doc ;
    
  }
  
  .option:hover,
  .option:focus{
    background-color: var(--grey-200);
  }
  .n-style{
    background-color: var(--grey-700);
    color: var(--grey-050);
  }
  
  .n-style:hover,
  .n-style:focus{
    background-color: var(--grey-800);
    color: var(--grey-050);
  }
  [data-state="selected"] :not(.perc){
    background-color: var(--orange-600);
  }