html, body{ 
  scroll-behavior: smooth;
}

:root{
  --b1: #242424;
  --b2: #121212;
  --b3: #1D1D1D;
  --w1: #E9E9E9;
  --y1: #FFE451;
  --y2: #FFCE11;
  --y3: #EDBC00;
  --g1: #0B222A;
}

.bg-w1{
  background-color: var(--w1);
}

.bg-b1{
  background-color: var(--b1);
}

.border-b1{
  border-color: var(--b1);
}

.bg-b2{
  background-color: var(--b2);
}

.border-b2{
  border-color: var(--b2);
}

.bg-b3{
  background-color: var(--b3);
}

.text-b3{
  color: var(--b3);
}

.bg-y1:hover{
  background-color: var(--y1);
}

.text-y1{
  color: var(--y1);
}

.bg-y2{
  background-color: var(--y2);
}

.text-y2{
  color: var(--y2);
}

.text-y3{
  color: var(--y3);
}

.gradient{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #0B222A;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(11,34, 42, 1));
  --tw-gradient-to: #000;	
}

.--pulse{
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%, 100% {
      opacity: 1;
    }

    50% {
      opacity: .5;
    }

  }

@media (min-width: 1100px){
    #main{
        margin-left: 15% !important;
    }
}