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

@import url('layout.css') screen;
@import url('scrollbar.css') screen;

:root {
  --header-height: 30px;
  --footer-height: 52px;
}

html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-variant: var(--font-variant);
  color: var(--fg-color);
  background-color: var(--bg-color);
}

* {
  box-sizing: border-box;
}

/* header */

header {
  color: var(--header-fg-color);
  background-color: var(--header-bg-color);
}

header > .content {
  width: 100%;
  padding: 5px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--header-content-fg-color);
  background-color: var(--header-content-bg-color);
}

header > .content > #signin-button {
  float: right;
  margin: 0;
  padding: 2px;
}

/* footer */

footer {
  padding: 0;
  color: var(--footer-fg-color);
  background-color: var(--footer-bg-color);
}

footer > .content {
  padding: 5px;
  text-align: center;
  font-size: 0.8rem;
  font-variant: small-caps;
  color: var(--header-content-fg-color);
  background-color: var(--header-content-bg-color);
}

footer #nav {
  font-size: 0.8rem;
}

footer #credits {
  font-size: 0.6rem;
}

#copyright {
}

/* Glowing Link Text */

header #signin-button:hover,
header #signin-button:focus,
header #signin-button:active,
footer #nav a[href]:hover,
footer #nav a[href]:focus,
footer #nav a[href]:active,
footer #credits a[href]:hover,
footer #credits a[href]:focus,
footer #credits a[href]:active {
  text-shadow:
    0 0 2px var(--glow-a),
    0 0 4px var(--glow-b),
    0 0 6px var(--glow-c);
    /* 0 0 8px var(--glow-d); */
}

/* main */

main {
  color: var(--main-fg-color);
  background-color: var(--main-bg-color);
}

main > .content {
  padding: 5px;
  font-size: 1rem;
  color: var(--main-fg-color);
  background-color: var(--main-bg-color);
}

/* link */

a[href] {
  color: var(--link-color, --fg-color);
}

a[href]:visited {
  color: var(--link-visited-color, --fg-color);
}

a[href]:hover {
  color: var(--link-hover-color, --fg-color);
}

a[href]:focus {
  color: var(--link-focus-color, --fg-color);
}

a[href]:active {
  color: var(--link-active-color, --fg-color);
}

/* input */

textarea {
/* TODO
  color: var(--fg-color);
  background-color: var(--bg-color);
*/
}

select,
input[type="text"],
input[type="submit"],
input[type="file"],
input[type="file"]::file-selector-button
button {
  color: var(--input-fg-color, --fg-color2);
  background: var(--input-bg-color, --bg-color2);
  border-width: var(--input-bd-width, --bd-width);
  border-style: var(--input-bd-style, --bd-style);
  border-color: var(--input-bd-color, --bd-color2);
  font-size: 0.5rem;
}

button {
  border-radius: 4px;
  cursor: pointer;
}

select:hover,
input[type="text"]:hover,
input[type="submit"]:hover,
input[type="file"]::file-selector-button:hover,
button:hover {
  color: var(--input-hover-fg-color, --input-fg-color2);
  background: var(--input-hover-bg-color, --input-bg-color)2;
  border-color: var(--input-hover-bd-color, --input-bd-color2);
  border-style: var(--input-hover-bd-style, --input-bd-style)2;
}

select:focus,
input[type="text"]:focus,
input[type="submit"]:focus,
input[type="file"]::file-selector-button:focus,
button:focus {
  color: var(--input-focus-fg-color, --input-hover-fg-color);
  background: var(--input-focus-bg-color, --input-hover-bg-color);
  border-color: var(--input-focus-bd-color, --input-hover-bd-color);
  border-style: var(--input-focus-bd-style, --input-hover-bd-style);
}

input[type="text"]:focus {
/*  outline: none; */
  border-color: var(--input-bd-color-focus, --input-bd-color);
}

select:active,
input[type="text"]:active,
input[type="submit"]:active,
input[type="file"]::file-selector-button:active,
button:active {
  color: var(--input-active-fg-color, --input-focus-fg-color);
  background: var(--input-active-bg-color, --input-focus-bg-color);
  border-color: var(--input-active-bd-color, --input-focus-bd-color);
  border-style: var(--input-active-bd-style, --input-focus-bd-style);
}

option {
  color: var(--option-fg-color, --input-fg-color);
  background: var(--option-bg-color, --input-bg-color);
}

/* #Redir */

/*
#Redir button:hover {
  background: #444;
}
*/

/* position */

.vcenter {
  position: relative;
  top: 50%; 
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

/* error */

main .error {
  background-color: #333;
  border: 2px solid #F00;
}

/* Miscellanous */

.center {
  text-align: center;
}

.clear {
  clear: both;
}

.clearfix {
  content: "";
  clear: both;
  display: table;
}

.breaker {
  word-break: break-all;
}

/* Decoration: Glowing Text */

.glow {

}

/* Animation: Flashing */

.flash {
  animation: flash 1s infinite alternate;
}

@keyframes flash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Animation: Blinking Cursor */

.cursor {
  display:inline-block;
  animation: blink 0.6s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Animation: Growing Glow */

.glow-grow {
  animation: glowExpand 2s infinite ease-in-out;
}

@keyframes glowExpand {
  0% {
    text-shadow:
      0 0 1px #0088ff,
      0 0 3px #0099ff,
      0 0 6px #00b7ff,
      0 0 9px #00d4ff;
  }
  50% {
    text-shadow:
      0 0 2px #0088ff,
      0 0 4px #00a3ff,
      0 0 8px #00c2ff,
      0 0 10px #00e0ff;
  }
  100% {
    text-shadow:
      0 0 3px #0088ff,
      0 0 6px #00adff,
      0 0 9px #00ccff,
      0 0 12px #00f0ff;
  }
}

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