@font-face {
	font-family: 'Agave';
	src: url('/Agave-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Agave';
	src: url('/Agave-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	font-family: "Agave";
}


body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

header {
	margin: 0px;
	margin-bottom: 32px;
	padding: 32px;
	background-color: rgb(from red r g b / 5%);
	animation: HEADER_ANIM_BLINK 2s infinite;

	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 32px;
}

.HEADER-RIGHT_SIDE {
	display: block;
}

.REGALIA-BLOCK {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.REGALIA {
	background: linear-gradient(to right, cyan, magenta, cyan, yellow);
  
	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent; 
	color: transparent;

	animation: REGALIA_BLINK 1s infinite;


	display: inline-block;
	font-size: 16px;
}

nav {
    display: flex;
    gap: 16px;
}

.NAV-LINK {
}

.BOLD {
    font-weight: bold;
}

.BLINK {
    color: cyan;
    animation: ANIM_BLINK 1s infinite;
}

.MAIN {
    	margin: 32px;
	padding: 32px;
	border: 8px solid black;
	width: 80%;
}

.NAME {
	font-size: 32px;
	padding: 16px;
}

@keyframes ANIM_BLINK {
	50% {
		color: magenta;
	}
}

@keyframes HEADER_ANIM_BLINK {
	50% {
		background-color: rgb(from cyan r g b / 5%);
	}
}

@keyframes REGALIA_BLINK {
	25% {
		background: linear-gradient(to right, yellow, cyan, magenta, cyan);
		-webkit-background-clip: text;
		background-clip: text;

		-webkit-text-fill-color: transparent; 
		color: transparent;
	}
	50% {
		background: linear-gradient(to right, cyan, yellow, cyan, magenta);
		-webkit-background-clip: text;
		background-clip: text;

		-webkit-text-fill-color: transparent; 
		color: transparent;
	}
	75% {
		background: linear-gradient(to right, magenta, cyan, yellow, cyan);
		-webkit-background-clip: text;
		background-clip: text;

		-webkit-text-fill-color: transparent; 
		color: transparent;
	}
}


.PAGE-SUMMARY {
	font-size: 32px;
}

.BLOG-POST {
	margin: 16px;
	padding: 8px;
	border: 4px solid cyan;
}

.BLOG-POST h2 {
	margin: 0;
	padding: 0;
}

.BLOG-DATE {
	color: cyan;
	font-size: 16px;
}

.BLOG-POST p {
	padding: 8px 0px;
}

.BLOG-POST .qoute {
	padding: 16px;
	color: blue;
}