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



.layer{
    background-color: #f9f6f6ca;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px dotted #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 


  .sidebar button {
    color: white;
    opacity: 0; 
    transform: translateX(-20px); 
    animation: slideIn 0.5s forwards; 
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translatey(20px); 
    }
    100% {
        opacity: 1;
        transform: translatey(0); 
    }
}


.sidebar button:nth-child(1) {
    animation-delay: 0.1s;
}

.sidebar button:nth-child(2) {
    animation-delay: 0.2s;
}

.sidebar button:nth-child(3) {
    animation-delay: 0.3s;
}

.sidebar button:nth-child(4) {
    animation-delay: 0.4s;
}
.sidebar button:nth-child(5) {
  animation-delay: .5s;
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


.btnr :focus{
  box-shadow: 0 0 0 0.25rem inset rgba(225, 83, 97 ,.5);
}

.button:focus{
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}