/* 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;
}

.centered-block
{
	display: block;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate( -50%, -50% );
}

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

/* Tech borders */

.tech-border
{
  clip-path: polygon(0 0, 100% 0px, 100% calc( 100% - 30px ), calc( 100% - 30px ) 100%, 0 100%, 0 50%, 10px calc( 50% - 10px ), 10px calc( 25% + 10px ), 0 25% );
}
.tech-border > div
{
  clip-path: polygon(0 0, 100% 0px, 100% calc( 100% - 29px ), calc( 100% - 29px ) 100%, 0 100%, 0 50%, 10px calc( 50% - 10px ), 10px calc( 25% + 8px ), 0 calc( 25% - 2px ) );
}
.page-tech-border
{
  margin-top: 2rem;
  padding: 2px;
  background: #2ec972;
  clip-path: polygon( 0 15px, 2% 15px, calc( 2% + 15px ) 0, 30% 0, calc( 30% + 15px ) 15px, calc( 100% - 15px ) 15px, 100% 30px,
  100% 100%, 15px 100%, 0 calc( 100% - 15px ) )
}
.page-tech-border .wrapper
{
  clip-path: polygon( 0 15px, 2% 15px, calc( 2% + 15px ) 0, calc( 30% - 5px ) 0, calc( 30% + 10px ) 15px, calc( 100% - 15px ) 15px, 100% 30px,
  100% 100%, 15px 100%, 0 calc( 100% - 15px ) );
  
  background: repeating-linear-gradient( -45deg, transparent 4px, #055 0, #055 6px, transparent 0, transparent 9px ),
    linear-gradient( rgba( 0, 0, 0, 0.5 ) 1px, rgba( 0, 200, 200, 0.1 ) 2px ), linear-gradient( to right, transparent 9px, #033 ), linear-gradient( #011 9px, #022 );
  background-size: 296px 7px, 100% 2px, 10px 10px, 10px 10px;
  background-position: 99.5% calc( 100% - 3px ), 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, repeat;
 padding: 25px 20px 35px 15px;
}
.page-tech-border a
{
	color: #597
}
.page-tech-border a:focus,
.page-tech-border a:active
{
	color: #ccc
}
.page-tech-border a:visited
{
	color: #579
}

#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 {
    background-color: rgba(11, 127, 84, 0.1);
    width: 90%;
    padding: 1rem;
    height: auto;
  margin: auto;
  width: 80%;
  position: relative;
  margin-top: 2rem;
  border: 1px solid #0b7f54;
  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,
      #0b7f54 30px,
      #0b7f54
    )
    0 70px/100% 35px no-repeat;
  background-color: rgba(11, 127, 84, 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;
}

.t3d-container {
  display: inline-block;
  position: relative;
  margin-right: 1rem;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 0;
  background: linear-gradient(
      transparent 50%,
      #0b7f54 0,
      transparent calc(50% + 2px)
    ),
    linear-gradient(
      to right,
      transparent 50%,
      #0b7f54 0,
      transparent calc(50% + 2px)
    );
  background-color: rgba(92, 224, 193, 0.1);
}
@keyframes targeting {
  0% {
    border: 1px solid #17b26a;
    opacity: 1;
    height: 15px;
    width: 15px;
    transform: translateX(-50%) translateY(-50%) rotateZ(-20deg);
  }
  100% {
    height: 120px;
    width: 120px;
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
}
.t3d-container .t3d {
  border: 1px solid #17b26a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  animation: targeting 1s linear infinite;
}
.t3d-container .t3d::before {
  transform: translateX(-50%) translateY(-50%) rotateZ(-45deg);
}
.t3d-container .t3d::after,
.t3d-container .t3d::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 1px;
  transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
  background: linear-gradient(
    to right,
    #17b26a 12%,
    transparent 13%,
    transparent 88%,
    #17b26a 89%
  );
}
.t3d-container div:nth-child(1) {
  animation-delay: 0s;
}
.t3d-container div:nth-child(2) {
  animation-delay: 0.25s;
}
.t3d-container div:nth-child(3) {
  animation-delay: 0.5s;
}
.t3d-container div:nth-child(4) {
  animation-delay: 0.75s;
}

.plus {
  position: absolute;
  right: 2%;
  width: 180px;
  height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><line x1='0.5' y1='0.5' x2='5.5' y2='0.5' style='stroke:rgb(150,150,150);stroke-width:1'/><line x1='29.5' y1='0.5' x2='25.5' y2='0.5' style='stroke:rgb(150,150,150);stroke-width:1'/><line x1='0.5' y1='0.5' x2='0.5' y2='5.5' style='stroke:rgb(150,150,150);stroke-width:1'/><line x1='0.5' y1='29.5' x2='0.5' y2='25.5' style='stroke:rgb(150,150,150);stroke-width:1'/></svg>");
  background-position: 8px 15px;
}


/* 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);
  }
  .content-text {
    height: 350px;
  }
}