/* Site-wide stylizations */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  animation-fill-mode: forwards;
}

/* Site-wide resources */

@font-face {
  font-family: "CodeNewRoman";
  src: url("../f/CodeNewRoman.otf");
}

@font-face {
  font-family: "Visitor";
  src: url("../f/visitor1.ttf");
}

/* Site-wide animations */

@keyframes fade
{
  0% { opacity: 0%; }
  100% { opacity:100%; }
}
@keyframes hide
{
 0%{ display:initial }
 100%
 {
	display: none;
	position: absolute;
	top: 0; left: 0; bottom: 100%; right: 100%;
	width: 0 !important; height: 0 !important;
	overflow: hidden !important;
	visibility: hidden;
	opacity: 0;
 }
}

/* Body */

body
{
	background-color: #000;
	font-family: CodeNewRoman;
	color: #fff;
}
.hidden
{
	display: none;
}

.grid
{
	display: grid;
}

#global-title
{
	display: block;
	position: absolute;
	right: 100px;
	top: 50%;
	transform: translateY(-50%);
	text-align: right;
}

/* Tech borders */

.page-tech-border
{
  margin-top: 1rem;
  background: #000;
  border: 1px solid white;
}
.page-tech-border .wrapper
{
 padding: 25px 20px 35px 15px;
}
.page-tech-border a
{
	color: #c7d
}
.page-tech-border a:focus,
.page-tech-border a:active
{
	color: #ccc
}
.page-tech-border a:visited
{
	color: #579
}
.page-tech-border ul
{
	margin-left: 1rem;
}

#main
{
	display:none;
	opacity: 0;
}
#main.show
{
	display: block;
	width: 100%;
	min-height: 100dvh;
	opacity: 1;
}

/* Sitewide background art, not applied to the Updates page */
body.website
{
	width: 100%;
	min-height: 100dvh;
    background: 
    /* Mini Stripes */ repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 4px,
          rgba(255, 255, 255, 0.3) 4px,
          rgba(255, 255, 255, 0.3) 8px
        )
        90px 26px/240px 8px no-repeat,
      /* Triple Line Verticals */
        linear-gradient(to right, transparent 29px, #999 30px) 20vw 0/30px 100%
        repeat-y,
      linear-gradient(to right, transparent 29px, #999 30px) calc(20vw - 12px) 0/32px
        100% repeat-y,
      linear-gradient(to right, transparent 29px, #444 30px) 80vw 0/30px 100%
        repeat-y,
      linear-gradient(to right, transparent 29px, #444 30px) calc(80vw - 12px) 0/32px
        100% repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) 95vw 0/30px 100%
        repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) calc(95vw - 12px) 0/32px
        100% repeat-y,
      /* Single Line Across */
        linear-gradient(to bottom, transparent 29px, #999 30px) 0 180px/100%
        30px no-repeat,
      linear-gradient(to bottom, transparent 29px, #999 30px) 0 480px/100% 30px
        no-repeat,
      /* Gradient Box */
        linear-gradient(to bottom, rgba(200, 200, 200, 0.05) 60%, transparent)
        60px 0/240px 50dvh no-repeat,
      /* Grid 1 */ linear-gradient(to right, transparent 0 100%) 0 100dvh/100dvw
        100dvh no-repeat,
      linear-gradient(to right, transparent 29px, #011410 1px) 0 0/30px 100%
        repeat,
      /* Grid 2 */ linear-gradient(to bottom, transparent 29px, #011410 1px) 0 0/100%
        30px repeat,
      url("../i/bg-metalheart-large.png") 0 0 / cover no-repeat, #000;
    background-attachment: fixed;
}
.site-container {
  margin: 0 auto;
  width: 100%;
}
.menu-box {
  position: relative;
  padding: 1rem;
  height: 90px;
  background-image: linear-gradient(to left, transparent, #000 90%),
    radial-gradient(#aaa 6%, transparent 11%);
  background-size: 100% 100%, 10px 10px;
  background-position: 0px 0px;
}
#topbar-logo {
  position: absolute;
  width: 100px;
  height: 100px;
  right: 0;
  bottom: 0;
}
#topbar-logo object {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}
@keyframes spin {
  0% {
    transform: translateX(-50%) rotateY(0deg);
  }
  100% {
    transform: translateX(-50%) rotateY(360deg);
  }
}
#topbar-logo object:first-child {
  animation: spin 2s linear infinite;
}
.deco-separator {
  margin: 0.5rem 0;
  border: 1px solid #444;
  height: 1rem;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    #111 10px,
    #111 20px
  );
}
.logotext span
{
	color: #8c8c8c;
}

.general-page-title {
  padding: 1rem;
  margin: auto;
  width: 80%;
  position: relative;
  margin-top: 2rem;
  border: 1px solid #fff;
  clip-path: polygon(
    0 0,
    25px 0,
    26px 1px,
    calc(100% - 26px) 1px,
    calc(100% - 25px) 0,
    100% 0,
    100% 25px,
    calc(100% - 1px) 26px,
    calc(100% - 1px) calc(100% - 26px),
    100% calc(100% - 25px),
    100% 100%,
    calc(100% - 25px) 100%,
    calc(100% - 26px) calc(100% - 1px),
    26px calc(100% - 1px),
    25px 100%,
    0 100%,
    0 calc(100% - 25px),
    1px calc(100% - 26px),
    1px 26px,
    0 25px
  );
  background: linear-gradient(
      to bottom,
      transparent 29px,
      #d5f 30px,
      #c8d
    )
    0 70px/100% 35px no-repeat;
  background-color: rgba(200, 0, 254, 0.1);
}
.general-page-title .flex-container {
  display: flex;
  align-items: center;
}
.general-page-title h1 {
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  letter-spacing: 0.1em; /* Adjust as needed */
  z-index: 1;
}
h2
{
	margin: 1rem;
}
h3
{
	margin: 0.5rem 1rem;
}



/* The mouse lines effect */

#mousexU,
#mousexD,
#mouseyL,
#mouseyR
{
  position: absolute;
}

@media screen and (min-width: 800px) and (orientation: landscape) {
  .site-container {
    width: 80vw;
  }
  	#mousexU,
	#mousexD
	{
		width: 1px;
	}
	#mousexU { top: 0; background: linear-gradient( to bottom, #222, transparent, #222 ); }
	#mousexD { bottom: 0; background: linear-gradient( to top, #222, transparent, #222 ); }
	
	#mouseyL,
	#mouseyR
	{
		height: 1px;
	}
	#mouseyL { left: 0; background: linear-gradient( to right, #222 0, transparent 50%, #222 100% ); }
	#mouseyR { right: 0; background: linear-gradient( to left, #222 0, transparent 50%, #222 100% ); }

	#global-title
	{
		right: auto;
		top: auto;
		bottom: 1rem;
		transform: none;
		text-align: right;
	}
}


@media screen and (min-width: 1250px) and (orientation: landscape) {
  .site-container {
    width: max(1000px, 50vw);
  }
}