@import url("https://fonts.googleapis.com/css2?family=Nabla:EDPT,EHLT@30..200,24&display=swap");
/*
body {
	margin: 0;
	height: 100vh;
	display: grid;
	place-content: center;
	background-color: #000;
}

h1 {
	font-size: 12vw;
	font-family: Nabla;
}
*/

.bdy {
       background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
    animation: gradient 15s ease infinite;
    /*background-size: 400% 400%;*/
    /*background-attachment: fixed;*/
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}

@font-palette-values --Nabla {
	font-family: Nabla;
	base-palette: 2;
}

.dspan {
	font-size: 12vw;
	font-family: Nabla;
	animation: depth .5s ease-in-out alternate infinite;
	position: relative;
	display: inline-block;
	font-variation-settings: "EDPT" 30;
	font-palette: --Nabla;
	@for $i from 1 through 12 {
		&:nth-child(#{$i}) {
			animation-delay: $i * 0.1s;
		}
	}
}

@keyframes depth {
	0% {
		transform: translatex(0) translatey(0);
	}
	100% {
		font-variation-settings: "EDPT" 200;
		transform: translatex(0.15em) translatey(0.1em);
	}
}

/* Snythetic Text */

.cametal {background-image: url("https://images.unsplash.com/photo-1612058237353-6213b412a1c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;
  animation-name: metal;
  animation-duration: 10s;
  animation-iteration-count: infinite;}

.caglass {background-image: url("https://plus.unsplash.com/premium_photo-1675526090845-a8b982cabae6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;    animation-name: glass;
  animation-duration: 10s;
  animation-iteration-count: infinite;}

.caplastic {background: url("https://images.unsplash.com/photo-1605707159327-f43132f89a5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;
text-align: center;   animation-name: metal;
  animation-duration: 10s;
  animation-iteration-count: infinite;}


.ptext {margin: 0px; color: transparent;
/* font-size: 100px; */
 font-family: "Open Sans", sans-serif;   font-weight: bold;
	text-shadow: 0 4px 4px rgba(0, 0, 0, .25);text-transform: uppercase;
text-align: center;} 

@keyframes metal {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 200px;
  }
    100% {
    background-position: 0 0;
  }
}

@keyframes glass {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -200px;
  }
    100% {
    background-position: 0 0;
  }
}

@keyframes plastic {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 200px;
  }
    100% {
    background-position: 0 0;
  }
}

/* Color bordrer */

.caborder {
	/* font-size: 24px; */
	border:10px solid black;
	padding: 2rem 1rem;
	min-height: 3em;
	/* resize: both; */
	/* background: #ffd73e33; */
	border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
  }

  /* razer border */
  @import url("https://fonts.googleapis.com/css?family=Raleway:400");
  @property --angle {
	syntax: '<angle>';
	initial-value: 90deg;
	inherits: true;
  }
  
  @property --gradX {
	syntax: '<percentage>';
	initial-value: 50%;
	inherits: true;
  }
  
  @property --gradY {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: true;
  }
  :root {
	--d: 2500ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: rgb(0, 61, 5);
	--c2: rgba(142, 255, 170, 0.1);
  }
  .cabox {
	/* font-size: 3vw; */
	/* margin: max(1rem, 3vw); */
	border: 0.35rem solid;
	/* padding: 3vw; */
	border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	animation: borderRotate var(--d) linear infinite forwards;
  }
  
  /* .box:nth-child(2) {
	border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
	animation: borderRadial var(--d) linear infinite forwards;
  } */
  
  @keyframes borderRotate {
	100% {
	  --angle: 420deg;
	}
  }
  
  @keyframes borderRadial {
	20% {
	  --gradX: 100%;
	  --gradY: 50%;
	}
	40% {
	  --gradX: 100%;
	  --gradY: 100%;
	}
	60% {
	  --gradX: 50%;
	  --gradY: 100%;
	}
	80% {
	  --gradX: 0%;
	  --gradY: 50%;
	}
	100% {
	  --gradX: 50%;
	  --gradY: 0%;
	}
  }  

/* mbox border */
.border-animation {
	--border-width: 0.1em;
	--animation-speed: 0.5s;
	--color: #ffffff;
	color: var(--color);
	position: relative;
	display: inline-block;
	font-size: 4em;
	line-height: 1em;
	transform: scale(1, 0.8);
	border: var(--border-width) solid transparent;
	
	.border-animation__inner {
	  position: relative;
	  display: inline-block;
	  width: 100%;
	  font-family: 'Six Caps', sans-serif;
	  font-weight: 300;
	  text-transform: uppercase;
	  letter-spacing: 0.05em;
	  cursor: pointer;
	  padding: 0.2em;
	  // background: rgba(50, 50, 50, 0.5);
	  background: #333;
	  z-index: 1;
	  border: solid var(--border-width) transparent;
	}
	
	&:before,
	&:after {
	  content: '';
	  position: absolute;
	  background: var(--color);
	}
	
	&:focus:before,
	&:hover:before {
	  animation: beforeBorders var(--animation-speed) forwards ease-in-out;
	}
  
	&:focus:after,
	&:hover:after {
	  animation: afterBorders var(--animation-speed) forwards ease-in-out;
	}
	
	&:focus,
	&:hover {
	  animation: borderColors var(--animation-speed) steps(1) forwards;
	  outline: none;
  
	  .border-animation__inner {
		animation: background calc(var(--animation-speed) / 5 * 3) forwards ease-in-out;
		animation-delay: calc(var(--animation-speed) / 5 * 2);
	  }
	}
  }
  
  @keyframes beforeBorders {
	0% {
	  top: calc(var(--border-width) * -1);
	  left: 50%;
	  bottom: auto;
	  right: auto;
	  width: 0;
	  height: var(--border-width);
	}
	33% {    
	  top: calc(var(--border-width) * -1);
	  left: calc(var(--border-width) * -1);
	  bottom: auto;
	  right: auto;
	  width: calc(var(--border-width) + 50%);
	  height: var(--border-width);
	}
	66% {
	  top: calc(var(--border-width) * -1);
	  left: calc(var(--border-width) * -1);
	  bottom: auto;
	  right: auto;
	  width: var(--border-width);
	  height: calc((var(--border-width) * 2) + 100%);
	}
	100% {
	  top: auto;
	  left: calc(var(--border-width) * -1);
	  bottom: calc(var(--border-width) * -1);
	  right: auto;
	  width: calc(var(--border-width) + 50%);
	  height: calc((var(--border-width) * 2) + 100%);
	}
  }
  
  @keyframes afterBorders {
	0% {
	  top: calc(var(--border-width) * -1);
	  left: auto;
	  bottom: auto;
	  right: 50%;
	  width: 0;
	  height: var(--border-width);
	}
	33% {    
	  top: calc(var(--border-width) * -1);
	  left: auto;
	  bottom: auto;
	  right: calc(var(--border-width) * -1);
	  width: calc(var(--border-width) + 50%);
	  height: var(--border-width);
	}
	66% {
	  top: calc(var(--border-width) * -1);
	  left: auto;
	  bottom: auto;
	  right: calc(var(--border-width) * -1);
	  width: var(--border-width);
	  height: calc((var(--border-width) * 2) + 100%);
	}
	100% {
	  top: auto;
	  left: auto;
	  bottom: calc(var(--border-width) * -1);
	  right: calc(var(--border-width) * -1);
	  width: calc(var(--border-width) + 50%);
	  height: calc((var(--border-width) * 2) + 100%);
	}
  }
  
  @keyframes borderColors {
	0% {
	  border-top-color: transparent;
	  border-right-color: transparent;
	  border-bottom-color: transparent;
	  border-left-color: transparent;
	}
	33% {
	  border-top-color: var(--color);
	  border-right-color: transparent;
	  border-bottom-color: transparent;
	  border-left-color: transparent;
  
	}
	66% {
	  border-top-color: var(--color);
	  border-right-color: var(--color);
	  border-bottom-color: transparent;
	  border-left-color: var(--color);
	}
	100% {
	  border-top-color: var(--color);
	  border-right-color: var(--color);
	  border-bottom-color: var(--color);
	  border-left-color: var(--color);
	}
  }
  
  @keyframes background {
	to {
	  background: #555;
	  text-shadow: 0 0.1em 0.1em #111;
	}
  }
  
  @media (min-width: 850px) {
	body {
	  justify-content: center;
	}
  }
  
  @media (min-width: 1200px) {
	.border-animation {
	  font-size: 6em;
	  line-height: 1em;    
	}
  }