:root {
    --gradient-blue: linear-gradient(to left top, #709cfc 10%, #1f6dfd 90%) !important;
    --gradient-green: linear-gradient(to left top, #06d664 10%, #01992e 90%) !important;
    --gradient-ash: linear-gradient(to left top, #887575 10%, #8a6767 90%) !important;
    --gradient-yellow: linear-gradient(to left top, #fae84b 10%, #ccc907 90%) !important;
    --gradient-purple: linear-gradient(to left top, #b050ff 10%, #6536b1 90%) !important;
    --gradient-red: linear-gradient(to left top, #fd6868 10%, #ff5d5d 90%) !important;
  }
  
  body {
    background: rgb(243, 243, 243)#111 !important;
  }
  
  .card-red {
    border-radius: 5px;
    /* background: rgb(255, 90, 90); */
    border: 5px solid #ff2c2c !important;
    /* color: rgba(0, 0, 0, 0.8);
    margin: auto;
    margin-bottom: 2rem;
    padding-left: 5px; */
  }

  .card-blue {
    border-radius: 5px;
    background: rgb(205, 255, 253);
    border: 1px solid #d6d6d6;
    color: rgba(0, 0, 0, 0.8);
    margin: auto;
    margin-bottom: 2rem;
    padding-left: 5px;
  }
  .card-green {
    border-radius: 5px;
    background: rgb(174, 255, 167);
    border: 1px solid #d6d6d6;
    color: rgba(0, 0, 0, 0.8);
    margin: auto;
    margin-bottom: 2rem;
    padding-left: 5px;
  }
  .card-ash {
    border-radius: 5px;
    background: rgb(209, 196, 196);
    border: 1px solid #d6d6d6;
    color: rgba(0, 0, 0, 0.8);
    margin: auto;
    margin-bottom: 2rem;
    padding-left: 5px;
  }
  .card-yellow {
    border-radius: 5px;
    background: rgb(248, 250, 132);
    border: 1px solid #d6d6d6;
    color: rgba(0, 0, 0, 0.8);
    margin: auto;
    margin-bottom: 2rem;
    padding-left: 5px;
  }
  .card-purple {
    border-radius: 5px;
    background: rgb(216, 182, 255);
    border: 1px solid #d6d6d6;
    color: rgba(0, 0, 0, 0.8);
    margin: auto;
    margin-bottom: 2rem;
    padding-left: 5px;
  }
  
  .btn-blue {
    color: #111;
    border: 5px solid;
    border-radius: 5px;
    border-image-slice: 1;
    background: var(--gradient-blue) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: black !important;
    border-image-source:  var(--gradient-blue) !important; 
    text-decoration: none;
    transition: all .4s ease;
  }

  .btn-red {
    color: #111;
    border: 5px solid;
    border-radius: 5px;
    border-image-slice: 1;
    background: var(--gradient-red) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: black !important;
    border-image-source:  var(--gradient-red) !important; 
    text-decoration: none;
    transition: all .4s ease;
  }
  
  .btn-red:hover, .btn-red:focus {
    border-radius: 5px;
    color: #111;
        background: var(--gradient-red) !important;
    -webkit-background-clip: none !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    border: 5px solid rgb(38, 112, 250) !important; 
    box-shadow: rgb(33, 103, 160) 1px 0 10px;
    text-decoration: none;
  }

  .btn-blue:hover, .btn-blue:focus {
    border-radius: 5px;
    color: #111;
        background: var(--gradient-blue) !important;
    -webkit-background-clip: none !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    border: 5px solid rgb(38, 112, 250) !important; 
    box-shadow: rgb(33, 103, 160) 1px 0 10px;
    text-decoration: none;
  }

  .btn-green {
    color: #111;
    border: 5px solid;
    border-radius: 5px;
    border-image-slice: 1;
    background: var(--gradient-green) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: black !important;
    border-image-source:  var(--gradient-green) !important; 
    text-decoration: none;
    transition: all .4s ease;
  }
  
  .btn-green:hover, .btn-green:focus {
    color: #111;
    border-radius: 5px;
        background: var(--gradient-green) !important;
    -webkit-background-clip: none !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    border: 5px solid rgb(9, 158, 54) !important; 
    box-shadow: rgb(28, 207, 73) 1px 0 10px;
    text-decoration: none;
  }

  .btn-ash{
    color: #111;
    border: 5px solid;
    border-radius: 5px;
    border-image-slice: 1;
    background: var(--gradient-ash) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: black !important;
    border-image-source:  var(--gradient-ash) !important; 
    text-decoration: none;
    transition: all .4s ease;
  }
  
  .btn-ash:hover, .btn-ash:focus {
    color: #111;
    border-radius: 5px;
        background: var(--gradient-ash) !important;
    -webkit-background-clip: none !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    border: 5px solid rgb(119, 98, 98) !important; 
    box-shadow: rgb(114, 99, 99) 1px 0 10px;
    text-decoration: none;
  }

  .btn-yellow {
    color: #111;
    border: 5px solid;
    border-radius: 5px;
    border-image-slice: 1;
    background: var(--gradient-yellow) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: black !important;
    border-image-source:  var(--gradient-yellow) !important; 
    text-decoration: none;
    transition: all .4s ease;
  }
  
  .btn-yellow:hover, .btn-yellow:focus {
    color: #111;
    border-radius: 5px;
        background: var(--gradient-yellow) !important;
    -webkit-background-clip: none !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    border: 5px solid rgb(146, 184, 10) !important; 
    box-shadow: rgb(177, 238, 10) 1px 0 10px;
    text-decoration: none;
  }

  .btn-purple {
    color: #111;
    border: 5px solid;
    border-radius: 5px;
    border-image-slice: 1;
    background: var(--gradient-purple) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: black !important;
    border-image-source:  var(--gradient-purple) !important; 
    text-decoration: none;
    transition: all .4s ease;
  }
  
  .btn-purple:hover, .btn-purple:focus {
    color: #111;
    border-radius: 5px;
        background: var(--gradient-purple) !important;
    -webkit-background-clip: none !important;
    -webkit-text-fill-color: rgb(0, 0, 0) !important;
    border: 5px solid rgb(149, 30, 228) !important; 
    box-shadow: rgb(88, 27, 158) 1px 0 10px;
    text-decoration: none;
  }