/** Fonts **/
/** Inter, Space Grotesk, Urbanist **/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/** Oswald **/
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&family=Oswald:wght@200..700&display=swap');

/** League Gothic **/
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

/** Poppins **/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/** Public Sans **/
@font-face {
 font-family: 'PublicSans';
  src: url('../fonts/PublicSans-Regular.otf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/** Bootstrap Icons **/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/** Text Selection Color **/
::-moz-selection { /* Code for Firefox */
  color:#ff6464;
  background:#feffc9;
}

::selection {
  color:#ff6464;
  background:#feffc9;
}

/** All Elements **/
*{padding:0; margin:0; font-family:"PublicSans"; box-sizing:border-box;}
a:hover{text-decoration:none !important; color:var(--accent) !important;
 text-shadow:0 0 40px var(--shadow);}
body{position: relative; overflow-x:hidden;}

/** Declared Variables **/
:root{
 --primary:#0c0c0c;
 --secondary:#f5f5f5;
 --accent:#faff00;
 --shadow:#FFFF00;
 --background:#131313;
 --heading:'League Gothic', halvetica, arial, "opan sans";
 --secondary-heading: Poppins, halvetica, arial, "opan sans";
 --text-default: Inter, halvetica, arial, "opan sans";
 --fs-h1:10vw;
 --fs-h2:6vw;
 --neon-shadow:0 0 40px var(--shadow);
 --accent-shadow:#faff00db;
 --grey:#696161;
}

/** Pre-Defined Classes **/
.ff-head{font-family: var(--heading);}
.ff-sec{font-family:poppins;}
.ff-text{font-family: var(--text-default);}
.w-100{width:100%;}
.trans-4s{transition:.4s ease all;}
.h1{font-weight: 800; font-size:10vw; text-transform:uppercase;}
.fs-h1{font-size:var(--fs-h1);}
.fs-h2{font-size:var(--fs-h2);}
.fs-h3{font-size:4vw;}
.fs-h4{font-size:6vw;}
.fw-bold{font-weight:bold;}
.tt-uper{text-transform:uppercase;}
.neon-shadow{text-shadow:var(--neon-shadow);}
.acme-fs2{color:var(--accent); font-weight: 900; line-height:1.2em; font-size:8vw; font-family:var(--heading); letter-spacing:4px; text-transform:uppercase;}
/** Responsible Navigation 992px **/
@media screen and (min-width: 992px) {
  .h1{font-size:7.2vw;}
 }
 
.h2{font-size:3.6vw; letter-spacing:1.2px; line-height:1em; font-weight:500;}
.acme{color:var(--accent); font-weight: 600;}
.acme-black{color:var(--primary); text-transform:uppercase; font-weight:800;}


/** All Images **/
img{width:100%; height:100%;}

/** Header section **/
header{width:100%; }

/** Navigation Section **/
#top-nav{height:60px; width:100%; padding:0; display:flex; justify-content:end; align-items: start; position:fixed;}

/** Responsible Navigation 992px **/
@media screen and (max-width: 992px) {
 #top-nav{height:60px; width:100%;}
}

/** Responsible Navigation 600px **/
@media screen and (max-width: 600px) {
  #top-nav{height:60px; width:90vw;}
 }
 

/** Brand Logo **/
#top-nav a > img{width:60px; height:60px;}

/** Nav Links Container **/
.nav-links{width:fit-content; display:flex; justify-content:end; gap:2em; font-size:large; background:rgb(37, 36, 36); padding:.4em .6em;}
.nav-links > button > .bi-list{font-size:1.2em;}

/** Nav Links Container **/
.nav-links a{text-decoration:none; color:var(--primary); position:relative;}
.nav-links a::before{
 position: absolute; content:""; width:0%; height:10%; 
 background-color:white; top:100%; transition:.1s ease all;
}
.nav-links a:hover::before{
 position: absolute; content:""; width:100%; height:10%; 
 background-color:white; top:100%;
 box-shadow: 0px 4px 18px 1px var(--accent-shadow);
}

/** offCanvas **/
/* Customize the offcanvas styles here */

/** open-offcanvas button **/
#open-offcanvas{
 background:none; border:none; color:var(--accent);
 font-size:xx-large; cursor:pointer;  text-shadow: 0px 4px 18px 1px #ccff00;

}

.offcanvas {
  position: absolute; top: 0; right: 0; width: 74vw; height: 70vh;
  background-color: rgb(231, 229, 229); padding: 20px; z-index:1000;
  border: 1px solid #ddd; border-bottom-left-radius:0px;
  transform: translate(100%, -100%);
  transition: all 0.3s ease-in-out;
}

.offcanvas.show {
  transform: translateX(0);
  border-bottom-left-radius:200px; z-index: 999;
}

.offcanvas-header {
  height:fit-content;
  color: #fff;
  padding: 10px;
}

.offcanvas-title {
  font-weight: bold;
}

.offcanvas-body {
  padding: 20px; z-index:999;
}

.close-btn {
  position: absolute; top: 20px; right: 20px;
  font-size: 18px; cursor: pointer; background:none; 
  border:none; 
}

/** Fixed Logo **/
.fixed-logo{position: fixed; bottom:2em; right:2.4em; width:4em;}
.fixed-logo > img{filter: opacity(0.56);}

/** Hero Section Starting With Container **/
#hero-section{
  width:100%; height:100vh; background:var(--background);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
}

#hero-section p{
  width:100%; font-size:2.5em; color:var(--secondary);
  margin: 0; padding:0; text-align:center; line-height:1.8em;
}

.hero-container{
 width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:46px;
 margin-top:-1em;
}
/**
#label{
 position:relative; z-index:1; transition:.4s ease all;
}

#label::after{
 position:absolute; content:''; width:0px; height:200px; top:-80%; left:-20%;
 background-image:url('../img/background.jpg'); background-size:contain;
 background-repeat:no-repeat; background-blend-mode:color-burn; border-radius:50%;
 z-index:-1; transition:.4s ease all;
}

#label:hover::after{
 width:200px;
}
**/
/** CSS for hero-start-switch **/
/* The switch - the box around the slider */
.switch {
    font-size: 40px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em; z-index:0;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border: 2px solid #414141;
    border-radius: 73px;
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    left: 0.2em;
    bottom: 0.26em;
    background-color: #414141;
    border-radius: inherit;
    transition: all .4s cubic-bezier(0.23, 1, 0.320, 1);
  }

  .slider:hover {
    box-shadow: 0 0 240px var(--shadow);
    border: 2px solid var(--shadow);
  }
  
  .slider:hover.slider:before {
    background-color: var(--shadow);
    border-radius: inherit;
    transition: all .2s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  .switch input:checked + .slider {
    box-shadow: 0 0 20px var(--shadow);
    border: 2px solid var(--shadow);
  }
  
  .switch input:checked + .slider:before {
    transform: translateX(1.5em);
    background-color:var(--shadow);
  }

/** Second Hero Container **/
#hero-land{width:100%; height:100vh; background:var(--secondary); position:relative; z-index:-1;}

/** Hero Tagline **/
.hero-tag{width:92vw; padding:2em;}

.hero-tag h1{line-height:1.2em; letter-spacing:1px;}

/** Heart Animation **/
.heart{width:100px; height:100px; margin-left:20px;
  animation: heartbeat 2s infinite;}
@keyframes heartbet
{
0%{transform: scale( .75 );}
50%{transform: scale( 1 );}
100%{transform: scale( .75 );}
}

/** Hero Promotional Text **/
.hero-promo{
 background:url('../img/meditating.svg'); width:92vw; height:100%; animation-name:bounce; 
 background-size:400px; background-repeat:no-repeat;
}
/** Promo-Animation Text **/
.type-container{width:72vh;}
.type-span {
  border-right: .05em solid; 
  animation: caret 1s steps(1) infinite;
}
.typewrite{
 font-size:8vw;
 font-family:var(--heading); letter-spacing:4px; color:#989898; 
 position:relative; left:-100px; top:38vh; transform:rotate(270deg);
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

/** Responsive Second Hero Container 600px **/
@media screen and (min-width: 600px) {
  #hero-land{display:flex; flex-wrap:nowrap; }
  .hero-tag{width:40vw; padding:1.2em  3em; line-height:6.5em; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center;}
  /** Hero Promotional Text **/
  .hero-promo{width:70vw; height:100%;
  background-position:28vw 36vh; background-size:500px; background-repeat:no-repeat;
  /**animation-name:bounce;
  animation-duration:2s;
  animation-timing-function:ease;
  animation-iteration-count:infinite;**/
  }
}

/** Our Services **/
#our-services{
 width:100%; height:auto; display:flex; flex-wrap:wrap; justify-content:center;
 align-items:baseline; background:var(--background); 
}
/** Service Card Individual **/
.service-card{width:33.33%; height: 460px; padding:3.4em 4em 8em 4em; position:static; display:flex; flex-wrap:wrap; align-items:center; justify-content:start; z-index:10;}
.service-card:hover{background:var(--accent); padding:3.4em 2.4em 8em 2.4em; z-index:10;}
.service-card:hover .service-heading{color:var(--primary);}
.service-card:hover .service-text{opacity:1; bottom:.3em; color:var(--primary);}
.service-card:hover .service-img{opacity:1; top:.3em;}

/** Service Image **/
.service-card .service-img{width:80px; height:80px; opacity:0; position: relative; top:5em; right:10em; flex:100%; text-align:start; z-index: 0;}
/** Service Heading **/
.service-card .service-heading{color:#696161; margin:1.2em 0;}
/** Service Text **/
.service-card .service-text{opacity:0; position:relative; bottom:6em; right:0em; flex:100%;}
.service-card .service-text > img{color:white;}

.service-card .service-text ul li{list-style-type: none; line-height:1.8em;}

/** Responsive Our Services 600px **/


/** Tools Section **/
#tools-container{
 width:100%; height:fit-content; background:var(--secondary); border-bottom:2px solid black;
}

/** Heading **/
.tools-h{width:100%; background:var(--secondary); padding:.34em; text-align:center; font-size:x-large;}

/** tools-logo-container **/
.tools-logo-container{width:100%; height:fit-content; display:flex; overflow-x:auto;}

/** Tools Logo Items **/
.tools-logo-container > img{width:300px; height:160px;}


/** Domain We Work In Section **/
#domain{width:100%; height:90vh; display:flex; flex-direction:row-reverse;  flex-wrap:wrap; align-items:center; position: relative; }
/** Main Domain Content **/
.domain-content{width:100%; height:100%; flex:60%; background-color:var(--primary);}

/** Onion Doodle in Domain Section **/
.bg-domain{position:relative; width:340px; height:340px; bottom:46vh; right:-34vw; transform:rotateY(180deg);}
/** Keyframes for Doodle in Domain Section **/
@keyframes walk {
 0%, 100% { transform: translateY(0); }
 25% { transform: translateY(-5px); }
 75% { transform: translateY(5px); }
}
.cls-1 {animation: walk-left 1s infinite;}
.cls-2 {animation: walk-right 1s infinite;}

@keyframes walk-left {
0%, 100% {transform: translateY(0);}
25% {transform: translateY(-5px);}
75% {transform: translateY(5px);}
}

@keyframes walk-right {
0%, 100% {transform: translateY(0);}
25% {transform: translateY(5px);}
75% {transform: translateY(-5px);}
}


/** Container for All 5 Bubbles **/
.bubble-container{display:flex; flex-wrap:wrap; width:100%; height:100%; justify-content:start; padding:1.4em 1em; flex-direction:row-reverse; align-items:start; align-content: center;}
/** Container for starting 3 bubbles **/
.bubble-container .cards-3 .cards-2{width:100%;}

/** Cards **/
.cards{height:150px; text-align:center; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:unset; padding:1.4em .5em 3.2em 1.2em; margin:0 0; position:relative; transition:.28s ease all; z-index:1;}

.cards-3{width:16dvw; border-right:.02em solid #98989850; margin-right:1em;}

.cards-2{width:21dvw;}

/** Cards Img **/
.cards img{width:92px;height:92px; padding:0 .4em 1em;}

/** Cards Text **/
.cards p{color:var(--secondary); width:100%; text-align:start; align-self:flex-start; font-size:24px; font-weight:200; font-family:var(--secondary-heading); line-height:1.2em;}

/** Cards Animation 
.cards::after{
 content:""; position:absolute; top:0; left:0;
 width:0%; height:100%; border-radius:1em; z-index:-1; transition:.4s ease all;
}

.cards:hover::after{background:var(--accent); width:100%;}
.cards:hover{border:.4px solid silver; outline:4px solid var(--accent); outline-offset:4px;}
**/

/** Container for domain section heading **/
.domain-text{background:var(--primary); width:100%; height:100%; flex:40%; display:flex; flex-wrap:wrap; align-items:center; align-content:center; padding:4em;}
.sub-heading-container h3{color:var(--secondary); font-family:var(--secondary-heading); font-weight: 300; font-size: larger; margin-bottom:.02em;}
.domain-heading-container h1{color:var(--secondary); font-family:var(--heading); letter-spacing:1px; line-height:1em; font-weight:500; font-size:5.6vw; margin-top:.2em;}

/** Responsive Domain **/
@media screen and (max-width:600px) {
  .domain-content{flex:100%;}
  .domain-text{flex:100%;}
}

/** Clients Section **/
#clients-container{width:100%; height:fit-content; background:white; display:flex; flex-wrap:wrap; z-index:-3; align-items:start; align-content:start;}

/** Clients Heading **/
.clients-heading {text-align:center; padding:0; width:100vw; display:flex; justify-content:center; flex-wrap:wrap;}
.clients-heading > h2{text-align:center; font-family:var(--heading); font-size:12vw; text-transform:uppercase; letter-spacing:.01em; width:100%;}
.first-c-h{color: #98989888; margin-top:-2vh;}
.sec-c-h{color: #98989800;}
.third-c-h{color: #98989814;}

/** Highlighted Text **/
.logo-highlight{padding:0 1em 0; border-radius:1px; width:fit-content; flex:100%;text-align:center; font-weight:800; margin-top:-27vh;}
.logo-highlight > p{color:var(--primary); font-size:1.8vw; font-family:var(--secondary-heading); font-weight:600; text-transform:capitalize;/** letter-spacing:.4em;**/}
.acme-logo{color:var(--primary); font-weight: 600; font-size:2.4vw; font-family:var(--neon-shadow); text-shadow:1px 1px 2px var(--accent); background:var(--accent-shadow);}

/** Logo container **/
.logo-container{width:100%; flex:100%; z-index:0; display:flex; gap:0;margin-top:-22vh; overflow-x:auto; margin-bottom:2em;}
.logo-container > img{width:192px; height:180px; /**border:.01em solid #c0c0c056;**/ background:#11111101; filter:saturate(0); backdrop-filter:blur(4px);}
/**.logo-container > img:nth-child(-n+5){border-top:none;}
.logo-container > img:nth-last-child(-n+5){border-bottom:none; margin-bottom: 2em;}
.logo-container > img:nth-child(1){border-left:none;}
.logo-container > img:nth-child(6){border-left:none;}
.logo-container > img:nth-child(5){border-right:none;}
.logo-container > img:nth-child(10){border-right:none;}**/

/** Vertical Slider **
.logoshow-container {
  position: relative; overflow: hidden;  border-radius:1em; background:white;
  height: 78vh; /* Set the height of the slideshow *
  /*width: 100%;  Set the width of the slideshow *
}

.logoshow-inner {
  position: relative; top: 0; left: 0; 
  width: 100%; height: 100%; transition: top 0.5s; /* Add a smooth transition effect *
}

.logoshow-inner img {
  display: block; background:var(--secondary); border-radius:1em;
  width: 100%; height: 200px; /* Set the height of each image *
  object-fit: cover; margin: 1em auto;
}
 **/
/** Horizontal Slideshow **
.slides-container{color:white; width:100%; flex:80%;}

/* Slideshow container *
.slideshow-container {
  width: 100%; height:100%;
  position: relative;
  margin: auto;
  padding:0em 1em;
}

/* Hide the images by default *
.mySlides {
  display: none; width:inherit; height:inherit;
}

.mySlides img {
  width:100%; height:78%; border-radius:1em;
}

/* Next & previous buttons *
.prev, .next {
  cursor: pointer; position: absolute;
  top: 40%;
  width: auto;
  margin-top: -22px;
  padding:.4em .8em .6em .6em;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 1em;
  user-select: none;
}

/* Position the "next button" to the right *
.next {
  right: 1em;
  padding:.4em .6em .6em .7em;
  border-radius: 1em;
}

/* On hover, add a black background color with a little bit see-through *
.prev:hover, .next:hover {
  background-color:var(--accent); color:var(--secondary) !important;
}

/* Fading animation *
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
/** Keyframes **
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/** Portfolio Section **/
/** Container **/
#portfolio{width:100%; height:auto; display:flex; flex-wrap:wrap; justify-content: center; background:var(--secondary);}

/** Portfolio Items **/
.portfolio-items{
 width:25%; height:24vw; background:var(--secondary); transition:.4s ease all; overflow:hidden;
}

/** Portfolio Items Images **/
.portfolio-items > img{
 width:100%; height:100%; transition:.4s ease all;
}
.portfolio-items:hover img{
 transform:scale(1.1);
}

/** container div for Portfolio text and website showcase **
.p-1st{flex:40%; width:100%; display:flex; flex-wrap:wrap; align-items:stretch; padding:1em 0em 1em 1em;}

/** div for heading of the section **
.p-text{background:var(--accent); width:100%; height:fit-content; padding:1.4em 2em 0.6em; line-height:5em; letter-spacing:.2em; border-radius:1em;}

/** div for website showcase > picture tag > image **
.p-web-show img{border-radius:1em;}

/** container div for Portfolio text and website showcase **
.p-2nd{flex:60%; width:100%; height:100%; display:flex; justify-content:center; align-items:baseline; align-content:baseline; padding:1em;}

/** container div for both type of cards **
.pf-card{width:100%; flex:30%; height:100%;}

/** differentiating the second child element of pf-card in order to achieve the reverse column effect manually using html syntex as well **
.pf-card:nth-child(2){margin:0 1em;}

/** adjusting the small and large card heights and margins for proper visibility **
.pf-card:nth-child(2) > .pf-card-s{margin-top:1em; width:100%; height:28%;}
.pf-card:nth-child(2) > .pf-card-l{margin-top:0; width:100%; height:70%;}

/** PortFolio Card Small **
.pf-card-s{width:100%; height:30%; background:black;}

/** PortFolio Card Large/Landscape **
.pf-card-l{width:100%; height:68%; background:black; margin-top:1em;}

.pf-card-s,.pf-card-l{border-radius:1em;}


/** Promotional video and call-to-action **/
#video-and-cta{width:100%; height:110vh;}

/** video container **/
.video-container{width:100%; height:65%; background:var(--background);}

.video-container > video{width:100%; height:100%; cursor:pointer;}

/** call to action container **/
.cta-container{width:100%; height:35%; background:var(--secondary); display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}

/** text container for all the call-to-action attraction **/
.cta-text{flex:90%; width:100%; height:100%; padding:1.2em 1.2em 1.2em 2.4em; display:flex; justify-content:start; align-items:center; flex-wrap:wrap; align-content:center; gap:.01em;}

.cta-text > p{
 flex:100%; width:100%; 
 display:inline-flex; justify-content:flex-start; gap:1em;
}

.cta-text-1st{
 letter-spacing:.01em; font-weight:bolder; margin-top:-.24em;
 font-size:10vw;
}

.cta-text-2nd{
 font-size:3vw; font-family:var(--secondary-heading); font-weight:800;
 letter-spacing:1px; margin-top:-.6em;
}

/** container for call-to-action button **/
.cta-btn{flex:10%; width:100%; height:100%; display:flex; justify-content:center; align-items:center;}

/** CSS For CTA Btn **/
.button {
  position: relative;
  background-color: var(--accent);
  color: var(--background);
  font-size: 20px; font-family:var(--secondary-heading);
  font-weight: 600;
  width: 150px;
  height: 52px;
  margin-top:10px;
  border-radius: 10px;
  border: 2px solid var(--background);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::before {
  content: "Now!"; color:var(--accent);
  display: flex; font-family:var(--secondary-heading);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 10px;
  border:2px solid var(--background);
  background: var(--background);
  transform: translate(-100%, 0%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button::after {
  content: "Contact";
  display: flex;;
  align-items: normal;
  justify-content: center;
  background-color: transparent;
  width: 100%;
  height: 90%;
  pointer-events: none;
  border-radius: 10px;
  transform: translate(0%,-100%);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  transform: translate(0%, 0%);
}

.button:hover::after {
  transform: translate(100%,-100%);
}

.button:focus {
  outline: none;
}

.button:active {
  scale: 0.95;
}


/** G-Review **/
.g-review{width:100%; height:24vh; background:var(--secondary); display:flex; align-items:start;}
 
img.g-img{width:60%; height:80%; margin-left:-2em; margin-right:6em;}

@keyframes shakeit {
0%{transform:translateX(-10px);}
50%{transform:translateX(10px);}
100%{transform:translateX(-10px);}
}

img.r-img{width:100%; height:50vh; /**transform:rotateY(160deg) rotateZ(-15deg);**/ margin:-28vh 0 0 16vw;  animation: shakeit 5s ease infinite forwards;}



/** Footer **/
footer{width:100%; height:40vh; background:var(--primary); display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}

footer > div{width:calc(100%/4); height:100%; padding:2.8em; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:baseline;}

.fc-1{justify-content:center !important; align-items:center !important;}
.fc-2{background:none;}
.fc-3{background:none;}
.fc-4{background:none;}

/****/
.fc-1 > .fc-logo{width:54%; height:74%;}

/****/
.fc-head{
 font-size:1.4em; flex:100%; width:100%; margin-bottom:1em; color:#f5f5f5; letter-spacing:.056em;
}

/****/
.fc-ul{list-style-type:none;}
.fc-li{line-height:1.6em;}

a.fc-a{text-decoration:none; color:var(--grey); position:relative; transform:.4s ease all;}
a.fc-a::after{
 position:absolute; content:''; width:0%; height:14%;
 bottom:-10%; left:0; transition:.4s ease all;
}
a.fc-a:hover::after{width:100%; background:var(--accent);}
a.fc-a:hover{color:var(--accent) !important;}

/** **/
.fc-content{line-height:1.6em; color:#888;}

/****/
.fc-content > form > input{
 border-radius:0px; border-bottom:2px solid black; border-top:none; border-left:none; border-right:none; padding:.6em; transition:.4s ease all;
}
.fc-content > form > input:focus{
 border-radius:10px; border:2px solid black !important; 
}

/****/
.fc-content > form > button{background:var(--accent); padding:.32em; font-size:large; margin-top:.32em; border:2px solid black;}


/** Keyframes **/
@keyframes bounce {
 0%{background-position:24vw 22vh;}
 50%{background-position:26vw 24vh;}
 100%{background-position:24vw 22vh;}
}


/** Notification **/
.update-fixed{
 width:100%; height:fit-content; padding:1.2em 0; position:fixed; top:0; left:0;
 background:var(--accent); color:var(--background); text-align: center;
 z-index:11;
}
.update-fixed a{color:black !important; text-decoration:none; transition:.4s ease all;}
.update-fixed a:hover{color:black !important; text-decoration:underline !important;}

/***************************************************************************************
*********************************                        *******************************
*********************************   About Page CSS       *******************************
*********************************                        *******************************
***************************************************************************************/