body {
  font-family: "DM Sans", sans-serif;
  display: flex;
  justify-content: center; /* Centraliza na horizontal */
  align-items: center; /* Centraliza na vertical */
  height: 100vh; /* Garante que o body ocupe toda a tela */
  margin: 0; /* Remove margens padrão */
  background: #777575;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

/*-------------------------------------------------*/
.teclado{
display:flex;
gap: 40px;
background: #E0E0E0;
height:320px;
width:1200px;
border-radius:15px;
box-shadow: -5px -3px 10px rgba(0, 0, 0, 0.8);
padding:15px;
transition: width 0.5s ease-in-out;
}

/*-------------------------------------------------*/

.base{
/*border: solid 1px red;*/  /* ******borda teste****** */
height:100%;
}

.base.tecla_{
align-content: space-between; /* Distribui os elementos */
display:grid;
width:760px;
}

.base.utilitarios{
align-content: space-between; /* Distribui os elementos */
display:grid;
width:149px
}
.base.numericos{
align-content: space-between; /* Distribui os elementos */
display:grid;
width:204px
}

/*-------------------------------------------------*/
.teclas_fs{
display:flex;
gap:10px;
height: 33px;
}
.teclas{
display:flex;
gap:10px;
height: 43px;
}
.teclas_func{
display:flex;
gap:10px;
height: 53px;
}

.tecla {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 43px;
width: 41px;
font-size: 16px;
background: #F2F2F2;
color: #8f8f8f;
border-radius: 5px;
border: solid 1px rgba(0, 0, 0, 0.3);
box-shadow: -5px -3px 8px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease; /* Suaviza a animação */
}

/* Reduz a escala quando a div for clicada */
.tecla:active {
transform: scale(0.95);
 background: #0985EB;
}


.tecla.func{
height:53px;
width:43px;
}

.tecla.fs{
display:flex;
justify-content: end; /* Centraliza na horizontal */
align-items: end; /* Centraliza na vertical */
font-size:12px;
height:29px;
width:43px;
}

.fs_{
padding:5px;
}

.center{
font-size:12px;
}

.tecla.dois_icons{
display:grid;
justify-content: center; /* Centraliza na horizontal */
align-items: center;
}

span{
display:flex;
 justify-content: center; /* Centraliza na horizontal */
 align-items: center; /* Centraliza na vertical */
}

.tecla.delete{width:69px;}
.tecla.tab{width:69px;}
.tecla.caps_lock{width:93px;}
.tecla.return{width:69px;}
.tecla.shift{width:55px;}

.tecla.control{width:70px;}
.tecla.win{width:50px;}
.tecla.alt{width:50px;}
.tecla.espaco{width:286px;}
.tecla.menu_{width:50px;}

/*-------------------------------------------------*/

.tecla.fs.ut{
width: 41px;
}

.util{
display:grid;
gap:10px;
height: 96px;
width: 149px;
}

.direct{
display:grid;
gap:10px;
height: 96px;
width: 149px;
}

.teclas.dir_cima{
display:flex;
justify-content:center;
}

/*-------------------------------------------------*/

.class_led_num{
display:flex;
gap:40px;
justify-content: center; /* Centraliza na horizontal */
align-items: center; /* Centraliza na vertical */
padding:10px;
}

.leds{
background-color: #8f8f8f; /* Cor do LED */      
border: solid 1px rgba(0, 0, 0, 0.3);
height:10px;
width:10px;
border-radius:50%;
}

.tecla.zero{width:96px;}
.tecla.enter_2{ margin-top:-58px; height: 100px;}

/*-------------------------------------------------*/

.menu{
display: grid;
justify-items: center;
align-content: center;
gap:20px;
margin-left:20px;
}

#tecla-exibida {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 43px;
width: 150px;
font-size: 16px;
background: #F2F2F2;
color: #434659;
border-radius: 5px;
border: solid 1px rgba(0, 0, 0, 0.3);
box-shadow: -5px -3px 8px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease; /* Suaviza a animação */
}

/*-------------------------------------------------*/

.resetar{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
height: 43px;
width: 100px;
font-size: 16px;
background: #F2F2F2;
color: #434659;
border-radius: 5px;
border: solid 1px rgba(0, 0, 0, 0.3);
box-shadow: -5px -3px 8px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease; /* Suaviza a animação */
}

.resetar:active {
transform: scale(0.95);
color: #FFF;
background: #F08948;
}

/*-------------------------------------------------*/

.tema{
display: flex;
justify-content: center; /* Centraliza na horizontal */
align-items: center; /* Centraliza na vertical */
height: 43px;
width: 100px;
border-radius:22px;
background: #A0EBE9;
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.5);
transition: background-color 0.5s
}

.tema::after{
content:"";
position: absolute;
margin-left:-50px;
height: 35px;
width: 35px;
background-color: #febb40;
box-shadow: 0px 0px 15px rgba(255, 234, 56, 1);
border-radius:50%;
transition: background-color 0.5s ease-in-out, margin-left 0.5s ease;
}

.tema.ativo::after {
  margin-left: 50px; /* Nova posição quando ativado */
  background-color: #D0E5D9;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.tema.ativo{
background-color: #0B3D75;
}