:root{
    --blue: #3f80ea;
    --indigo: #6610f2;
    --darkblue:#000031;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #d9534f;
    --orange: #fd7e14;
    --yellow: #e5a54b;
    --green: #4bbf73;
    --teal: #20c997;
    --cyan: #1f9bcf;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #0e0e0e;
    --primary: #3f81ea94;
    --secondary: #495057;
    --success: #4bbf73;
    --info: #1f9bcf;
    --warning: #e5a54b;
    --danger: #d9534f;
    --light: #f1f5f9;
    --dark: #293042;
    font-family: 'poppins';
      font-size: 1.8vh;

}
body{
   display: flex;
    background-color: var(--light);
    height: 100vh;

}


h1{
  color: #1e2326;
  font-size: 5vh;
  font-weight:700;
}

.full-width{
  width: 100%; 
}

section{
  display: flex;
}


button  {

  text-decoration: none;
  padding: 12px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 3px;
  font-size: 16px;

}
a {
  text-decoration: none;
   padding: 13px;
   cursor: pointer;
   align-self: center;
}
a:hover,button:hover {
  background-color:rgb(179, 227, 255);
 
  /* Add transition for hover effects */
}
a:hover {
   cursor: pointer;
}
/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}