@font-face {
  font-family: "Geist";
  src: url("https://pham.codes/d/GeistVF.woff2") format("woff2");
}

html, body {
  height: 100%;
}

p {
  font-family: "Geist";
  font-size: 128px;
  margin: 0;
  background-color: white;
  background-image: linear-gradient(0deg, #111 70%, white);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
  --wght-min: 32;
  --wght-max: 240;
}

p > span {
  animation: breath 1.5s alternate cubic-bezier(0.37, 0, 0.63, 1);
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-fill-mode: both;
}

@keyframes breath {
  0% {
    font-variation-settings: "wght" var(--wght-min);
  }
  100% {
    font-variation-settings: "wght" var(--wght-max);
  }
} 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

@property --border-angle-1 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

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

@property --border-angle-3 {
	syntax: "<angle>";
	inherits: true;
	initial-value: 180deg;
}


/* sRGB color. */
:root {
	--bright-blue: rgb(0, 100, 255);
	--bright-green: rgb(0, 255, 0);
	--bright-red: rgb(255, 0, 0);
	--background: black;
	--foreground: white;
	--border-size: 2px;
	--border-radius: 0.75em;
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
	:root {
		--bright-blue: color(display-p3 0 0.2 1);
		--bright-green: color(display-p3 0.4 1 0);
		--bright-red: color(display-p3 1 0 0);
	}
}

@keyframes rotateBackground {
	to { --border-angle-1: 360deg; }
}

@keyframes rotateBackground2 {
	to { --border-angle-2: -270deg; }
}

@keyframes rotateBackground3 {
	to { --border-angle-3: 540deg; }
}

body {
	background: var(--background);
	color: var(--foreground);
	min-height: 100dvh;
	display: grid;
	place-content: center;
	margin: 0;
	font-family: "Aspekta";
}

button {
  --border-angle-1: 0deg;
  --border-angle-2: 90deg;
  --border-angle-3: 180deg;
  color: inherit;
  font-size: calc(0.8rem + 4vmin);
  font-family: inherit;
  border: 0;
  padding: var(--border-size);
  display: flex;
  width: max-content;
  border-radius: var(--border-radius);
  background-color: transparent;
  background-image: conic-gradient(
      from var(--border-angle-1) at 10% 15%,
      transparent,
      var(--bright-blue) 10%,
      transparent 30%,
      transparent
    ),
    conic-gradient(
      from var(--border-angle-2) at 70% 60%,
      transparent,
      var(--bright-green) 10%,
      transparent 60%,
      transparent
    ),
    conic-gradient(
      from var(--border-angle-3) at 50% 20%,
      transparent,
      var(--bright-red) 10%,
      transparent 50%,
      transparent
    );
  animation: 
    rotateBackground 3s linear infinite,
    rotateBackground2 8s linear infinite,
    rotateBackground3 13s linear infinite;

  position: fixed;
 bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}

button div {
	background: var(--background); 
	padding: 1em 1.5em;
	border-radius: calc(var(--border-radius) - var(--border-size));
	color: var(--foreground);
}


@font-face {
	font-family: "Aspekta";
	font-weight: normal;
	src: url("https://assets.codepen.io/240751/Aspekta-300.woff2") format("woff2");
}