/*  # START #  */
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # Font-import #  */
@font-face { 
  font-family: DOSVGA; 
  src: url('DOSVGA.ttf'); 
} 
@font-face { 
  font-family: tahoma-8px; 
  src: url('tahoma-8px.ttf'); 
} 
@font-face { 
  font-family: crumbled-pixel; 
  src: url('Crumbled-Pixels.ttf'); 
}
@font-face { 
  font-family: lilliput; 
  src: url('Lilliput_Steps.otf'); 
} 

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # MAIN #  */
body {
  background-color: #000000;
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("bk_static.gif");
  color: #C0C0C0;
  font-family: DOSVGA;
}

.WIPtext {
 color: rgba(255, 255, 255, 0.25); 
}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # PAGES #  */
.page {
  max-width: 450px; /*500px / 80%*/
  margin: auto;
  margin-top:25px;
  background: rgba(0, 0, 0, 0.75);
  padding: 0px;
  border: 2px solid rgba(51, 51, 51, 0.5);
} 

.window2 {
  animation: window-open 15.5s/*15.5s*/;
}

@keyframes window-open {
  0%    { opacity: 0; }
  99.9% { opacity: 0; } 
  100%  { opacity: 1; }
}



/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # TITLE #  */
.titlebar {
  width: 100%; 
  background-color: rgba(51, 51, 51, 0.5);
  overflow: auto;
  display: flex;
  justify-content: center;
}

.title_icon {
  float: left;
  padding: 1px 0.25%; 
  height:15px; 
}
  
.title_title {
  float: none;
  color: white;
  text-align: center;
  /*padding: 1px 38%;*/ /*191px*/
  width: 100%;
  
  font-family: tahoma-8px;
  font-size: 20px;
}

.title_buttons {
  float: right;
  padding: 1px 1px;  
  height:14px;
}
  
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # SUBMENU #  */
.submenubar {
  width: 100%; 
  background-color: rgba(20, 20, 20, 0.75);
  /*overflow: auto;*/
  
  
  font-family: tahoma-8px;
  font-size: 16px;
}
.submenu_off {
  color: #555555;
  padding: 5px;
}

.submenu_on {
  color: #AAAAAA;
}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # MIDDLE-PART #  */
.middle_main {
  font-family: tahoma-8px;
  padding: 0px 5px;
}
.middle_main p {
  white-space: pre-line;
}
/*typing effect*/
.typing-container {
  width: 48ch;
  height: 10.4em;
  font-family: DOSVGA;
}

.typing {
  white-space: nowrap;
  overflow: hidden;
  border-right: 1ch solid;
  margin-bottom: 0.2em;
}

.typing.line-1 {
  width: 18ch;
  animation:
    cursor-gone 1.00s,
    cursor-typing 1.20s steps(18) 1.00s backwards,
    cursor-gone 0s 2.20s forwards;
}

.typing.line-2 {
  width: 47ch;
  animation:
    cursor-gone 2.20s,
    cursor-typing 3.13s steps(47) 2.20s backwards,
    cursor-gone 0s 5.33s forwards;
}

.typing.line-3 {
  width: 0ch;
  animation:
    cursor-gone 5.33s,
    cursor-typing 0.07s steps(1) 5.33s backwards,
    cursor-gone 0s 5.40s forwards;
}

.typing.line-4 {
  width: 27ch;
  animation:
    cursor-gone 5.40s,
    cursor-blink 1.00s steps(2, jump-none) 5.40s 1 none,
    cursor-typing 1.80s steps(27) 6.40s backwards,
    cursor-gone 0s 8.20s forwards;
}

.typing.line-5 {
  width: 28ch;
  animation:
    cursor-gone 8.20s,
    cursor-typing 1.87s steps(28) 8.20s backwards,
    cursor-gone 0s 10.07s forwards;
}

.typing.line-6 {
  width: 0ch;
  animation:
    cursor-gone 10.07s,
    cursor-typing 0.07s steps(1) 10.07s backwards,
    cursor-gone 0s 10.13s forwards;
}

.typing.line-7 {
  width: 19ch;
  animation:
    cursor-gone 10.13s,
    cursor-typing 1.27s steps(19) 10.13s backwards,
    cursor-gone 0s 11.40s forwards;
}

.typing.line-8 {
  width: 39ch;
  animation:
    cursor-gone 11.40s,
    cursor-blink 1.00s steps(2, jump-none) 11.40s 1 none,
    cursor-typing 2.60s steps(39) 12.40s backwards,
    cursor-blink 0s 15s forwards;
}

@keyframes cursor-typing {
  from {
    width: 0;
  }
}

@keyframes cursor-blink {
  to {
    border-color: transparent;
  }
}

@keyframes cursor-gone {
  from, to {
    border-color: transparent;
  }
}


/* credit: https://codepen.io/owenfromcanada/pen/qBQxpEj*/

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # GLITCH EFFECT #  */




/* credit: */  
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # BOTTOM-MENU #  */
.bottomsmenu {
  width: 100%; 
  background-color: rgba(20, 20, 20, 0.75);
  overflow: auto;  
  font-family: tahoma-8px;
  font-size: 16px;
  position: relative;
}

.bottomsmenu_left {
  float: left;
  text-align: left;
  padding: 1px 1px;
}

.bottomsmenu_right {
  opacity: 0.25;
  position: absolute;
  right: 0;
  bottom: 0;
}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # My Card Style #  */
.card_title {
  font-family: crumbled-pixel; 
  text-align: center;
  font-size: 200px;  
  margin: auto;
  margin-top:10px;
}

.card_subtitle {
  font-family: lilliput;
  text-align: center;
  font-size: 12px;  
  margin: auto;
  margin-top:-40px;
  margin-bottom: 10px;
}

.card_blu {
  width: 100%;
  margin: 10px auto 20px;
  display: block;
  animation: greyanim 30s;
  /*border: 2px solid rgba(51, 51, 51, 0.5);*/
}


@keyframes greyanim {
  0%    { filter: grayscale(100%); }
  50%   { filter: grayscale(100%); }
  100%  { filter: grayscale(10%); }
}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # Social and Info Buttoms Styles #  */
.icon_table {
  width:100%;
  /*border:1px solid white;*/
  text-align: center;
  vertical-align: middle; 
  table-layout: fixed;
  padding: 5px;
}

.icon_link {
  font-family: tahoma-8px;
  text-decoration: none;
  color: #C0C0C0;
}
.icon_link:hover {
  color: white;
}

.icon_pic {
  width: 50px;
  height: 50px;
  object-fit: scale-down;
}

.icon_tooltip {
  position: relative;
  display: inline-block;
 /* border-bottom: 1px dotted black;*/
}

.icon_tooltip .icon_tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: #505050;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0; 
  /*INFO: Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
.icon_tooltip:hover .icon_tooltiptext {
  visibility: visible;
}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # Abou OC page #  */
.oc_page {
  max-width: 900px;
}

.oc_ascii {
  font-family: monospace;
  font-size: 10px;
  line-height: 1;
  white-space: pre;
}

.oc_column_left {
  box-sizing: border-box;
  float: left;
  width: 550px;
  padding: 0px;
}

.oc_column_right {
  box-sizing: border-box;
  float: left;
  width: 340px;
  padding: 0px;
  font-family: DOSVGA; 
}

/* Clear floats after the columns */
.oc_row:after {
  box-sizing: border-box;
  content: "";
  display: table;
  clear: both;
}

.oc_broken-text {
  color: #0d0d0d;
  }
.oc_exit{
  font-family: DOSVGA;
  color: #C0C0C0;
  text-decoration: none;
}
.oc_exit:hover a { 
  color:white;
}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # error page #  */

.error_gif {
  object-fit: none;
  width:100%;
  height:200px;
}
.error_page { 
  background: #0C0E1C; 
}
.error_back {
  float: right;
  font-family: tahoma-8px;
  font-size: 18px;
  color: #F4566F ;
  text-decoration: none;
  border: 4px solid #742A34; 
  }
.error_back:hover {
  color: white;
  }  
  

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # loading bar #  */
.bar_text_p {
  text-align: center;
}
.bar_loader { 
  width:400px; 
  margin:0 auto;
  border-radius:1px;
  border:0px solid transparent;
  position:relative;
  padding:1px;
}
.bar_loader:before {
  content:'';
  border:1px solid #fff; 
  /*border-radius:10px;*/
  position:absolute;
  top:-4px; 
  right:-4px; 
  bottom:-4px; 
  left:-4px;
}
.bar_loader .bar_loaderBar { 
  position:absolute;
  border-radius:0px;
  top:0;
  right:100%;
  bottom:0;
  left:0;
  background:#fff; 
  width:0;
  animation:bar_borealisBar 2s linear infinite;
}

@keyframes bar_borealisBar {
  0% {
    left:0%;
    right:100%;
    width:0%;
  }
  20% {
    left:0%;
    right:75%;
    width:25%;
  }
  80% {
    right:0%;
    left:75%;
    width:25%;
  }
  100% {
    left:100%;
    right:0%;
    width:0%;
  }
}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # WIP #  */

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*  # WIPS #  */
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
  /*  # END #  */