:root
{
   --Magenta: #9259a0;
   --LightBlue: #e8f4f6;
   --MatrixGreen: #92d490;
   --RichBlack: #010203;
}
@font-face
{
   font-family: AryaDouble;
   src: url(https://vizability.ca/Images/Matrix.TTF);
}
@keyframes BannerPop
{
   0%
   {
      transform: scale(0);
      opacity: 0;
   }
   70%
   {
      transform: scale(1.05); /* Slight overshoot for a bouncy effect */
      opacity: 1;
   }
   100%
   {
      transform: scale(1);
      opacity: 1;
   }
}
@keyframes TabFloatUp
{
   0%
   {
      transform: translateY(100px); /* Start from below */
      opacity: 0;
   }
   100%
   {
      transform: translateY(0);
      opacity: 1;
   }
}
@media screen and (orientation:landscape)
{
   .Certification
   {
      display: inline-block;
      width: 25%;
      padding: 1em 2em;
   }
   #ProfilePic
   {
      width: 15%;
      float: left;
      margin-bottom: 0em;
      margin-right: 2em;
   }
}
@media screen and (orientation:portrait)
{
   .Certification
   {
      display: inline-block;
      width: 50%;
      padding: 1em 0.5em;
   }
   #ProfilePic
   {
      width: 100%;
      margin-bottom: 1em;
   }
}
*{box-sizing:border-box;text-align:center;}
a{color:darkblue;padding:0.5em;white-space:pre-wrap;}
body
{
   background-color: var(--LightBlue);
   color: var(--RichBlack);
   font-family: Arial, Helvetica, sans-serif;
   border: 3em ridge var(--Magenta);
   padding: 1em;
}
button{height:24px;padding-top:0.25em;}
form{background-color:var(--Magenta);text-align:left;padding:1em;}
img{width:100%;}
img.Icon{height:32px;width:auto;}
input{margin:0.25em;}
li{padding:0.5em;text-align:left;}
nav{background-color:turquoise;margin-bottom:1em;margin-top:1em;padding:1em;}
ol, ul{background-color:var(--Magenta);text-align:left;margin-top:1em;padding:1em;}
p{text-align:left;}
.CertImg{border:0.5em ridge turquoise;}
.FooterHeading{color:var(--RichBlack);}
.FooterLink{padding:0.5em;white-space:nowrap;}
.InnerContent{background-color:turquoise;padding:0.5em;margin-bottom:0.5em;margin-top:0.5em;}
.Matrix{display:inline-block;color:royalblue;}
.Matrix::first-letter{color:var(--MatrixGreen);font-family:AryaDouble,Arial,Helvetica,sans-serif;background-color:var(--RichBlack);}
.SectionContent{background-color:var(--Magenta);padding:1em;}
.UpdateBookingForm{background-color:turquoise;padding:0.5em;margin-bottom:0.5em;margin-top:0.5em;display:none;}
button.Tabs
{
   all: unset;
   display: inline-block;
   background-color: var(--RichBlack);
   color: var(--Magenta);
   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: 1s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
#BannerLogo{width:calc(100% + 2em);margin-top:-1em;margin-left:-1em;margin-right:-1em;animation:BannerPop 1.5s ease-out forwards;}
#ProfilePic{border:0.5em ridge var(--LightBlue);}
#Tab1{animation-name:TabFloatUp;animation-delay:0.2s;}
#Tab2{animation-name:TabFloatUp;animation-delay:0.4s;}
#Tab3{animation-name:TabFloatUp;animation-delay:0.6s;}
#Tab4{animation-name:TabFloatUp;animation-delay:0.8s;}
#TabBar{width:100%;}
[aria-selected='true']{color:var(--RichBlack);background-color:var(--Magenta);box-shadow:0 0 0.4em var(--Magenta);}