index.css

@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: #575757;
    --background-start-rgb: #f6f8f8;
    --background-end-rgb: #eef3f2;
  }
}

body {
  color: var(--foreground-rgb);
  /*background: linear-gradient(
      to bottom,
      transparent,
      var(--background-end-rgb)
    )
    var(--background-start-rgb);*/
  background: #ffcf68;
}

@layer base{
  body {
    @apply font-Nunito;
  }

  p {
    @apply text-lg font-light;
  }

  pre {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

@layer components {
  .circle-digit{
    @apply rounded-full bg-white border-2 border-gray-500 w-6 h-6 text-sm font-semibold inline-block text-center items-center;
  }

  .icon-label-button{
    @apply flex items-center transition-transform hover:scale-110 bg-slate-500 shadow-md hover:shadow-xl rounded-full px-2 pr-4 py-2 h-11;
    
  }

  .icon-label-button > span {
    @apply ml-2 font-semibold text-white;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

   
}