.cornerborder{
  background-color: var(--colorPrincipal);
  position: relative;
}
.cornerborder::after,.cornerborder::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from 176deg,transparent 75%, var(--colorSecundario),transparent),conic-gradient(from 356deg,transparent 75%, var(--colorSecundario),transparent);
  top: 50%;  
  left: 50%;
  translate: -50% -50%;
  z-index: -10;
  padding: 4px;
  border-radius: 4px;
}
.cornerborder::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}

.cornersnake{
  background-color: var(--colorSecundario);
  position: relative;
}
.cornersnake{
  background-color: var(--colorPrincipal);
  position: relative;
}
@property --posi{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --posi2{
  syntax: "<angle>";
  initial-value: 180deg;
  inherits: false;
}
.cornersnake::after,.cornersnake::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--posi),transparent 80%, var(--colorTerciario)),conic-gradient(from var(--posi2),transparent 80%, var(--colorTerciario));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -10;
  padding: 5px;
  border-radius: 6px;
  animation: 5000ms snake linear infinite;
}
.cornersnake::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}
.maquina{
  display: flex;
  justify-content: left;
}
.maquina h2,.maquina p{
  color: var(--colorSecundario);
  font-family: monospace;
  font-size: 1.4rem;
  overflow:hidden ;
  white-space: nowrap;
  border-right: 1px solid;
  animation: escribir 1.8s steps(20) forwards,
  blink 1s step-end infinite;
}

@keyframes snake{
  from{
    --posi:0deg;
    --posi2:180deg
  }to{
    --posi:360deg;
    --posi2:540deg
  }
}
@keyframes escribir{
  from{
    width: 0%;
    color: var(--colorSecundario);
  }to{
    width: 100%;
    color: var(--colorSecundario);
  }
}
@keyframes blink {
  50%{
    border-color: transparent;
  }
}
.cornerglow{
  background-color: var(--colorSecundario);
  position: relative;
  padding: 8px 20px 8px 20px;
  margin: 10px;
}
.cornerglow{
  background-color: var(--colorPrincipal);
  position: relative;
}

.cornerglow::after,.cornerglow::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--posi),var(--colorTerciario)),conic-gradient(from var(--posi2),transparent 80%, var(--colorTerciario));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -10;
  padding: 5px;
  border-radius: 6px;
}
.cornerglow::before{
  filter: blur(0.4rem);
  opacity: 0.5;
}