body {
    background-color: #030102;
}
.titlesecu {
    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
}
element.style {
    color-scheme: dark;
}
.cardbganim{
        --border-radius: 12px;
        --border-size: 1px;
        --padding: 1px;
        --border-bg: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);
        position: relative;
        overflow: hidden;
        font-size: 2rem;
        padding: calc(var(--padding) + var(--border-size));
        border-radius: var(--border-radius);
        display: inline-block;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        perspective: 1000;
        transform: translateZ(0);
}
.main{
    z-index: 5;
}

.back{
    background-color: #030102;
    z-index: 2;
    color: #A7A7AA;
}
#retrobg {
    z-index: 0;
	position: relative;
	overflow: hidden;
	height: 100%;
	color: #a3c;
	background-color: #000;
}
#retrobg-ground {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 45%;
	bottom: 0;
	/* border-top: 2px solid #bf578c; */
	background-color: #000;
}
#retrobg-groundShadow {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient( #000 0%, transparent );
}
#retrobg-linesWrap {
	height: 100%;
	perspective: 1000px;
	perspective-origin: center top;
}
#retrobg-lines {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: top center;
	animation: 3s linear infinite retrobg-lines-anim;
}
.retrobg-shutdown #retrobg-lines {
	animation-duration: 5s;
}
@keyframes retrobg-lines-anim {
	from { transform: rotateX( 84deg ) translateY( 0 ); }
	to { transform: rotateX( 84deg ) translateY( 100px ); }
}
#retrobg-hlines,
#retrobg-vlines {
	position: absolute;
	left: calc( ( 900% - 100% ) / -2 );
	width: 900%;
	height: 500%;
}
#retrobg-vlines {
	display: flex;
	justify-content: center;
}
.retrobg-hline,
.retrobg-vline {
	width: 100%;
	height: 100%;
	background-color: #1B1A1B;
}
.retrobg-hline { height: 0.5px; }
.retrobg-vline { width: 0.5px; }
.retrobg-hline + .retrobg-hline { margin-top: 98px; }
.retrobg-vline + .retrobg-vline { margin-left: 68px; }

@keyframes glower {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}
.contour {
  position: relative;
}
.contour::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #e8f74d, #ff6600d9, #00ff66, #13ff13, #ad27ad, #bd2681, #6512b9, #ff3300de, #5aabde);
  background-size: 400%;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  z-index: -1;
  animation: glower 20s linear infinite;
}