/*
blue      #a2dffe
pink-ish  #d4cbe5
eggshell  #faf3dd
orange    #ffa69e
grey      #555358
navy      #4e598c
*/

.col1 {
  color: #ff9494;
}

.col2 {
  color: #ffa1e8;
}

.col3 {
  color: #51c2f3;
}

.col4 {
  color: #f1f088;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #faf6ef;
  color: #344249; 
  font-size: 1.2rem;
}

section {
  width: 100%;
  padding: 2rem 3rem;
  box-sizing: border-box;
}

p {
  max-width: 40rem;
}

a {
  text-decoration: none;
  text-decoration-color: #344249;
  color: inherit;
}

section a {
  text-decoration: underline;
  text-decoration-style: dotted;
}

section a:hover {
  text-decoration-style: dashed;
}

h1, h2, h3 {
  margin: 0;
  transition: 200ms all;
  font-family: 'Satoshi-Variable', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-optical-sizing: auto;
}

h1 {
  font-size: 6rem; 
  letter-spacing: -0.068em;
}

#home h1 {
  letter-spacing: -0.15em;
}

#page-title {
  min-height: 60vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#home #page-wrap, #err #page-wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' opacity='23%' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 60vh;
  width: 100%;
}

@property --c {
  syntax: '<angle>';
  inherits: false;
  initial-value: -60deg;
}
@property --d {
  syntax: '<color>';
  inherits: false;
  initial-value: #517fa4;
}
@keyframes errorgrad {
	0% {
		--c: 0deg;
    --d: #517fa4;
	}

  25% {
		--c: 90deg;
	}

  50% {
		--c: 180deg;
    --d: #00000f80;
	}

  75% {
		--c: 270deg;
	}

  100% {
		--c: 360deg;
    --d:#517fa4;
	}
}
#err {
  min-height: 60vh;
  width: 100%;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: linear-gradient(var(--c), #243949 0%, var(--d) 100%);
  animation: errorgrad 90s linear 0s infinite normal forwards;
}


@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 180deg;
}
@property --b {
  syntax: '<color>';
  inherits: false;
  initial-value: #00c8ff;
}
@keyframes gradient {
	0% {
		--a: 270deg;
    --b: #00c8ff;
	}

  25% {
		--a: 360deg;
	}

  50% {
		--a: 450deg;
    --b: #00000f80;
	}

  75% {
		--a: 540deg;
	}

  100% {
		--a: 630deg;
    --b:#00c8ff;
	}
}
#home {
  /* https://codioful.com/ for gradients */  
  background: linear-gradient(var(--a), rgba(211, 255, 215, 180) 0%, rgba(0, 0, 0, 180) 100%), radial-gradient(90% 100% at 50% 0%, rgba(200, 200, 200, 180) 0%, rgba(22, 0, 45, 180) 100%), radial-gradient(100% 100% at 80% 0%, rgba(250, 255, 0, 180) 0%, rgba(36, 0, 0, 180) 100%), radial-gradient(150% 210% at 100% 0%, rgba(112, 255, 0, 180) 0%, rgba(20, 175, 125, 180) 0%, rgb(0, 10, 255, 180) 100%), radial-gradient(100% 100% at 100% 30%, rgba(255, 77, 0, 180) 0%, var(--b) 100%), linear-gradient(var(--a), rgba(255, 0, 0, 180) 0%, rgba(120, 86, 255, 180) 100%);
  background-blend-mode: overlay, soft-light, difference, difference, difference, normal;
  animation: gradient 90s linear 0s infinite normal forwards;
  /* transition: --a 3s */
}

@keyframes focus {
	10% {
		font-size: 6rem;
    filter:blur(0px);
	}

	60% {
		font-size: 4rem;
    filter: blur(7px);
	}

  80% {
		font-size: 6rem;
    filter:blur(0px);
	}
}
#home span {
  animation: focus 6s ease 0s infinite normal;
  animation-delay: calc(var(--animation-order) * 300ms);
}

@media only screen and (min-width: 1300px) {
  #page-title {
    min-height: 100vh;
  }
}

@media (prefers-color-scheme: dark) {
  body,
  html {
    background-color: #252038;
    color: #faf6ef; 
  }
}