/* @import url('ux/dialog.css');
@import url('ux/notice.css');
@import url('ux/image.css');
@import url('ux/anim.css');
@import url('ux/folder.css'); */

/*
@import url('https://fonts.googleapis.com/css?family=Orbitron');
@font-face {
    font-family:                        typewriter-old;
    src:                                url("fonts/1942_report/1942.ttf");
}*/



@import url('fonts/index.css');

.spectacles {
            display:  block;
            opacity:    .67;
}

.modal {
            display: block;
           position: fixed;
                top:  50%;
             bottom:  50%;
               left:  50%;
              right:  50%;
   background-color: #224411;
             border: 1px solid #a0c000;
         visibility: hidden;
            z-index: 100;
      border-radius:   8px;
}

#colors:target+.modal {
         visibility: visible;
         transition: top 1.33s, bottom 1.33s, left .5s, right .55s;
}


svg.logo {
             position: fixed;
               top: 33%;
                 left: 0;
                width: 100%;
               height: 100%;
              z-index: -1;
               stroke: var(--color-yellow-normal);
                 fill: var(--color-yellow-normal);
               opacity: .33;
}


:root {
    /* --color-greenish-yellow-lit:     #deff00;
    --color-greenish-yellow-shade:   #aacc00;
    --color-greenish-yellow-normal:  #678800;
    --color-orange-shade:            rgba( 62,39,25,1);
    --color-orange-normal:           rgba(120,69,13,1);
    --color-orange-lit:              rgba(255,99,19,1); */
    /* --color-yellow-normal:           #aa8800; */
    /* --color-yellow-lit:              #ffff00; */
    /* --color-yellow-shade:            #000000; */
}


:root {
    --default-shadow-color:                        rgba( 1,1,1,.25); /*#3f0000;*/
    --default-caption-font:                              'fjalla-one';
    --default-container-width:                                  100% ;
    --default-article-font:                                    'syne';
   --heading-text-color: #0f0;
   --heading-text-color-lit: #5f5;
   --heading-text-color-shade: #040;
    --default-article-text-color:                              #aa8;
    --default-article-text-color-lit:                          #eeb;
    --default-article-text-color-shade:                        #220;
    --default-header-text-color:                   rgba(127,63,0,1);
    --default-header-font:              var(--default-caption-font);

    --ux-background-image:                                     none;
    --ux-border:                           rgba(255, 255, 255, .17)  /*#ffffff*/
                                           rgba(  0,   0,   0, .83)  /*#000;*/
                                           rgba(  0,   0,   0, .83)  /*#000;*/
                                           rgba(255, 255, 255, .17); /*#ffffff;*/
    --document-background-color:           rgba( 67,   0,  85,   1); /*#183038;*/
    --ux-background-color:                 rgba( 42,   7,  62,   1); /*#af0fff;*/
    --ux-background-repeat:                               no-repeat;
    --ux-background-attachment:                               fixed;
    --ux-background-position:                                center;
    --ux-background-size:                                 100% 100%;
    --ux-background-origin:                              border-box;
    --ux-text-color:                               rgba(0,224,35,1); /*#00d023;*/

    --ux-border-radius:                                     6px 6px;
}


:root {
    --shadow-unit:                                             1vh;
    --shadow-x:                                 var(--shadow-unit);
    --shadow-y:                                    var(--shadow-x);
    --animation-unit:                                         .08s;
}


:root {
    --header-font:                      var(--default-header-font);
    /* --header-text-color:                           rgba(127,0,0,1); */
    --article-font:                    var(--default-article-font);

    box-sizing: border-box;

   --screen-height: 100vh;
}

::marker {
   display: inline-table;
   vertical-align: top;
}

ul {
   list-style: square outside;
}

ul li {
   width:90%;
}

/* article {
          font-family: var(--article-font);
} */

.fixed {
                      position: fixed;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
           left: 0;        top: 0;
          width: 100vw; height: 100vh;
}

body {
     background-color: var(--document-background-color);
     background-image: var(--ux-background-image);
    background-repeat: var(--ux-background-repeat);
background-attachment: var(--ux-background-attachment);
  background-position: var(--ux-background-position);
      background-size: var(--ux-background-size);
    background-origin: var(--ux-background-origin);
          font-family: var(--article-font);
         font-size:smaller;
               border: 0;
               margin: 0;
              padding: 0;
                color: var(--default-article-text-color);
          /* text-shadow:  1px  0   var(--default-article-text-color-shade),
                          0  1px var(--default-article-text-color-shade),
                       -1px  0   var(--default-article-text-color-lit),
                          0 -1px var(--default-article-text-color-lit),
                        2px  0    4px #000,
                          0  2px  4px #000,
                       -2px  0    4px #000,
                          0 -2px  4px #000; */
          caret-color: yellow;
                /* width: 100%; */
}

html, body { height: var(--screen-height); }


.cursive {
   font-style: italic; font-family: rock-salt; 
   color: #f80;
          text-shadow:  1px  0   #432,
                          0  1px #432,
                       -1px  0   #fa6,
                          0 -1px #fa6,
                        2px  0    4px #000,
                          0  2px  4px #000,
                       -2px  0    4px #000,
                          0 -2px  4px #000;
}



.box-one {
                width: auto;
              padding: 4vmin;
               margin: 3vmin;
     background-color: rgba(192,64,128,0.67);
}

.box-two {
                width: auto;
              padding: 4vmin;
               margin: 3vmin;
     background-color: rgba(16,192,32,0.67);
}

/* p {
          line-height: 1.2em;
          text-indent: 0;
         word-spacing: 0.24em;
          margin-left: 1em;
} */


em {
          font-weight: bold;
           font-style: italic;
}

#rwrap { z-index: 5; }

.wrap {
   isolation: isolate;
     display: flex;
       width: 100vw;
      height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
        left: 0;
         top: 0;
    position: absolute;
     display: flex;
}
/* 
.animdefault {
transition: transform 2s;
transform-origin: bottom left;
transform: rotate(0deg);
}
.minadefault {
transition: transform 2s;
transform-origin: bottom left;
transform: rotate(-90deg);
}

.animin {
transition: transform 2s;
transform-origin: bottom left;
   transform: rotate(90deg);
}
.minani {
transition: transform 2s;
transform-origin: bottom left;
transform: rotate(0deg);
}
.in {
   transform: rotate(0deg);
}
.ni {
   transform: rotate(90deg);
}

.out {
transform:rotate(-90deg);
}
.tuo {
transform:rotate(0deg);
} */

.animdefaultrot { transform: rotateX(  0deg); }
.minadefaultrot { transform: rotateX(-90deg); }
.animinrot      { transform: rotateX( 90deg); }
.minanirot      { transform: rotateX(  0deg); }

.in {
transition: transform 1.5s;
transform-origin: bottom left;
transition-timing-function: cubic-bezier(.67,0,1,.67);
   transform: rotateX(0deg);
}

.ni {
transition: transform 1.5s;
transform-origin: bottom left;
transition-timing-function: cubic-bezier(0,.67,.67,1);
   transform: rotateX(90deg);
}

.out {
transition: transform 1.5s;
transform-origin: top left;
transition-timing-function: cubic-bezier(0,.67,.67,1);
transform:rotateX(-90deg);
}

.tuo {
transition: transform 1.5s;
transform-origin: top left;
transition-timing-function: cubic-bezier(.67,0,1,.67);
transform:rotateX(0deg);
}



#rwrap {
   z-index: 2;
}



.wrap > .L {
box-sizing: border-box;
    position: relative;
        flex: 1;
      height: 100%;
   min-width: 100%;
   max-width: 100%;
   font-size: 1.2em;
     z-index: 6;
}

.P {
transform: rotateY(var(--p));
transform-origin: 0 0;
}

.Q {
transform: rotateY(var(--q));
transform-origin: 100% 0;
}

.R {
      position: absolute;
           top: 0;
          left: 0px;
         width: 100%;
        height: 100%;
       z-index: 6;
  margin-left: 6px;
mix-blend-mode: screen;
}

.rarrow {
    position: absolute;
       right: 0;
      bottom: 0;
   font-size: 300%;
z-index:11;
}

.larrow {
    position: absolute;
        left: 0;
      bottom: 0;
   font-size: 300%;
z-index:11;
}

/* vertical screen */

img { width: 100; height: 100; }

@media (max-aspect-ratio:8/9) {

            .spectacles {
                        display: flex;
                 flex-direction: column;
            }

            .spectacle {
                     flex-basis:  18%;
                          width: 100%;
            }

            .spectacle2 {
                     flex-basis:  50%;
                         width:  100%;
            }

            .speccolors { position: absolute; width: 90%; margin-top: 2.5%; margin-left: 5%; }

            .specorder  { position: absolute; width: 90%;  margin-top: 50%; margin-left: 5%; }

            .popup:target+.modal {
                     top:  33%;
                  bottom:  33%;
                    left:  42%;
                   right:  42%;
            }
}




.specsbutton { position: fixed; width: 16vmin; height: 16vmin; bottom: 1vmin; right: 2.5vmin; }


#colors:target+.modal { visibility: visible; }
#order:target+.modal { visibility: visible; }
#policy.modal {
         transition: top 1.33s, bottom 1.33s, left .5s, right .55s;
         top:  20%;
      bottom:  20%;
        left:  33%;
       right:  33%;
}

#policy article {
      margin: 0;
    position: absolute;
         top: 50%;
        left: 50%;
       width: 100%;
   transform: translate(-50%,-50%);
}

#policy article p {
   position: relative;
      width: 80%;
     margin: 0 auto;
}

/* horizontal screen */
@media (min-aspect-ratio:9/8) {


                     .pull { display: block; position: absolute; right: 6.5cm; left: 0; margin:0; padding: 0; }
                     .rpull { display: block; position: absolute; right: 6.5cm; left: 6px; margin:0; padding: 0; }

               .spectacles {
                        display: flex;
                  flex-direction: row;
                  justify-content: center;
                     align-items: center;
               }

               .spectacle {
                        flex-basis: 18%;
                           height: 100%;
               }

               .spectacle2 {
                        flex-basis: 50%;
                           height: 100%;
               }

               .speccolors { position: absolute; width: 12%; margin-top: 10%; margin-left: 2.5%; }

               .specorder  { position: absolute; width: 40%;  margin: 5%; }

      .popup:target+.modal {
                     top:  42%;
                  bottom:  42%;
                    left:  33%;
                   right:  33%;
      }
}

a { }

a:link {
    text-decoration: underline;
              color: #7f8f30;
}

a:active { color: white; }

a:visited { color: #7f7f00; }

a:hover { color: #ffff7f; }

.alit + * { position: relative; }

.linkme { position: absolute; left: 0; top: 0; visibility: hidden; width: 3em; height: 3em; }

.alit + *:hover > .linkme { visibility: visible; }

.com {
          font-family: 'rock-salt';
             position: absolute;
                 left: 3vmin;
               bottom: 3vmin;
          text-shadow: none;
                color: transparent;
              z-index: 6;
               margin: 0;
              padding: 0;
               border: 0;
                width: 80vw;
              display: block;
font-size:x-large;
}



.com em {
            /* font-size: 4vmin; */
color:black;
            animation: exper 27.18281828s cubic-bezier(0,0.7,.9,1) infinite normal forwards running;
       letter-spacing: -0.7mm;
              z-index: 6;
                width: 80vw;
               margin: 0;
              padding: 0;
               border: 0;
}



.after {
             position: absolute;
 color: lightgray;
  left: 0;     margin: 0;
bottom: 0;    padding: 0;
right:0;
top:0;
               border: 0;
            /* font-size: 4vmin; */
       letter-spacing: -0.7mm;

          text-shadow: none;

           background: -webkit-gradient(linear,left top,left bottom,fromvar(--default-article-text-color-lit)),to(#000));
           background: -o-gradient(linear,left top,left bottom,from(var(--default-article-text-color-lit)),to(#000));
     background-image: linear-gradient(var(--default-article-text-color-lit), #000);
-webkit-background-clip: text;
      background-clip: text;
-webkit-text-fill-color: transparent;
      text-fill-color: transparent;
              z-index: 7;
         --mix-blend-mode: multiply;
            min-width: 80vw;
}

#logo {
   position: absolute;
   width: 25vmin;
   height: auto;
   bottom: 3mm;
   left: -4mm;
}

.marquis {
   position: absolute;
    display: block;
       left:  3vmin;
     bottom:  -3vmin;
      width: 25vmin;
     height:  7vmin;
   overflow: hidden;
z-index: 8;
font-size:larger;
}

.marquee {
             position: relative;
               bottom: 0;
                 left: 0;
                width: 57vmin;
          white-space: nowrap;
             overflow: visible;
              display: block;

            animation: scroll 16s steps(400) infinite normal forwards running;

          text-shadow: none;
                color:green;
       baseline-shift: -10%;

          font-weight: normal;
          font-family: 'advanced-led-board-7';
           font-style: normal;
            /* font-size: 24px; */
            /* font-size: 150%; */
              z-index: 5;
}


@keyframes scroll {
   0% { transform: translateX( 34vmin); }
 100% { transform: translateX(-100%); }
}

#policy:target {
   visibility: visible;
}

#policy.visible {
   visibility: visible;
}

.h1L {
font-size: 8mm;
               position: relative;
              /* font-size: 7mm; */
         letter-spacing: -0.75mm;
            font-family: 'rock-salt';
  background: none;
  /* z-index: 6; */
          text-shadow:  1px  0   var(--heading-text-color-shade),
                          0  1px var(--heading-text-color-shade),
                       -1px  0   var(--heading-text-color-lit),
                          0 -1px var(--heading-text-color-lit),
                        2px  0    4px #000,
                          0  2px  4px #000,
                       -2px  0    4px #000,
                          0 -2px  4px #000;
                  color: green;
}

/*border-bottom: 1px solid lightgray;/**/

.h1L:after {
  position: absolute;
  left: 0;
  top: 0;
  content: attr(data-text);
            text-shadow: none;
             background: -webkit-gradient(linear,left top,left bottom,from(var(--heading-text-color-lit)),to(#000));
             background: -o-gradient(linear,left top,left bottom,from(var(--heading-text-color-lit)),to(#000));
       background-image: linear-gradient(var(--heading-text-color-lit), #000);
-webkit-background-clip: text;
        background-clip: text;
-webkit-text-fill-color: transparent;
        text-fill-color: transparent;
}

::selection {
     /* background-color: var(--color-yellow-normal); */
}


.halfwidth {
            min-width: 400px;
            max-width: 400px;
}


.halfheight {
           min-height: 500px;
}


.js .cover {
              display: block;
             position: fixed;
                  top: 0;
                 left: 0;
                width: 100%;
               height: 100%;
     background-color: black;
              opacity: 1;
           transition: opacity .707s;
}


.draggable {
              display: block;
             position: relative;
               cursor: pointer;
}



aside.root {
    display: block;
    position: fixed;
    margin: 0;
    border: 0;
    padding: .5rem;
}

aside.context {
    display:  none;
    position: fixed;
    top:     0;
    bottom:  0;
    left:  10%;
    width: 10%;
    margin:  0;
    padding: .5rem;
    border:  0;
    background-color: rgba(0,0,0,.14);
}



@media (max-width: 92600px) {

   html { font-size: 19px; }
.cursive { line-height: 20px; }
.com em { font-size: 1.5em; }
}

@media (max-width: 1800px ) {

   html { font-size: 18px; }
.cursive { line-height: 19px; }
.com em { font-size: 1.4em; }

}

@media (max-width: 1600px ) {

   html { font-size: 17px; }
.cursive { line-height: 18px; }
.com em { font-size: 1.32em; }

}

@media (max-width: 1400px ) {

   html { font-size: 16px; }
.cursive { line-height: 17px; }
.com em { font-size: 1.25em; }

}

@media (max-width: 1200px ) {

   html { font-size: 15px; }
.cursive { line-height: 16px; }
.com em { font-size: 1.175em; }

}

@media (max-width: 925px ) {

   html { font-size: 14px; }
.cursive { line-height: 15px; }
.com em { font-size: 1.1em; }

}
@media (max-width: 775px ) {

   html { font-size: 13px; }
.cursive { line-height: 14px; }
.com em { font-size: 1em; }

}

.button {
   padding: 1.5vh;
   margin: 2vh;
   border:1px solid #aa8;
   background-color: #00500040;
   color: #000;
   float: right;
}

               body { padding: 0; margin: 0; border: 0; z-index: -1; overflow: hidden; }
           #canvas0 { padding: 0; margin: 0; border: 0; top:0; left:0; width: 100%; height: 110%; opacity: 1; z-index:  0; position: absolute; display: block; }
           #canvas1 { padding: 0; margin: 0; border: 0; top:0; left:0; width: 100%; height: 100%; opacity: 1; z-index: 50; position: absolute; display: block; }
                  p { display: block; margin: 0; padding: 0; margin-left: 2vw; color: var(--default-article-text-color); line-height: 1em; }
           div.wrap { z-index: 10; }
         .hcenter50 { display:block; margin-left: 20%; }
                 h1 { margin: 0; padding: 0; padding-bottom: 4mm; margin-left: 2vw; }
                 ul { display: block; margin-left: 2vw; }
           p.bottom { position: absolute; right: 4vmin; bottom: 7vmin; width: 6cm; margin-bottom: 7.5vmin; font-size: 66%; }
              label { width: 75%; }
           .vspaced { margin-top: 5vmin; }
          .anaglyph { display:block; position: fixed; width: 16vmin; height: 16vmin; bottom:0; right:0; z-index: 20; }
             #lwrap { isolation:isolated; z-index: 11; }
             #rwrap { isolation:isolated; }
                 h5 { margin: 0; padding: 0; margin-left: 4vmin; }
                 h3 { margin: 0 0 20px 0; padding: 0; margin-left: 4vmin; }
                pre { font-family: 'everson'; padding: 0; margin: 0; font-size:normal;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
                }
.comment {
   text-shadow: none;
   font-size: 77%;
}
                  p { font-size:normal; }
           .example { background: rgba(39,39,39,.5); overflow:auto; font-size: smaller; text-shadow: none; }
           .output  { background: rgba(39,39,39,.5); overflow:auto; font-size: smaller; text-shadow: none; }
@media (min-aspect-ratio:9/8) {
.columns {
   column-count: 2;
   height: 80vh;
}
           .example { border: solid gray; border-width:.1em .1em .1em .8em; padding: .2em .6em; }
           .output  { border: solid gray; border-width:.1em .1em .1em .8em; padding: .2em .6em; }
             .odd   { width: 50%; position: absolute; left: 0; }
             .even  { width: 50%; position: absolute; left: 50%; }
                pre { margin-left: 4vmin; width: calc(44vw + 4.3vmin); }
                  p { width: 44vw; margin-left:4vmin; margin-bottom: 1vh; padding-left: 4.3vmin; }
  article section p { width: 44vw; margin-left:4vmin; margin-bottom: 1vh; padding: 0; }
             .upper { top: 15vmin; }
               .top { top: 3vmin; }
              :root { --vertical: hidden; }
              .alit { position: relative; display:block; width: 50vw; }
}
@media (max-aspect-ratio:8/9) {
           .example { width: 100vw; }
           .output  { width: 100vw; }
             .odd   { width: 100vw; position: absolute; left: 0; }
             .even  { width: 100vw; position: absolute; left: 100vw; }
                pre { margin-left: 4vmin; width: 94.3vw; }
                  p { width: 90vw; margin: 0 0 1vmin 4vmin; padding-left:4.3vmin; }
  article section p { width: 90vw; margin: 0 0 1vmin 4vmin; padding:0; }
                 li { width: 90vw; }
         .wrap > .L { width:200vw; max-width: 200vw; min-width: 200vw; }
             .upper { top: 19vmin; }
               .top { top: 3vmin; }
              :root { --vertical: visible; }
              .alit { position: relative; display:block; width: 100vw; }
}
                 h2 { position: relative; margin: 1vmin 4vmin; }
             .lower { bottom: 0; }
            .middle { bottom: 49%; }



.alit:target + * {
   background-color: #ffffff3f;
}

.alit.target + * {
   background-color: #ffffff3f;
}

article > header {
    z-index: 1;
}

@keyframes exper {

    0% {
        text-shadow:-2px -2px 3px rgba(255,0,0,.5),
                    -2px  2px 3px rgba(255,0,0,.5),
                     2px -2px 3px rgba(255,0,0,.5),
                     2px  2px 3px rgba(255,0,0,.5);
    }

    5% {
        text-shadow:-2px -2px 3px rgba(255,0,0,.5),
                    -2px  2px 3px rgba(255,0,0,.5),
                     2px -2px 3px rgba(255,0,0,.5),
                     2px  2px 3px rgba(0,0,255,.5);
    }

    10% {
        text-shadow:-2px -2px 3px rgba(255,0,0,.5),
                    -2px  2px 3px rgba(255,0,0,.5),
                     2px -2px 3px rgba(0,0,255,.5),
                     2px  2px 3px rgba(0,0,255,.5);
    }

    15% {
        text-shadow:-2px -2px 3px rgba(255,0,0,.5),
                    -2px  2px 3px rgba(0,0,255,.5),
                     2px -2px 3px rgba(0,0,255,.5),
                     2px  2px 3px rgba(0,0,255,.5);
    }

    20% {
        text-shadow:-2px -2px 3px rgba(0,0,255,.5),
                    -2px  2px 3px rgba(0,0,255,.5),
                     2px -2px 3px rgba(0,0,255,.5),
                     2px  2px 3px rgba(0,0,255,.5);
    }

    25% {
        text-shadow:-2px -2px 3px rgba(0,255,0,.5),
                    -2px  2px 3px rgba(0,0,255,.5),
                     2px -2px 3px rgba(0,0,255,.5),
                     2px  2px 3px rgba(0,0,255,.5);
    }

    30% {
        text-shadow:-2px -2px 3px rgba(0,255,0,.5),
                    -2px  2px 3px rgba(0,255,0,.5),
                     2px -2px 3px rgba(0,0,255,.5),
                     2px  2px 3px rgba(0,0,255,.5);
    }

    35% {
        text-shadow:-2px -2px 3px rgba(0,255,0,.5),
                    -2px  2px 3px rgba(0,255,0,.5),
                     2px -2px 3px rgba(0,255,0,.5),
                     2px  2px 3px rgba(0,0,255,.5);
    }

    40% {
        text-shadow:-2px -2px 3px rgba(0,255,0,.5),
                    -2px  2px 3px rgba(0,255,0,.5),
                     2px -2px 3px rgba(255,255,0,.5),
                     2px  2px 3px rgba(0,255,0,.5);
    }

    45% {
        text-shadow:-2px -2px 3px rgba(0,255,0,.5),
                    -2px  2px 3px rgba(255,255,0,.5),
                     2px -2px 3px rgba(255,255,0,.5),
                     2px  2px 3px rgba(0,255,0,.5);
    }

    50% {
        text-shadow:-2px -2px 3px rgba(255,255,0,.5),
                    -2px  2px 3px rgba(255,255,0,.5),
                     2px -2px 3px rgba(255,255,0,.5),
                     2px  2px 3px rgba(0,255,0,.5);
    }

    55% {
        text-shadow:-2px -2px 3px rgba(255,255,0,.5),
                    -2px  2px 3px rgba(255,255,0,.5),
                     2px -2px 3px rgba(255,255,0,.5),
                     2px  2px 3px rgba(255,255,0,.5);
    }

    60% {
        text-shadow:-2px -2px 3px rgba(255,0,255,.5),
                    -2px  2px 3px rgba(255,255,0,.5),
                     2px -2px 3px rgba(255,255,0,.5),
                     2px  2px 3px rgba(255,255,0,.5);
    }

    70% {
        text-shadow:-2px -2px 3px rgba(255,0,255,.5),
                    -2px  2px 3px rgba(255,0,255,.5),
                     2px -2px 3px rgba(255,255,0,.5),
                     2px  2px 3px rgba(255,255,0,.5);
    }

    75% {
        text-shadow:-2px -2px 3px rgba(255,0,255,.5),
                    -2px  2px 3px rgba(255,0,255,.5),
                     2px -2px 3px rgba(255,0,255,.5),
                     2px  2px 3px rgba(255,255,0,.5);
    }

    80% {
        text-shadow:-2px -2px 3px rgba(255,0,255,.5),
                    -2px  2px 3px rgba(255,0,255,.5),
                     2px -2px 3px rgba(255,0,255,.5),
                     2px  2px 3px rgba(255,0,255,.5);
    }

    85% {
        text-shadow:-2px -2px 3px rgba(255,0,255,.5),
                    -2px  2px 3px rgba(255,0,0,.5),
                     2px -2px 3px rgba(255,0,255,.5),
                     2px  2px 3px rgba(255,0,255,.5);
    }

    90% {
        text-shadow:-2px -2px 3px rgba(255,0,255,.5),
                    -2px  2px 3px rgba(255,0,0,.5),
                     2px -2px 3px rgba(255,0,0,.5),
                     2px  2px 3px rgba(255,0,255,.5);
    }

    90% {
        text-shadow:-2px -2px 3px rgba(255,0,255,.5),
                    -2px  2px 3px rgba(255,0,0,.5),
                     2px -2px 3px rgba(255,0,0,.5),
                     2px  2px 3px rgba(255,0,0,.5);
    }

   100% {
        text-shadow:-2px -2px 3px rgba(255,0,0,.5),
                    -2px  2px 3px rgba(255,0,0,.5),
                     2px -2px 3px rgba(255,0,0,.5),
                     2px  2px 3px rgba(255,0,0,.5);
    }

}

.smooth {
         transition: bottom var(--animation-unit) cubic-bezier(0,.15,.85,1) .0s;
}