.btn {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.05em;

  background: linear-gradient(
    180deg,
    var(--clr-blood-600),
    var(--clr-blood-700)
  );
  color: var(--clr-lgt);

  padding: 0.55em 1.1em;
  border-radius: 6px;

  box-shadow:
    /* inner heat */
    inset 0 1px 0 rgba(var(--clr-dre-500-rgb), 0.35),

    /* blood mass */
    0 10px 22px rgba(var(--clr-blood-700-rgb), 0.75),
    0 6px 8px rgba(var(--clr-blood-700-rgb), 0.85),

    /* slow bleed glow */
    0 0 120px -12px rgba(var(--clr-blood-700-rgb), 1);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}
.btn:hover {
  transform: translateY(-3px);
  filter: saturate(1.1);

  box-shadow:
    inset 0 1px 0 rgba(var(--clr-dre-500-rgb), 0.45),

    0 14px 30px rgba(var(--clr-blood-700-rgb), 0.85),
    0 10px 12px rgba(var(--clr-blood-700-rgb), 0.95),

    0 0 150px -10px rgba(var(--clr-blood-700-rgb), 1);
}
.btn:active {
  transform: translateY(-1px);
  filter: saturate(1);

  box-shadow:
    inset 0 2px 6px rgba(var(--clr-blood-700-rgb), 0.9),

    0 6px 14px rgba(var(--clr-blood-700-rgb), 1),
    0 0 80px -14px rgba(var(--clr-blood-700-rgb), 1);
}


.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left:  0.5rem; /* Combines left, right, and bottom padding */
    padding-right: 0.5rem; /* Adds space inside the container */
   
  
   
}

.section {
    margin-top: 5rem;
}

.loading{
filter: blur(40px) grayscale(100%);

}

.loaded{
    filter: blur(0px) grayscale(0%);
    transition: 0.7s ease-in-out;
}
/* xs */
@media (min-width: 475px) {
    .container {
        max-width: 475px;
    }
}

/* sm */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

/* m */
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

/* l */
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

.section {
    margin-top: 10rem;
}

/* xl */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* 2xl */
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}