.btn {
  font-weight: 600;
  border: 1px solid;
  outline-style: solid;
  outline-offset: 2px;
  outline-color: var(--primary-l-2);
  outline-width: 2px;
  transition:
        background-color 200ms ease,
        color 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
  cursor: pointer;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgb(0 0 0 / .15);
}
.btn:active {
    transform: translateY(0);
}


.btn-primary {
  border-color: var(--primary);
  outline-color: var(--primary-l-2);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    
    backdrop-filter: blur(10px);
    border: 1px solid var(--primary);
    outline-color: var(--primary-l-2);
}
.btn-white {
    background: white;
    color: var(--primary);
    
    backdrop-filter: blur(10px);
    border: 1px solid var(--primary);
    outline-color: var(--primary-l-2);
}