@property --glow-deg {
  syntax: "<angle>";
  inherits: true;
  initial-value: -90deg;
}

/* the colors don't need to be registed */
@property --clr-1 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(58, 175, 68);
}

@property --clr-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(38, 207, 80);
}

@property --clr-3 {
  syntax: "<color>";
  inherits: true;
  initial-value: green;
}

@property --clr-4 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(0, 92, 12);
}

@property --clr-5 {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(14, 83, 37);
}

.glowing-border {
  --gradient-glow: var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4),
    var(--clr-5), var(--clr-1);

  margin-block: 2rem;
  margin-left: 0rem;
  max-width: 80ch;

  border: var(--border-width, 3px) solid transparent;
  border-radius: 2vw;
  background: linear-gradient(var(--surface, canvas) 0 0) padding-box,
    conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;

  position: relative;

  animation: glow 5s infinite linear;
}

@keyframes glow {
  100% {
    --glow-deg: 270deg;
  }
}

.glowing-border::before {
  z-index: -1;
  background: var(--surface, canvas);
  inset: 0.5rem;
  scale: 1.2 1;
  transform-origin: right;
  filter: blur(var(--glow-size, 1rem));
}

.glowing-border::after {
  z-index: -2;
  inset: -1.5rem;
  background: conic-gradient(from var(--glow-deg), var(--gradient-glow));
  filter: blur(var(--glow-size, 1rem));
  opacity: var(--glow-intensity, 0.125);
}

.glowing-border.right {
  --gradient-glow: var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4),
  var(--clr-5), var(--clr-1);

  margin-block: 2rem;
  margin-right: 12rem;
  padding: 4rem 3rem;
  max-width: 80ch;
  margin-inline-start: auto;
  border-radius: 3vw;
  border: var(--border-width, 3px) solid transparent;
  background: linear-gradient(var(--surface, canvas) 0 0) padding-box,
  conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;

  position: relative;

  animation: glow 10s infinite linear;

  &::before {
    transform-origin: left;
  }
}

.img-mision {
    width: 450px;
    height: auto;
    margin-top: 0.2rem;
    border-radius: 100vw;
}

.title {
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  padding: 1.5rem 0rem 0rem 0rem;
}

.text {
  font-size: larger;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  padding: 0rem 0rem 3rem 0rem;
  margin: 2rem 2rem 0rem 2rem;
}