@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap');


:root {
	--theme-link-color: #57d1ee;
	--theme-darkpurple: rgba(68,36,73,0.9);

	--theme-text-color: #fff;
	--theme-button-color: #fff;
	--theme-background: radial-gradient(circle max(100vw, 100vh) at 97% 95%, rgba(253,70,41,0.9) 0%, rgba(201,1,48,0.9) 26%, rgba(68,36,73,0.9) 100%), url("noise.svg");

	--theme-main-font: 'Noto Sans Mono', monospace;
	--theme-main-font-size: 1em;

	--theme-transition: 0.1s;
}

html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	overflow-x: hidden;
}

a {
	outline: 0;
}

a:not([class]) {
	color: var(--theme-link-color);
	text-decoration: none;
	font-weight: 700;
	mix-blend-mode: difference;
	transition: var(--theme-transition);
}

a:not([class]):hover {
	filter: brightness(1.2);
}

body {
	background: var(--theme-darkpurple);
	color: var(--theme-text-color);
	font-family: var(--theme-main-font);
	font-size: var(--theme-main-font-size);
	margin: 0;
}

body::after {
	content: "";
  position: fixed;
  z-index: -100;
  margin: 0;
  top: 0;
  left: 0;
  width: max(100vw, 100vh);
  height: max(100vw, 100vh);
	background: var(--theme-background);
	background-attachment: fixed;
	--animation-duration: 90s;
	animation: background_scale var(--animation-duration) ease infinite;
	animation-delay: calc(var(--animation-duration) * -0.37);
}

@keyframes background_scale {
	0% {
		transform: scale(2.1) rotate(60deg);
	}

	12% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.9) rotate(-30deg);
	}

	37% {
		transform: scale(1.4) rotate(-180deg);
	}

	50% {
		transform: scale(2.1) rotate(-190deg);
	}

	62% {
		transform: scale(1.3) rotate(-280deg);
	}

	75% {
		transform: scale(1.8) rotate(-300deg);
	}

	100% {
		transform: scale(2.1) rotate(-300deg);
	}
}

h1 {
	font-size: clamp(1em, 4vw, 1.8em);
	margin: 0;
	margin-bottom: 0.8rem;
	word-wrap: break-word;
	display: block;
}

p {
	font-size: clamp(1em, 2vw, 1.2em);
	margin: 0.4em 0;
	display: block;
}

#greeting {
	margin: max(1.5em, 6vw) max(1em, 5vw);
}

#greeting h1 {
	font-size: clamp(2em, 4.5vw, 10em);
	font-weight: 400;
}

.button {
	mix-blend-mode: initial;
	border-radius: 0.15em;
	padding: 0.4em;
	text-decoration: none;
	font-size: clamp(1em, 2vw, 1.6em);
	transition: var(--theme-transition);
	margin: 0 0.5rem 0.8rem 0;
	display: inline-block;
	transform: scale(1);
	transform-origin: center center;
}

.button_parent {
	display: inline-flex;
}


.button:nth-child(odd), .button:nth-child(even):hover {
	background: #000;
	color: #fff;
	mix-blend-mode: normal;
}

.button:nth-child(odd):hover, .button:nth-child(even) {
	mix-blend-mode: screen;
	color: #000;
	background: #fff;
}

.button:hover {
 transform: scale(1.2); /* Change the value to make the button larger or smaller */
}