: :root{
       --cinza:#aaa; 
       --vermelho: red;
       --rosa: pink;
       --branco: white;
       --luz: #ff5c77;
 }

 body{
      background-color: var(--roxo);
      align-items: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      min-height: 100vh;
 }

 hi{
      font-size: 2rem;
      margin-bottom: 20px;
      color: var(--branco);
 }

 h2{ 
     color: var(--branco);
     margin-bottom: 20px;
     font-size: 1.5rem;
 }

 .teclado{
     background: radial-gradient(circle,rgba(251, 63, 176, 1) 0%, rgba(70, 243, 252, 1) 100%);
     box-shadow: 6px 8px 0 6px #666, 10px 10px 10px #000;
     border-radius: 30px;
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(3, 1fr);
     padding: 10px;
 }