/*// Glow Border Animation //*/

.animated-border-box, .animated-border-box-glow{
  max-height: 200px;
  max-width: 1120px;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden; 
  z-index: 0;
  /* Border Radius */
	border-radius: 10px;
}

.animated-border-box-glow{
  overflow: hidden;
  /* Glow Blur */
  filter: blur(20px);
}

.animated-border-box:before, .animated-border-box-glow:before {
  content: '';
  z-index: -2;
  text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
  position: absolute;
	width: 99999px;
	height: 99999px;
	background-repeat: no-repeat;
	background-position: 0 0;
  /*border color, change middle color*/
	background-image: conic-gradient(rgba(0,0,0,0), #1976ed, rgba(0,0,0,0) 25%);
  /* change speed here */
	animation: rotate 4s linear infinite;
}

#bronze:before{
  background-image: conic-gradient(rgba(0,0,0,0), #ff5733, rgba(0,0,0,0) 25%);
}
#green:before{
  background-image: conic-gradient(rgba(0,0,0,0), #00a86b, rgba(0,0,0,0) 25%);
}
#gold:before{
  background-image: conic-gradient(rgba(0,0,0,0), #d4af37, rgba(0,0,0,0) 25%);
}
#garnet:before{
  background-image: conic-gradient(rgba(0,0,0,0), #733635, rgba(0,0,0,0) 25%);
}
#brick:before{
  background-image: conic-gradient(rgba(0,0,0,0), #DC143C, rgba(0,0,0,0) 25%);
}
.animated-border-box:after {
	content: '';
	position: absolute;
	z-index: -1;
  /* border width */
	left: 5px;
	top: 5px;
  /* double the px from the border width left */
	width: calc(100% - 10px);
	height: calc(100% - 10px);
  /*bg color*/
	background: #0D0D0F;
  /*box border radius*/
	border-radius: 7px;
}

@keyframes rotate {
	100% {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}

/*// Border Animation END//*/



/*// Ignore This //*/
body {
  margin: 0px;
}

.center-box{
  padding-top: 250px;
  color:#BCBCBC;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}