body{
	font-size : 10pt;
	font-family : "Courier New",Courier,mono;
	background-color: black;
	color:#ffc0be;
	background-attachment:fixed;
	background-image: url("assets/background.png");
}

a{
	color:#ffffff;
	text-decoration: none;
	font-weight: bold;
	text-shadow: #66aa66 0px 0px 16px;
}
a:hover{
	color:#66aa66;
}

hr{
	border-width: 0px;
	height:8px;
	box-shadow:
		inset 0px 0px 8px black
	;
	border-radius: 100%;
	width: calc(100% - 32px);
}

#main{
	position:absolute;
	top:0px;
	left:50%;
	min-height: 100%;
	transform: translate(-50%, 0%);
	width:512px;
	max-width: 100%;
	text-align: center;
}

#img_header{
	width:100%;
}

#img_pfp{
	max-width: 100% ;
	filter: drop-shadow(2px 2px 8px black);
}

.box{
	margin-bottom:1rem;
	background-color: #111;
	padding-bottom: 1rem;
	position:relative;
	background-image: url("assets/boxbg.png");
	box-shadow:
		0px 0px 4px black,
		inset -1px -1px 4px black,
		inset 1px 1px 4px #333
	;
}

.box:last-of-type{
	border-radius: 0px 0px 16px 16px;
}
.box_header{
	background-image: url("assets/boxheadericon.gif");
	background-repeat: no-repeat;
	padding-left: 32px;
	padding-right: 1rem;
	left:-8px;
	top:-4px;
	position:relative;
	background-color: black;
	min-height: 32px;
	max-width: 94%;
	width: max-content;
	text-align: left;
	display:flex;
	break-after:column;
	align-items: center;
	border-radius: 0px 0px 16px 0px;
	box-shadow:
		0px 0px 8px black,
		inset -1px -1px 4px black,
		inset 1px 1px 4px #333
	;
	margin-bottom: 1rem;
}

@keyframes a9_rule {
	0%{
		background-position:
			0px 0px,
			0px 0px,
			0% 0%,
			0px 0px
		;
	}
	100%{
		background-position:
			0px 500px,
			0px 0px,
			0px 0px,
			0% 500px,
			0px 0px
		;
	}
}

a9_rule{

	animation-name:a9_rule;
	animation-duration: 16s;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	margin-top: .5rem;
	margin-bottom: .5rem;

	position:relative;

	display: block;
	width: calc(100% + 2rem);
	margin-left: -1rem;
	height: var(--overall-height);
	box-shadow: 0px 0px 8px 4px black;
	border-radius:0px var(--overall-height) var(--overall-height) 0px;
	text-shadow: 0px 0px 4px white;
	background-color: black;

	background-blend-mode: multiply, multiply, hard-light, normal, normal;

	

	z-index:1;
	background-size:
		cover,
		cover,
		cover,
		100% calc(var(--overall-height) * 1.32),
		cover
	;

	transform: rotate(var(--rotation));

	--overall-height:2rem;
	--outer-width:calc(var(--overall-height)/1.5);
	--inner-width:calc(var(--outer-width)/2);
	--backing-color:transparent;
	--inner-margin:15%;
	--outer-color:rgb(121, 121, 121);
	--highlight-color:rgb(139, 114, 114);
	--shine-color:rgba(228, 169, 169, 0.5);
	--rotation:0deg;

	background-image:
		url(assets/boxbg.png),
		linear-gradient(
			90deg,
			transparent,
			rgba(0,0,0,0.75)
		),
		repeating-linear-gradient(
			180deg,
			black,
			rgba(0,0,0,0) 10%,
			var(--shine-color) 30%,
			rgba(0,0,0,0),
			rgba(0,0,0,0) 75%,
			black
		),
		repeating-linear-gradient(
			45deg,
			rgba(0,0,0,0),
			var(--highlight-color) 2px,
			var(--outer-color) 4px,
			var(--outer-color) calc(var(--outer-width) - 4px),
			var(--highlight-color) calc(var(--outer-width) - 2px),
			rgba(0,0,0,1) calc(var(--outer-width)),
			rgba(0,0,0,0) calc(var(--outer-width) + var(--inner-width) - 2px)
		),
		linear-gradient(
			180deg,
			var(--backing-color) var(--inner-margin),
			var(--backing-color) var(--inner-margin),
			var(--highlight-color) var(--inner-margin),
			rgb(22, 22, 22) calc(var(--inner-margin) + 3px),
			rgb(59, 59, 59),
			rgb(22, 22, 22) calc(100% - var(--inner-margin) - 3px),
			var(--highlight-color) calc(100% - var(--inner-margin)),
			var(--backing-color) calc(100% - var(--inner-margin))
		)
	;
}
a9_rule::after{
	position: absolute;
	display: block;
	width: calc(var(--overall-height));
	height: calc(var(--overall-height)/2);
	background-color: var(--outer-color);
	right:100%;
	content: "";
	top: calc(var(--overall-height)/4);

	animation-name:a9_rule;
	animation-duration: 16s;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	background-image:
		url(assets/boxbg.png),

		linear-gradient(
			90deg,
			transparent, 
			rgba(0,0,0,.5)
		),

		linear-gradient(
			180deg,
			var(--shine-color) 50%,
			
			rgba(0,0,0,.75)
		)
	;

	clip-path: polygon(
		0% 50%,
		100% 0%,
		100% 100%
	);
}