:root {
    --color: #243746;
    /* --color-primary: #158876; */
    --color-secondary: #0e2233;
    --bg: #f3f5f4;
    --bg-secondary: #fff;
    --border-color: #ddd;
  }
  
  .dark-mode {
    --color: #ebf4f1;
    /* --color-primary: #41b38a; */
    --color-secondary: #fdf9f3;
    --bg: #111;
    --bg-secondary: #071521;
    --border-color: #0d2538;
    color: #ebf4f1 !important;
  }
  .sepia-mode {
    --color: #433422;
    --color-secondary: #504231;
    --bg: #f1e7d0;
    --bg-secondary: #eae0c9;
    --border-color: #ded0bf;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--bg);
    color: var(--color);
    transition: background-color 0.3s;
  }
  a {
    color: var(--color-primary);
  }
  .transition {
    transition: .3s;
  }

  .primary-color {
    background-color: rgb(11 109 153);
  }
  .general-animation {
    animation: general .7s cubic-bezier(.215,.61,.355,1);
  }

  @keyframes general {
    0% {
      opacity: 0;
      transform: scale(99%) translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: scale(100%) translateY(0);
    }
  }
  .onScroll {
    backdrop-filter: blur(12px);
    padding: 10px;
    transition: .3s;
  }

  .admin{
    border-radius: 5px; 
    background-color: rgba(165, 42, 42, 0.212); 
    color: rgb(255, 255, 255);
  }
  .support{
    border-radius: 5px; 
    background-color: rgba(116, 82, 227, 0.212); 
    color: rgb(255, 255, 255);
  }