/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* By:     Aaron Wynn                      ("`-''-/").___..--''"`-._         */
/* E-mail: webmaster@arawn.dev              `6_ 6  )   `-.  (     ).`-.__.`) */
/* Web:    https://arawn.dev/?=info         (_Y_.)'  ._   )  `._ `. ``-..-'  */
/*                                        _..`--'_..-_/  /--'_.' ,'          */
/*                                       (il),-''  (li),'  ((!.-'            */
/* Copyright (C) 2021-Present, Arawn Development.                            */
/* All rights reserved.  Void where prohibited by law.                       */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@charset "UTF-8";

#Info {
  display: table;
  margin: 0 auto;

  --titlebar-height: 30px;
}

/* window */

#Info > .window {
  display: table-cell;
  vertical-align: middle;
  height: 220px;
  width: 465px;
  padding: 0;
  border: 3px groove var(--window-border-color);
}

/* title-bar */

#Info > .window > .title-bar {
  display: table;
  vertical-align: top;
  max-height: var(--titlebar-height);
  width: 100%;
  padding: 5px;
  color: var(--fg-color);
  background-color: var(--bg-color2);
  border-bottom: 3px groove #999;
}

#Info > .window > .title-bar > .title {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  font-family: monospace;
}

#Info > .window > .title-bar > .buttons {
  text-align: right;
}

#Info > .window > .title-bar > .buttons > a.link-button {
  text-decoration: none;
}

#Info > .window > .title-bar > .buttons > a.link-button > .button {
  display: table-cell;
  vertical-align: middle;
  width: 10px;
  padding: 0;
  text-decoration: none;
  font-size: 0.9rem;
  font-family: monospace;
}

#Info > .window > .title-bar > .title > .text:hover,
#Info > .window > .title-bar > .buttons > a.link-button > .button:hover,
#Info > .window > .title-bar > .buttons > a.link-button > .button:focus,
#Info > .window > .title-bar > .buttons > a.link-button > .button:active {
  text-shadow:
    0 0 1px var(--glow-a),
    0 0 2px var(--glow-b),
    0 0 3px var(--glow-c);
/*    0 0 4px var(--glow-d); */
}

/* screen */

#Info > .window > .screen {
  height: calc(216px - var(--titlebar-height) - 4px);
  width: 461px;
/*
  height: calc(100% - 22px);
  width: 100%;
  top: -1lh;
*/
  padding: 0;
  background-color: var(--screen-bg-color);
}

#Info > .window > .screen > .codebox {
  position: absolute;
  height: calc(216px - var(--titlebar-height) - 4px);
  width: 461px;
  z-index: 2;
  padding: 5px;
  font-size: 0.8rem;
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
}

/* codebox */

#Info > .window > .screen > #codebox1 {
  color: var(--fg-color);
}

#Info > .window > .screen > #codebox2 {
/*  inset: 0; */
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  color: #360;
  text-shadow:
    0 0 1px #099,
    -1px 0 1px #909,
    1px 0 1px #099;
  animation: glitchPop1 7s infinite steps(1, end), glitchPop2 10s infinite steps(1, end);
}

@keyframes glitchPop1 {
  0%, 2%, 100% {
    opacity: 0;
    transform: none;
  }
  1% {
    opacity: 1;
/*    transform: translate3d(1px, -1px, 0) skewX(1deg); */
  }
}

@keyframes glitchPop2 {
  0%, 31.9%, 45%, 100% {
    opacity: 0;
    transform: none;
  }
  31.1%, 31.5% {
    opacity: 1;
    transform: none;
  }
  31.2% {
    opacity: 1;
    transform: translate3d(1px, -1px, 0) skewX(1deg);
  }
  31.4% {
    opacity: 1;
    transform: translate3d(2px, -2px, 0) skewX(1deg);
  }
}

#Info .glow {
  text-shadow:
    0 0 1px var(--glow-a),
    0 0 2px var(--glow-b),
    0 0 3px var(--glow-c);
/*    0 0 4px var(--glow-d); */
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* EOF */