@font-face {
    font-family: "BrainyfontOne";
    src: url("../fonts/BrainyfontOne-Regular.otf");
    font-display: swap;
}
:root {
    --greenbt: #00d67a;
    --cyanbt: #0e7cd0;
    --bluebt: #2020d8;
    --purplebt: #6612d5;
    --magentabt: #d100d1;
    --darkbluebt: #000015;
    --lightbluebt: #FAFAFF;
    --mtogbt: linear-gradient(135deg, var(--magentabt) 5%, var(--purplebt) 25%, var(--bluebt) 45%, var(--bluebt) 55%, var(--cyanbt) 75%, var(--greenbt) 95%);
}
header, footer, main {
    display: block;
}
body,
.ssfont {
    font-family: Verdana, sans-serif;
}
.btfont {
    font-family: 'BrainyfontOne', cursive;
	text-transform: uppercase;
}
.fstitle {
	font-size: 2.65rem !important;
}
a,
a:hover,
a:focus,
a:visited,
a:active,
a.active,
input,
button,
svg{
    transition: all 0.5s !important;
    text-decoration: none;
}
.boxshad {
    box-shadow: 0 0.5rem 0.25rem var(--darkbluebt), inset 0 0 0 var(--darkbluebt);
    border: solid 0.25rem transparent;
}
.bgmtog {
    background-image: var(--mtogbt);
    background-size: 400%;
    background-position: 50% 50%;
    -webkit-animation: slidebg 10s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
    animation: slidebg 10s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
}
.textblue {
    color: var(--bluebt);
}
.textgreen {
    color: var(--greenbt);
}
.textmagenta {
    color: var(--magentabt);
}
.textcyan {
    color: var(--cyanbt);
}
.textpurple {
    color: var(--purplebt);
}
.textdarkblue {
    color: var(--darkbluebt);
}
.textlightblue {
    color: var(--lightbluebt);
}
.bgblue {
    background-color: var(--bluebt);
    color: var(--lightbluebt);
}
.bggreen {
    background-color: var(--greenbt);
    color: var(--darkbluebt);
}
.bgmagenta {
    background-color: var(--magentabt);
    color: var(--lightbluebt);
}
.bgcyan {
    background-color: var(--cyanbt);
    color: var(--darkbluebt);
}
.bgpurple {
    background-color: var(--purplebt);
    color: var(--lightbluebt);
}
.bgdarkblue {
    background-color: var(--darkbluebt);
    color: var(--lightbluebt);
}
.bglightblue {
    background-color: var(--lightbluebt);
    color: var(--darkbluebt);
}
.bgmtop {
    background-image: linear-gradient(135deg, var(--magentabt) 5%, var(--purplebt) 95%);
    color: var(--lightbluebt);
}
.bgptom {
    background-image: linear-gradient(135deg, var(--purplebt) 5%, var(--magentabt) 95%);
    color: var(--lightbluebt);
}
.bgptob {
    background-image: linear-gradient(135deg, var(--purplebt) 5%, var(--bluebt) 95%);
    color: var(--lightbluebt);
}
.bgptoc {
    background-image: linear-gradient(135deg, var(--purplebt) 5%, var(--bluebt) 50%, var(--cyanbt) 95%);
    color: var(--lightbluebt);
}
.bgctop {
    background-image: linear-gradient(135deg, var(--cyanbt) 5%, var(--bluebt) 50%, var(--purplebt) 95%);
    color: var(--lightbluebt);
}
.bgbtoc {
    background-image: linear-gradient(135deg, var(--bluebt) 5%, var(--cyanbt) 95%);
    color: var(--lightbluebt);
}
.bgctog {
    background-image: linear-gradient(135deg, var(--cyanbt) 5%, var(--greenbt) 95%);
    color: var(--lightbluebt);
}
.bggtoc {
    background-image: linear-gradient(135deg, var(--greenbt) 5%, var(--cyanbt) 95%);
    color: var(--lightbluebt);
}
.borderblue {
    border-color: var(--bluebt) !important;
}
.bordergreen {
    border-color: var(--greenbt) !important;
}
.bordermagenta {
    border-color: var(--magentabt) !important;
}
.bordercyan {
    border-color: var(--cyanbt) !important;
}
.borderpurple {
    border-color: var(--purplebt) !important;
}
.borderlightblue {
    border-color: var(--lightbluebt) !important;
}
.borderdarkblue {
    border-color: var(--darkbluebt) !important;
}
.grayscale-hover {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}
.grayscale-hover:hover {
    filter: grayscale(0%);
}
.btn.bgmtog {
    border: solid 0.25rem var(--lightbluebt);
    box-shadow: 0 0.5rem 0.25rem var(--darkbluebt), inset 0 0 0 var(--darkbluebt);
}
.card.bglightblue .btn.bgmtog {
    border: none;
    animation-direction: alternate-reverse;
}
.btn.bgmtog:hover {
    background-size: 200%;
    color: var(--lightbluebt);
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    box-shadow: 0 0 0 var(--darkbluebt), inset 0 0.5rem 0.25rem var(--darkbluebt);
}
.btn.bglightblue.boxshad:hover {
    background-color: transparent !important;
    border-color: var(--lightbluebt);
    color: var(--lightbluebt);
    box-shadow: 0 0 0 var(--darkbluebt), inset 0 0.5rem 0.25rem var(--darkbluebt);
    text-shadow: 2px 2px 4px var(--darkbluebt);
}
#btnav {
    transition: all 0.5s;
    background-color: #00001599;
    box-shadow: 0 .5rem 1rem #FAFAFF66;
}
#btnav.btnav-min,
#btnav.active {
    background-color: var(--darkbluebt);
}
#toggler,
#toggler:focus{
    box-shadow: none;
    border: none;
}
.ham {
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
}
#btnav.active #toggler .hamRotate {
    transform: rotate(45deg);
}
.line {
    fill:none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: var(--lightbluebt);
    stroke-width:5.5;
    stroke-linecap:round;
}
.ham .top {
    stroke-dasharray: 40 160;
}
.ham .middle {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform 400ms;
}
.ham .bottom {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform 400ms, stroke-dashoffset 400ms;
}
#btnav.active #toggler .ham .top {
    stroke-dashoffset: -64px;
}
#btnav.active #toggler .ham .middle {
    transform: rotate(90deg);
}
#btnav.active #toggler .ham .bottom {
    stroke-dashoffset: -64px;
}
#btnav a.nav-link:focus, #btmenu a.nav-link:hover {
    color: var(--lightbluebt);
}
.text-justify {
    text-align: justify;
}
.waves-top {
    margin-bottom: -2px;
}
.waves-bottom {
    margin-top: -2px;
}
.zi-2 {
    z-index: 2;
}
.zi-3 {
    z-index: 3;
}
.textshad {
    text-shadow: 2px 2px 4px var(--darkbluebt);
}
.c {
	fill: url(#b);
}
.f {
    fill: url(#e);
}
svg {
    -webkit-filter: drop-shadow(2px 2px 2px var(--darkbluebt));
    filter: drop-shadow(2px 2px 2px var(--darkbluebt));
}
svg.waves-bottom, svg.waves-top {
    -webkit-filter: none;
    filter: none;
}
.bgmtog svg #logoheading {
    stroke:#fff;
    fill-opacity:1;
    stroke-width:8;
    stroke-opacity:0;
    stroke-linecap:round;
    stroke-linejoin: round;
    stroke-dasharray:2400;
    stroke-dashoffset:0;
    -webkit-animation:fillsvg 5s ease-in-out 2.5s alternate-reverse infinite;
    animation:fillsvg 5s ease-in-out 2.5s alternate-reverse infinite;
}
.slide-in {
    transform: translateY(100px);
    transition: transform 0.5s ease-out;
}
.slide-in.visible {
    transform: translateY(0);
}
.slide-in.visible:hover {
    transform: translateY(-10px);
}
.flip-card {
    perspective: 1000px;
}
.flip-card-inner {
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-back {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}
@-webkit-keyframes slidebg {
    0% {background-position: 50% 50%;}
    25% {background-position: 100% 100%;}
    50% {background-position: 50% 50%;}
    75% {background-position: 0% 0%;}
    100% {background-position: 50% 50%;}
}
@keyframes slidebg {
    0% {background-position: 50% 50%;}
    25% {background-position: 100% 100%;}
    50% {background-position: 50% 50%;}
    75% {background-position: 0% 0%;}
    100% {background-position: 50% 50%;}
}
@-webkit-keyframes fillsvg{
    0% {stroke-dashoffset:2400;fill-opacity:0;stroke-opacity:1;}
    35% {stroke-dashoffset:0;fill-opacity:0;stroke-opacity:1;}
    50% {stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0;}
    65%, 100% {stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0;}
}
@keyframes fillsvg{
    0% {stroke-dashoffset:2400;fill-opacity:0;stroke-opacity:1;}
    35% {stroke-dashoffset:0;fill-opacity:0;stroke-opacity:1;}
    50% {stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0;}
    65%, 100% {stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0;}
}