/*

     _________________________________     O---o                        __  __     _
    |         _  _            _  __   |     O-o       __ _   ___  _ __  \ \/ /  __| |  ___ __   __
    |     /\ |_)|_)|   /\ | |(_ |_    |      O       / _` | / _ \| '_ \  \  /  / _` | / _ \ \ / /
    ;   _/``\|  |  |__/``\|_| _)|__   |     o-O     | (_| ||  __/| | | | /  \ | (_| ||  __/ \ V /
   ((_(-____________.-.___________.)`)┘    o---O     \__, | \___||_| |_|/_/\_\ \__,_| \___|  \_/
    \__ )        ,'     `.        \ _/     O---o     |___/
    :  :        |_________|       :  :      O-o
    |-'|       ,'-.-.--.-.`.      |`-|       O       Hi! This code is optimized.
    |_.|      (( (*  )(*  )))     |._|      o-O      Unoptimized website  @ https://source.timeline.genxdev.net/
    |  |       `.-`-'--`-'.'      |  |     o---O     allows you to step through Typescript and set
    |-'|        | ,-.-.-. |       |._|     O---o     breakpoints.
    |  |        |(|-|-|-|)|       |  |      O-o
    :,':        |_`-'-'-'_|       ;`.;       O       Application : 'timeline'
     \  \     ,'           `.    /._/       o-O      Filename    : 'TimelineApp.css'
      \/ `._ /_______________\_,'  /       o---O
       \  / :   ___________   : \,'
        `.| |  |           |  |,'╔══════════════════╡@license genXdev All Rights Reserved╞╗
          `.|  |           |  |  ║(the "Software") are the exclusive property of genXdev. ║
╔═══════════╡  |           |  ╞══╝Unauthorized copying, distribution, modification, or use╚══════════════════╗
║of this Software, in whole or in part, is strictly prohibited. For permission requests, please contact:     ║
║genXdev, info@genXdev.net Written permission from genXdev is required for any use of this Software,         ║
║including but not limited to, reproduction, adaptation, distribution, performance, display, or the creation ║
║of derivative works based upon the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,║
║EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR║
║PURPOSE, TITLE, AND NON-INFRINGEMENT. IN NO EVENT SHALL GENXDEV BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER  ║
║LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH║
║THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.╔═════════════════════════════════════════════════╝
╚══════════════════════════════════════════════════════════╝

*/



@font-face {
  font-family: "stardos_stencilbold";
  src:
    url("../fonts/stardosstencil-bold-webfont_v0.0.0.1_18e1080e.woff") format("woff"),
    url("../fonts/stardosstencil-bold-webfont_v0.0.0.1_85d22f83.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "stardos_stencilregular";
  src:
    url("../fonts/stardosstencil-regular-webfont_v0.0.0.1_67d5463c.woff") format("woff"),
    url("../fonts/stardosstencil-regular-webfont_v0.0.0.1_79ab6a41.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Rational Integer Regular";
  font-style: normal;
  font-weight: normal;
  src:
    local("Rational Integer Regular"),
    url("../fonts/ratio____v0.0.0.1_a9ab0e54.woff") format("woff");
}

@font-face {
  font-family: "League Gothic";
  src: url("../fonts/leaguegothic-regular-webfont.eot");
  src:
    url("../fonts/leaguegothic-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/leaguegothic-regular-webfont_v0.0.0.1_29c587e6.woff") format("woff"),
    url("../fonts/leaguegothic-regular-webfont_v0.0.0.1_19156af9.ttf") format("truetype"),
    url("../fonts/leaguegothic-regular-webfont.svg#league_gothicregular")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "League Gothic";
  src: url("../fonts/leaguegothic-italic-webfont.eot");
  src:
    url("../fonts/leaguegothic-italic-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/leaguegothic-italic-webfont_v0.0.0.1_9513c65d.woff") format("woff"),
    url("../fonts/leaguegothic-italic-webfont_v0.0.0.1_371369f4.ttf") format("truetype"),
    url("../fonts/leaguegothic-italic-webfont.svg#league_gothic_italicregular")
      format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "League Gothic Condensed";
  src: url("../fonts/leaguegothic-condensed-regular-webfont.eot");
  src:
    url("../fonts/leaguegothic-condensed-regular-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/leaguegothic-condensed-regular-webfont_v0.0.0.1_7c44ec6a.woff") format("woff"),
    url("../fonts/leaguegothic-condensed-regular-webfont_v0.0.0.1_c6f90edd.ttf")
      format("truetype"),
    url("../fonts/leaguegothic-condensed-regular-webfont.svg#league_gothic_condensed-Rg")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "League Gothic Condensed";
  src: url("../fonts/leaguegothic-condensed-italic-webfont.eot");
  src:
    url("../fonts/leaguegothic-condensed-italic-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/leaguegothic-condensed-italic-webfont_v0.0.0.1_34441991.woff") format("woff"),
    url("../fonts/leaguegothic-condensed-italic-webfont_v0.0.0.1_231d1606.ttf") format("truetype"),
    url("../fonts/leaguegothic-condensed-italic-webfont.svg#league_gothic_condensed_itaRg")
      format("svg");
  font-weight: normal;
  font-style: italic;
}

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #0d364a;
}

canvas,
div#appDisplay1 {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

div#appDisplay2 {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

input,
input:active,
input:hover,
input:focus {
  outline: none;
  font-style: oblique;
}

canvas,
body,
html {
  background-color: #0d364a;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  user-select: none;
}

body {
  background-color: #0d364a;
}

canvas#cbg {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 43% center;
  background-size: cover;
  background-image: url("../../assets/images/KandinskyKaleidoscope_background04_b650fd57.jpeg");
  transition: background-image 10s ease-in-out;
}

canvas,
canvas:active {
  cursor: crosshair;
  outline: none;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  background-color: transparent;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

canvas#cbg {
  background-color: transparent;
}

canvas#cfg {
  background-color: rgba(30, 69, 124, 0.65) !important;
}

canvas#cef {
  background-color: transparent;
  opacity: 0.9 !important;
}

input {
  resize: none;
}