.uc-butt {
  background-color: #3E1C13; /*  Темно-коричневый */
  border-radius: 20px;
  box-shadow: inset 4px 4px 10px #703E20, inset -4px -4px 10px #995F42; /* Темные оттенки коричневого */
  color: #f0f0f0; /* Светлый цвет для текста */
  cursor: pointer;
  font-size: 18px;
  padding: 10px 20px; 
  transition: all 0.2s ease-in-out;
  border: 2px solid #592C18; /*  Темно-коричневый */
}

.uc-butt:hover {
  box-shadow: inset 2px 2px 5px #703E20, inset -2px -2px 5px #995F42, 2px 2px 5px #703E20, -2px -2px 5px #995F42; /* Более яркая тень */
}

.uc-butt:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px #703E20, inset -2px -2px 5px #995F42, 2px 2px 5px #703E20, -2px -2px 5px #995F42; /*  То же, что и при наведении */
}
  
/* From Uiverse.io by Praashoo7 */ 
.input {
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 1em;
  background-color: #ccc;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
  transition: 300ms ease-in-out;
}

.input:focus {
  background-color: white;
  transform: scale(1.05);
  box-shadow: 13px 13px 100px #969696,
             -13px -13px 100px #ffffff;
}