:root
{
   --Bronze: #cd7f32;
   --EmeraldGreen: #009B77;
   --LogoBlue: #53c9e9;
   --MatrixGreen: #92d490;
   --RichBlack: #010203;
   --Ruby: #e0115f;
   --Sapphire: #0f52ba;
   --Silver: #c0c0c0;
}
@font-face{font-family:AryaDouble;src:url(https://vizability.ca/Images/Matrix.TTF);}
@keyframes BannerSlide
{
   0%
   {
      transform: translate(-100%, -100%);
      opacity: 0;
   }
   100%
   {
      transform: translate(0, 0);
      opacity: 1;
   }
}
@keyframes TabThrow
{
   0%
   {
      transform: rotate(0) translate(0, 0);
      opacity: 0;
   }
   50%
   {
      transform: rotate(720deg) translate(var(--x), var(--y));
      opacity: 1;
   }
   100%
   {
      transform: rotate(0) translate(0, 0);
      opacity: 1;
   }
}
@keyframes tongue{0%{height:0;}5%{height:130px;}10%{height:130px;}25%{height:0;}100%{height:0;}}
@media screen and (orientation:landscape){.SectionImage{width:25%;}}
@media screen and (orientation:portrait){.SectionImage{width:40%;}}
@media (min-width:768px){body{font-size:1rem;}button,a.button{font-size:1rem;padding:0.5em 1em;}}
@media (min-width:1024px){h1{font-size:2rem;}h2{font-size:1.75rem;}h3{font-size:1.5rem;}}
@keyframes BackgroundScroll{0%{background-position: 0 0;}100%{background-position: 0 100%;}}
*{box-sizing:border-box;text-align:center;}
a{color:darkblue;white-space:pre-wrap;}
body
{
   background-color: var(--LogoBlue);
   background-image: linear-gradient(var(--LogoBlue) 0%, var(--MatrixGreen) 25%, var(--LogoBlue) 50%, var(--MatrixGreen) 75%, var(--LogoBlue) 100%);
   background-size: 100% 200%;
   background-repeat: repeat-y;
   background-position: 0 0;
   animation: BackgroundScroll 60s linear infinite; /* Shorthand for animation properties */
   color: var(--RichBlack);
   font-family: Arial, Helvetica, sans-serif;
   border: 3em solid darkblue;
   border-image-source: url(https://vizability.ca/Images/border.jpg);
   border-image-slice: 33%;
   border-image-width: 3em;
   border-image-repeat: repeat;
}
button,
a.button{font-size:1.125rem;padding:0.75em 1.25em;min-height:3rem;}
form{background-color:var(--LogoBlue);text-align:left;padding:1em;}
h1{color:royalblue;}
h2{color:var(--EmeraldGreen);}
h3{color:mediumseagreen;}
img{width:100%;}
img.Icon{height:32px;width:auto;}
input{margin:0.25em;}
input[type=textarea]{width:100%;height:20em;}
li{padding:0.5em;text-align:left;}
main{padding:1em;}
nav{background-image:linear-gradient(var(--LogoBlue) 0%,var(--LogoBlue) 90%,var(--RichBlack) 100%);padding:1em;width:100%;}
ol, ul{background-color:var(--LogoBlue);text-align:left;margin-top:1em;padding:1em;} /* Combined ol and ul */
p{text-align:left;}
.FooterHeading{color:var(--RichBlack);}
.FooterLink{margin:0.5em;white-space:nowrap;}
.Matrix{display:inline-block;color:royalblue;}
.Matrix::first-letter{color:var(--MatrixGreen);font-family:AryaDouble,Arial,Helvetica,sans-serif;background-color:var(--RichBlack);}
.SectionImage{float:right;margin-left:2em;}
.Shiny
{
   background-image: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: transparent;
}
button.Tabs
{
   all: unset;
   display: inline-block;
   background-color: var(--RichBlack);
   color: var(--LogoBlue);
   border-radius: 50%;
   height: 2em;
   width: 18%;
   margin-left: 1%;
   margin-right: 1%;
   box-shadow: 0 0 0.25em var(--RichBlack);
   position: relative;
   opacity: 0;
   animation-duration: 3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
#Banner{width:100%;animation:BannerSlide 1.5s ease-out forwards;}
#Tab1{--x:-50px;--y:100px;animation-name:TabThrow;animation-delay:0.2s;}
#Tab5{--x:80px;--y:150px;animation-name:TabThrow;animation-delay:0.5s;}
#Tab2{--x:-120px;--y:-200px;animation-name:TabThrow;animation-delay:0.8s;}
#Tab4{--x:90px;--y:-100px;animation-name:TabThrow;animation-delay:1.1s;}
#Tab3{--x:0px;--y:-250px;animation-name:TabThrow;animation-delay:1.4s;}
#TabBar{width:100%;}
[aria-selected='true']{color:var(--RichBlack);background-color:var(--LogoBlue);box-shadow:0 0 0.4em var(--LogoBlue);}
.container{background-color:#fff29e;height:400px;width:400px;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}
.face{background-color:#8ebc00;height:120px;width:160px;border-radius:50%;position:absolute;margin:auto;left:0;right:0;top:100px;}
.tongue{position:absolute;height:0;width:8px;background-color:#f57b78;border-radius:8px;transform:rotate(-45deg);transform-origin:100% 100%;bottom:65px;left:70px;animation:tongue 3s linear infinite;}