:root {
	/* --bg-anim-speed: 20s; */
	--bg-position: 0px;
}

@font-face {
	font-family: Honk;
	src: url('fonts/Honk/Honk.ttf');
}

@font-face {
	font-family: Nossifer;
	src: url('fonts/Nosifer/Nosifer-Regular.ttf');
}

@font-face {
	font-family: Rubik_Burned;
	src: url('fonts/Rubik_Burned/RubikBurned-Regular.ttf');
}

@font-face {
	font-family: Rubik_Dirt;
	src: url('fonts/Rubik_Dirt/RubikDirt-Regular.ttf');
}

.main-column {
	margin-top: 50px;
	margin-left: auto;
  	margin-right: auto;
	max-width: 1100px;
}

.content {
	justify-content: center;
 	align-items: center;
	position: relative;
	overflow: hidden;
	z-index: 10;
}

.blog-box {
	border: 7px solid  #febaff;
	background-color: rgb(0, 0, 0, 1);
	color: white;
	backdrop-filter: blur(10px);
	padding: 30px;
	padding-left: 50px;
	z-index: 10;
	position: relative;
}

.blog-box::before {
	position:absolute; 
	z-index:15;
	background:rgb(0, 0, 0);
	top:-20px;
	left:-25px;
	width:50px;
	height:50px	;
	border:7px solid #febaff;
	border-radius:999px;
	content: "";
}

.blog-box::after {
	position:absolute; 
	z-index:15;
	background:rgb(0, 0, 0);
	top:	-20px;
	right:-25px;
	width:50px;
	height:50px	;
	border:7px solid #febaff;
	border-radius:999px;
	content: "";
}

.buttons-box {
	margin-top: 50px;
	display: flex;
	align-items: center;
	border: 7px solid  #febaff;
	background-color: rgb(0, 0, 0, 1);
	color: white;
	backdrop-filter: blur(10px);
	padding: 30px;
	padding-left: 50px;
	z-index: 10;
	position: relative;
}

.buttons-box > a{
	flex: 1;
	text-align: center;
	font-size: 20px;
}

.buttons-box::before {
	position:absolute; 
	z-index:15;
	background:rgb(0, 0, 0);
	bottom:-20px;
	left:-25px;
	width:50px;
	height:50px	;
	border:7px solid #febaff;
	border-radius:999px;
	content: "";
}

.buttons-box::after {
	position:absolute; 
	z-index:15;
	background:rgb(0, 0, 0);
	bottom:	-20px;
	right:-25px;
	width:50px;
	height:50px	;
	border:7px solid #febaff;
	border-radius:999px;
	content: "";
}

h1 {
	font-family: Rubik_Dirt;
	font-size: 40px;
	font-weight: 100;	
}

h2 {
	font-family: Nosifer;
}

body {
	color: rgb(247, 230, 255);
	background-color: rgb(0, 7, 0);
	overflow-x: hidden;
	/* background: 
	linear-gradient(
          rgba(0, 0, 100, 0.5), 
          rgba(0, 0, 100, 0.5)
        ),
	
	url('web-pattern-4.png'); */
	background-size: 800px; /* Cover entire pseudo-element area */
	background-position: -50px -50px;
}

a {
	color: white;
}

.main-footer {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.stamps {
	margin-top: 100px;
	max-width: 650px;
}

.ascii-title {
	font-family: 'monospace';
	line-height: 14px;
	font-size: 14px;
	display: inline-block;
	margin-top: 100px;
	margin-bottom: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-shadow: 0px 0px 20px #222, 0px 0px 20px #222;
}

.star {
	position: absolute;
	width: 56px;
	color: #febaff;
	image-rendering: pixelated;
	filter: drop-shadow(0px 0px 10px #222) drop-shadow(0px 0px 10px #222);
}

.star.one {
	left:83px;
	top:49px;
}

.star.two {
	left:221px;
	top:90px;
}

.star.three {
	left:145px;
	top:205px;
}

.star.four {
	left:269px;
	top:255px;
}

#foreground {
	position: fixed;
	z-index: -5;
	opacity: 50%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('foreground.png');
	background-repeat: repeat;
	background-size: calc(256px * 3);
	image-rendering: pixelated;
	background-position: calc(2* var(--bg-position)) calc(var(--bg-position));
	/* animation-timeline: scroll(root block);
	animation: bgMove var(--bg-anim-speed) infinite linear; */
}

#background {
	position: fixed;
	z-index: -5;
	opacity: 25%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('foreground.png');
	background-repeat: repeat;
	background-size: calc(256px * 2);
	image-rendering: pixelated;
	background-position: calc(var(--bg-position)) calc(0.5 * var(--bg-position));
	/* animation-timeline: scroll(root block);
	animation: bgMove var(--bg-anim-speed) infinite linear; */
}