/* Grid imagery */

@keyframes large-blinkbox-end {
  0% {
    background-image: url("../i/updates-large-background.png");
    background-size: cover;
  }
  100% {
    background-image: url("../i/updates-large-background.png");
    background-size: cover;
    border-color: transparent;
  }
}
@keyframes wide-blinkbox-end {
  0% {
    background-image: url("../i/logo-mini-trans.png");
    background-size: contain;
    background-position: center;
  }
  100% {
    background-image: url("../i/logo-mini-trans.png");
    background-size: contain;
    background-position: center;
    border-color: transparent;
  }
}
@keyframes tall-blinkbox-end {
  0% {
    background-image: url("../i/updates-tall-background.png");
    background-size: contain;
    background-position: center;
  }
  100% {
    background-image: url("../i/updates-tall-background.png");
    background-size: contain;
    background-position: center;
    border-color: transparent;
  }
}
@keyframes mini1-blinkbox-end {
  0% {
    background-image: url("../i/logo-mini-trans.png");
    background-size: contain;
    background-position: center;
  }
  100% {
    background-image: url("../i/logo-mini-trans.png");
    background-size: contain;
    background-position: center;
    border-color: transparent;
  }
}
@keyframes mini2-blinkbox-end {
  0% {
    background-image: url("../i/logo-mini-trans.png");
    background-size: contain;
    background-position: center;
  }
  100% {
    background-image: url("../i/logo-mini-trans.png");
    background-size: contain;
    background-position: center;
    border-color: transparent;
  }
}

/* Experience Website Details */

#deco-font-01 {
  display: none;
  position: fixed;
  top: 15rem;
  left: 5%;
  border-left: 1px solid #fff;
  background: rgba(50, 90, 50, 0.3);
  padding-left: 0.2rem;
}

.font-visitor {
  font-family: Visitor;
  font-size: 10px;
  white-space: pre-line;
}
.var {
  color: #ff7084;
}
.const {
  color: #a1ffdf;
}
.datatype {
  color: #8effb4;
}
.command {
  color: #ff8ccc;
}
.string {
  color: #ffec91;
}
.call {
  color: #4e9cde;
}
.func {
  color: #66e6ff;
}
.tab {
  margin-left: 1rem;
}
.property {
  color: #bce0ff;
}

@keyframes blip {
  0% {
    background: rgba(255, 255, 255, 0.05);
  }
  90% {
    background: rgba(255, 255, 255, 0.05);
  }
  90.1% {
    background: rgba(255, 255, 255, 0.2);
  }
  100% {
    background: rgba(255, 255, 255, 0.05);
  }
}
#net-box-grid {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 474px;
  font-size: 0;
  text-align: left;
  font-family: Visitor;
  font-size: 0;
  opacity: 0;
  animation-name: clipOpacity;
  animation-duration: 0.1s;
  animation-delay: 3.5s;
}
grid .a,
grid .b,
grid .c,
grid .d,
grid .e,
grid .f,
grid .g,
grid .h,
grid .i {
  animation-name: clipOpacity, blip;
  animation-duration: 0.1s, 1s;
  animation-iteration-count: 5, infinite;
}
grid .a {
  animation-delay: 3.6s, 0.2s;
  animation-duration: 0.1s, 12s;
}
grid .b {
  animation-delay: 3.7s, 0.57s;
  animation-duration: 0.1s, 7.7s;
}
grid .d {
  animation-delay: 3.8s, 0.4s;
  animation-duration: 0.1s, 8s;
}
grid .c {
  animation-delay: 3.9s, 0.7s;
  animation-duration: 0.1s, 7s;
}
grid .e {
  animation-delay: 4s, 0.9s;
  animation-duration: 0.1s, 9s;
}
grid .f {
  animation-delay: 4.1s, 0.3s;
  animation-duration: 0.1s, 11s;
}
grid .g {
  animation-delay: 4.2s, 0.85s;
  animation-duration: 0.1s, 15s;
}
grid .h {
  animation-delay: 4.3s, 1.1s;
  animation-duration: 0.1s, 6s;
}
grid .i {
  animation-delay: 4.4s, 1.5s;
  animation-duration: 0.1s, 10s;
}
grid .j {
  animation-delay: 4.5s, 1.25s;
  animation-duration: 0.1s, 8.1s;
}

grid .r {
  display: block;
  width: 100%;
  text-align: right;
}
grid div {
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid rgba(0, 255, 255, 0.7);
  width: 150px;
  height: 40px;
  margin: 4px;
  padding-left: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-family: Visitor;
  font-size: 10px;
  color: #3c5;
  text-align: left;
}
grid div:hover {
  background: #fff !important;
  color: #000;
  cursor: pointer;
}

@keyframes bargen {
  0% {
    border-right-width: 100px;
  }
  10% {
    border-right-width: 80px;
  }
  20% {
    border-right-width: 40px;
  }
  30% {
    border-right-width: 20px;
  }
  40% {
    border-right-width: 80px;
  }
  50% {
    border-right-width: 50px;
  }
  60% {
    border-right-width: 60px;
  }
  70% {
    border-right-width: 80px;
  }
  80% {
    border-right-width: 70px;
  }
  90% {
    border-right-width: 20px;
  }
  100% {
    border-right-width: 100px;
  }
}

#bar-gen {
  display: none;
  border: 1px solid #fff;
  border-width: 1px 5px 0 0;
  position: fixed;
  bottom: 20%;
  right: 5%;
  width: 100px;
  height: 100px;
  font-size: 0;
  text-align: center;
  opacity: 0;
  animation-name: clipOpacity2;
  animation-iteration-count: 10;
  animation-duration: 0.1s;
  animation-delay: 3s;
}
#bar-gen > div {
  display: block;
  height: 8px;
  width: 99px;
  border-right: 0px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  animation: bargen 3s ease-in-out infinite;
}
#bar-gen > div:not(:first-child) {
  margin-top: 2px;
}
#bar-gen > div:nth-child(2) {
  animation-duration: 3.2s;
}
#bar-gen > div:nth-child(3) {
  animation-duration: 2.6s;
}
#bar-gen > div:nth-child(4) {
  animation-duration: 3.6s;
}
#bar-gen > div:nth-child(5) {
  animation-duration: 2.3s;
}
#bar-gen > div:nth-child(6) {
  animation-duration: 3.3s;
}
#bar-gen > div:nth-child(7) {
  animation-duration: 2.4s;
}
#bar-gen > div:nth-child(8) {
  animation-duration: 2.9s;
}
#bar-gen > div:nth-child(9) {
  animation-duration: 3.8s;
}
#bar-gen > div:nth-child(2n) {
  animation-direction: reverse;
}

/**/

@keyframes background_intro {
  0% {
    background:
        /* Mini Stripes */ repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 4px,
          rgba(255, 255, 255, 0) 4px,
          rgba(255, 255, 255, 0) 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) -280vw 0/30px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #444 30px) calc(-280vw - 12px)
        0/32px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) -295vw 0/30px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) calc(-295vw - 12px)
        0/32px 100% repeat-y,
      /* Single Line Across */
        linear-gradient(to bottom, transparent 29px, #999 30px) -200vw 180px/100%
        30px no-repeat,
      linear-gradient(to bottom, transparent 29px, #999 30px) -500vw 480px/100% 30px
        no-repeat,
      /* Gradient Box */
        linear-gradient(to bottom, rgba(200, 200, 200, 0.05) 60%, transparent)
        60px -200dvh/240px 50dvh no-repeat,
      /* Grid 1 */ linear-gradient(to right, #000 0 100%) 0 0/100dvw 100dvh
        no-repeat,
      linear-gradient(to right, transparent 29px, #000 1px) 0 0/30px 100% repeat,
      /* Grid 2 */ linear-gradient(to bottom, transparent 29px, #000 1px) 0 0/100%
        30px repeat,
      url("../i/bg-metalheart-large.png") 0 0 / cover no-repeat, #000;
    background-attachment: fixed;
  }
  25% {
    background:
        /* Mini Stripes */ repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 4px,
          rgba(255, 255, 255, 0) 4px,
          rgba(255, 255, 255, 0) 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) -280vw 0/30px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #444 30px) calc(-280vw - 12px)
        0/32px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) -295vw 0/30px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) calc(-295vw - 12px)
        0/32px 100% repeat-y,
      /* Single Line Across */
        linear-gradient(to bottom, transparent 29px, #999 30px) -200vw 180px/100%
        30px no-repeat,
      linear-gradient(to bottom, transparent 29px, #999 30px) -500vw 480px/100% 30px
        no-repeat,
      /* Gradient Box */
        linear-gradient(to bottom, rgba(200, 200, 200, 0.05) 60%, transparent)
        60px -200dvh/240px 50dvh no-repeat,
      /* Grid 1 */ linear-gradient(to right, #000 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;
  }
  50% {
    background:
        /* Mini Stripes */ repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 4px,
          rgba(255, 255, 255, 0) 4px,
          rgba(255, 255, 255, 0) 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) -280vw 0/30px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #444 30px) calc(-280vw - 12px)
        0/32px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) -295vw 0/30px 100% repeat-y,
      linear-gradient(to right, transparent 29px, #666 30px) calc(-295vw - 12px)
        0/32px 100% repeat-y,
      /* Single Line Across */
        linear-gradient(to bottom, transparent 29px, #999 30px) -200vw 180px/100%
        30px no-repeat,
      linear-gradient(to bottom, transparent 29px, #999 30px) -500vw 480px/100% 30px
        no-repeat,
      /* Gradient Box */
        linear-gradient(to bottom, rgba(200, 200, 200, 0.05) 60%, transparent)
        60px -200dvh/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;
  }
  100% {
    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;
  }
}

@keyframes cliptest {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  99% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
  100% {
    clip-path: none;
  }
}
@keyframes clipOpacity {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes clipOpacity2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes clipBlink {
  0% {
    background: rgba(255, 255, 255, 0.1);
  }
  100% {
    background: transparent;
  }
}
@keyframes clipBlinkTrans {
  0% {
    opacity: 0;
  }
  49.9% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes delayHide {
  0% {
    width: 100%;
    height: 100%;
  }
  99.9% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 0;
    height: 0;
  }
}

#main.show {
  color: #fff;
  animation: background_intro 7s forwards;
  font-family: CodeNewRoman;
}


#updates {
  width: 100%;
}


.deco-separator {
  opacity: 0;
  animation-name: clipBlinkTrans;
  animation-duration: 0.1s;
  animation-iteration-count: 5;
  animation-delay: 0.5s;
}

.animated-border-box {
  display: block;
  position: relative;
  width: 100%;
}
.animation-container {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  animation: cliptest 1s ease-in-out forwards;
  animation-delay: 1s;
}
.animated-border {
  display: block;
  background: red;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    0 0,
    10% 0,
    calc(10% + 5px) 5px,
    calc(35% + 5px) 5px,
    calc(35% + 10px) 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(15px + 20%),
    calc(100% - 5px) calc(20px + 20%),
    calc(100% - 5px) calc(20px + 40%),
    100% calc(25px + 40%),
    100% 100%,
    70% 100%,
    calc(70% - 5px) calc(100% - 5px),
    calc(50% - 5px) calc(100% - 5px),
    calc(50% - 10px) 100%,
    30px 100%,
    0 calc(100% - 30px)
  );
}

/* This will have to be overlaid and opacity 0 until other animation completes. */
.animated-border-box > .grid,
.animated-box-overlay {
  background: #000;
  clip-path: polygon(
    1px 1px,
    calc(10% - 1px) 1px,
    calc(10% + 4px) 6px,
    calc(35% + 6px) 6px,
    calc(35% + 11px) 1px,
    calc(100% - 16px) 1px,
    calc(100% - 1px) 16px,
    calc(100% - 1px) calc(14px + 20%),
    calc(100% - 6px) calc(19px + 20%),
    calc(100% - 6px) calc(21px + 40%),
    calc(100% - 1px) calc(26px + 40%),
    calc(100% - 1px) calc(100% - 1px),
    calc(70% + 1px) calc(100% - 1px),
    calc(70% - 4px) calc(100% - 6px),
    calc(50% - 6px) calc(100% - 6px),
    calc(50% - 11px) calc(100% - 1px),
    31px calc(100% - 1px),
    1px calc(100% - 31px)
  );
}
.animated-box-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  color: white;
  animation-name: clipBlink, delayHide;
  animation-duration: 0.5s, 0.1s;
  animation-delay: 2.1s, 2.6s;
}
.animated-box-overlay-content {
  opacity: 0;
  animation: clipOpacity 2s linear forwards;
  animation-delay: 0;
}

#main-grid {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr auto;
  grid-template-areas:
    "large large wide wide tall"
    "large large mini1 mini2 tall"
    "social social social social social";
}
.grid > .large {
  grid-area: large;
  aspect-ratio: 1 / 1;
  position: relative;
  background-position: 50% 50%;
}
.grid > .wide {
  grid-area: wide;
}
.grid > .tall {
  grid-area: tall;
}
.grid > .mini1 {
  grid-area: mini1;
}
.grid > .mini2 {
  grid-area: mini2;
}
.grid > .social {
  opacity: 0;
  position: relative;
  grid-area: social;
  padding: 16px 8px 20px 8px;
  text-align: center;
  animation-name: clipBlinkTrans;
  animation-duration: 0.1s;
  animation-iteration-count: 5;
  animation-delay: 2.7s;
}
#main-grid > div > a:hover {
  background-color: #111;
  border: 2px solid #222;
  background-size: cover;
}

.grid > .social .surround {
  margin: auto;
  width: 95%;
  border: 1px solid #777;
  border-width: 1px 0 1px 0;
  padding: 10px 2%;
}
#social-grid {
  grid-template-columns: 1fr auto 1fr;
  gap: 2%;
}
#social-grid .stripered {
  opacity: 0;
  height: 50px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    #500 10px,
    #500 20px
  );
  animation: clipBlinkTrans;
  animation-duration: 0.1s;
  animation-iteration-count: 5;
  animation-delay: 3.2s;
  animation-fill-mode: forwards;
}
#social-grid a
{
	display: inline-block;
	height: 50px;
	cursor: pointer;
	z-index: 1;
}
#social-grid a span
{
 display: inline-block;
}
.social-content object {
  position: relative;
  width: 50px;
  height: 50px;
  z-index: -1; /* Thank you StackOverflow */
}

.grid > div {
	background-repeat: no-repeat;
}

@keyframes blinkbox-start {
  0% {
    border-color: #444;
    background-color: #000;
  }
  50% {
    border-color: #444;
    background-color: #000;
  }
  51% {
    border-color: transparent;
  }
  100%
  {
	  border-color: transparent;
	  background-repeat: no-repeat;
  }
}
@keyframes blinkbox-end {
  0% {
    background: rgba(255, 255, 255, 0.2);
  }
  100% {
    background: rgba(255, 255, 255, 0);
  }
}

.blink-box {
  position: relative;
  display: block;
  /* Gotta be extra specific with Chrome since animations may break otherwise */
  /* Stop using this spyware y'all, this site was built for Firefox. */
  background-color: #000;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: all 1s;
  overflow: hidden;
  animation-name: blinkbox-start, blinkbox-end;
  animation-duration: 0.1s, 0.5s;
  animation-iteration-count: 6, 1;
  animation-delay: 2.6s, 3.35s;
  background-repeat: no-repeat;
}

.large .blink-box {
  animation-name: blinkbox-start, large-blinkbox-end;
}
.wide .blink-box {
  animation-name: blinkbox-start, wide-blinkbox-end;
}
.tall .blink-box {
  animation-name: blinkbox-start, tall-blinkbox-end;
}
.mini1 .blink-box {
  animation-name: blinkbox-start, mini1-blinkbox-end;
}
.mini2 .blink-box {
  animation-name: blinkbox-start, mini2-blinkbox-end;
}

.reveal-position-text {
  opacity: 0;
  animation-name: clipOpacity;
  animation-duration: 0.75s;
  animation-delay: 2.6s;
  position: relative;
  left: 2%;
  top: 2%;
  background-image: linear-gradient(to right, #c33, #a11),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      #a11 10px,
      #a11 20px
    );
  background-size: 150px 15px, 70% 15px;
  background-position: 0 0, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  color: #fff;
  width: 50%;
  padding: 0.2rem;
  text-shadow: 1px 1px 0 #000;
  border-bottom: 4px solid #c33;
}

.final-blink {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  animation-name: clipOpacity2;
  animation-duration: 1s;
  animation-delay: 3.35s;
  animation-direction: reverse;
}

.tall .blink-box {
  animation-delay: 2.9s, 3.65s;
}
.mini1 .blink-box {
  animation-delay: 3.1s, 3.85s;
}
.wide .blink-box {
  animation-delay: 3.3s, 4.05s;
}
.mini2 .blink-box {
  animation-delay: 3.5s, 4.25s;
}

.not-yet {
  color: #888;
  opacity: 0;
  animation-name: clipOpacity2;
  animation-duration: 0.1s;
  animation-iteration-count: 4;
  animation-delay: 4s;
}
@keyframes widen-reveal {
  0% {
    background-color: rgba(11, 127, 84, 0.1);
    width: 0;
    padding: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    width: 3px;
    padding: 1rem 0;
    height: auto;
    opacity: 1;
  }
  20% {
    background-color: rgba(11, 127, 84, 0.1);
    width: 3px;
    padding: 1rem 0;
    height: auto;
    opacity: 1;
  }
  60% {
    background-color: rgba(11, 127, 84, 0.1);
    width: 90%;
    padding: 1rem;
    height: auto;
    opacity: 1;
  }
  61% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  100% {
    background-color: rgba(11, 127, 84, 0.1);
    width: 90%;
    padding: 1rem;
    height: auto;
    opacity: 1;
  }
}

.general-page-title {
  margin: auto;
  width: 0;
  height: 0;
  opacity: 1;
  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
  );
  padding: 0;
  overflow: hidden;
  animation-name: widen-reveal;
  animation-duration: 2s;
  animation-delay: 4s;
  background: linear-gradient(
      to bottom,
      transparent 29px,
      #0b7f54 30px,
      #0b7f54
    )
    0 70px/100% 35px no-repeat;
  background-color: rgba(11, 127, 84, 0.9);
}

.general-page-title .flex-container {
  display: flex;
  align-items: center;
}

/* Bad implementation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 50%;
  }
}
.general-page-title h1 {
  font-family: monospace;
  width: 0;
  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 */
  animation-name: typing;
  animation-duration: 3s;
  animation-timing-function: steps(50, end);
  animation-delay: 5.5s;
  z-index: 1;
}

.t3d-container .t3d {
  opacity: 0;
  animation: targeting 1s linear infinite;
}
.t3d-container div:nth-child(1) {
  animation-delay: 6s;
}
.t3d-container div:nth-child(2) {
  animation-delay: 6.25s;
}
.t3d-container div:nth-child(3) {
  animation-delay: 6.5s;
}
.t3d-container div:nth-child(4) {
  animation-delay: 6.75s;
}

@keyframes content-reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#content-reveal {
  opacity: 0;
  animation-name: content-reveal;
  animation-duration: 0.3s;
  animation-delay: 6s;
}

#grid-content {
  position: relative;
  margin-top: 2rem;
  grid-template-columns: 1fr;
  grid-template-rows: 30px 1fr;
  gap: 1rem;
}

#grid-content .deco-bar {
  border: 1px solid #444;
  position: relative;
  background-color: rgba(40, 40, 40, 0.3);
  opacity: 0;
  animation-name: clipOpacity2, content-reveal;
  animation-duration: 0.1s, 0.3s;
  animation-iteration-count: 5, 1;
  animation-delay: 6.3s, 6.8s;
}
#grid-content .deco-grid {
  margin: 5px;
  width: 48px;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}
@keyframes deco-box-blink {
  0% {
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.1);
  }
}
.deco-bar-box {
  border: 1px solid #444;
  width: 8px;
  height: 8px;
  animation: deco-box-blink 0.45s linear infinite;
}
.deco-bar-box:nth-child(2) {
  animation-delay: 0.05s;
}
.deco-bar-box:nth-child(3) {
  animation-delay: 0.1s;
}
.deco-bar-box:nth-child(4) {
  animation-delay: 0.15s;
}
.deco-bar-box:nth-child(5) {
  animation-delay: 0.2s;
}
.deco-bar-box:nth-child(6) {
  animation-delay: 0.25s;
}
.deco-bar-box:nth-child(7) {
  animation-delay: 0.3s;
}
.deco-bar-box:nth-child(8) {
  animation-delay: 0.35s;
}
.deco-bar-box:nth-child(9) {
  animation-delay: 0.4s;
}
.deco-bar-box:nth-child(10) {
  animation-delay: 0.45s;
}

#updates-svg-back {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 30px;
  background-repeat: no-repeat;
}
#updates-svg-back line,
#updates-svg-back circle,
#updates-svg-back rect {
  fill: transparent;
  stroke: rgb(150, 150, 150);
  stroke-width: 1;
}
.content-text {
  background: rgba(0, 0, 0, 0.5);
  min-height: 350px;
}
.content-text-border {
  float: left;
  margin-left: 3px;
  margin-right: 0.5rem;
  background: #fff;
  width: 6px;
  height: 100%;
  clip-path: polygon(
    0 30%,
    3px calc(30% - 3px),
    3px 5px,
    100% 0,
    100% 1px,
    4px 6px,
    4px calc(100% - 6px),
    100% calc(100% - 1px),
    100% 100%,
    3px calc(100% - 5px),
    3px calc(70% + 3px),
    0 70%
  );
}

#featured-gallery {
  position: absolute;
  left: 9px;
  right: 3px;
  top: 45px;
  bottom: 0;
  border: 1px solid #444;
  z-index: -1;
  text-align: right;
  padding: 0.5rem;
  background: url("../i/fw/fw-arlena-zull.png");
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.04);
  min-height: 350px;
}

@media screen and (min-width: 800px) and (orientation: landscape) {

  #grid-content {
    grid-template-columns: 30px 1fr 1fr;
    grid-template-rows: 1fr;
  }
  #grid-content .deco-grid {
    width: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, 1fr);
  }
  #updates-svg-back {
    width: 30px;
    height: 200px;
    top: auto;
    bottom: 0;
  }
  #updates-svg-back > svg {
    transform: rotate(90deg);
    transform-origin: 0 100%;
    position: relative;
    top: -30px;
    left: 1px;
  }
  #featured-gallery {
    position: static;
    z-index: auto;
  }
  #featured-gallery.square {
    aspect-ratio: 1 / 1;
  }
  #featured-gallery.landscape-a4 {
    aspect-ratio: 1.414 / 1;
  }
  #featured-gallery.landscape-sd {
    aspect-ratio: 4 / 3;
  }
  #featured-gallery.landscape-hd {
    aspect-ratio: 16 / 9;
  }
  #featured-gallery.portrait-sd {
    aspect-ratio: 3 / 4;
  }
  #featured-gallery.portrait-hd {
    aspect-ratio: 9 / 16;
  }
  #featured-gallery span {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0.6;
  }
  .scrolling-text {
    height: 100%;
    padding: 0.5rem;
    overflow-y: scroll;
  }
  #net-box-grid,
  #deco-font-01,
  #bar-gen {
    display: block;
  }
}