@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');


 :root {

     --color1: #000;
     --color2: #fff;
     --color3: #444;
     --color4: #223344;

     --navbar-bgc: #223344;


     --main-text-color: var(--color1);
     --main-bgc: var(--color2);
     --main-title-color: var(--color3);
     --main-link-color: var(--color3);

     --hero-title-color: var(--color3);
     --hero-text-color: var(--color2);

     --hero-navbar-bgc-start: transparent;

     --hero-navbar-bgc-end: var(--navbar-bgc);

     --hero-navbar-link: var(--color2);
     --hero-navbar-brand: var(--color3);


     --footer-bgc: var(--navbar-bgc);
     --footer-text-color: var(--color2);
     --footer-link-color: var(--color2);
     --footer-title-color: var(--color2);

     --font-text: 'Mulish';
     --font-title: 'Mulish';
     --font-brandname: 'Mulish';
     --font-code: 'monospace';

 }




 html {

     font-size: 1.4rem;
 }

 * {
     font-family: var(--font-text), sans-serif !important;
 }

 a.navbar-brand strong {
     font-family: var(--font-brandname), cursive !important;

     font-style: normal;
     font-size: 1.4rem;

     color: var(--color2) !important;

     background-color: transparent;
 }

 .navbar-nav .nav-link,
 .navbar-nav .nav-link.nav-sep,
 a.navbar-brand strong {


     font-weight: bold;


     color: var(--color2) !important;

     text-shadow: 1px 1px 1px #2344, -1px -1px 1px #2343, 0px 0px 16px #2348;
     background-color: transparent;
 }

 .navbar-nav a.nav-link,
 .navbar-nav .nav-link.nav-sep {

     font-weight: bold;
     font-size: 1.4rem;
 }

 a.navbar-brand strong {

     font-weight: bold;
     font-size: 1.6rem;
 }


 div.cover h1,
 div.hero.light h1,
 div.hero h1 {
     color: #fff;
     text-shadow: 0 0 8px #2345;

 }






 strong,
 a {
     color: var(--black) !important;
 }

 main h2 {

     font-size: 1.6rem;
     font-weight: bold;
     margin: 0;
     color: #234;
     font-family: var(--font-brandname), cursive !important;
 }


 .featurette-media img.featurette-image {
     width: 400px;
     height: 400px;
     margin-bottom: 1rem;
     object-fit: cover;
     border-radius: 8px;

     box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
 }

 .card {

     box-shadow: rgb(38, 57, 77, .4) 0px 20px 30px -10px;
 }

 .hero h1 {
     font-size: 2.6rem;

 }

 @media only screen and (min-width: 600px) {
     .hero h1 {
         font-size: 4rem;
         text-align: center;
     }
 }



 .hero p {
     font-size: 1.6rem;
     font-weight: 800;
     line-height: .9;
 }



 .active {
     text-decoration: overline;
 }

 main {
     width: 100%;
     overflow-x: visible;
     margin: 0;
     padding: 0;

 }

 li::marker {
     color: var(--orange) !important;
 }





 button.orange,
 a.orange {
     background-color: var(--white) !important;
     color: black !important;
     font-weight: 800;
     font-family: "Poppins", cursive !important;
     text-shadow: none;
 }

 footer {
     background-color: var(--footer-bgc);
     margin-top: 4rem;
     padding: 16px;
 }

 footer * {
     color: var(--color2) !important;
     text-align: center;
     text-decoration: none !important;
 }

 .form-floating label {
     margin-left: 1rem;
 }

 input.form-control,
 textarea.form-control {
     border: 3px solid #2348;

 }

 input.form-control:focus,
 textarea.form-control:focus {

     outline: none !important;
     border: 4px solid #2348;
     box-shadow: 0 0 5px #22334488;
 }

 form label {

     color: #223344;
 }


 input.form-control:required+label:after,
 textarea.form-control:required+label:after {
     content: " *";
     color: orangered;

 }


 button[type="submit"] {
     text-align: center;
     width: 50%
 }

 .navbar-toggler.animated-hamburger span {
     background: var(--color2) !important;
 }

 .navbar-collapse.bg-dark.collapse.show,
 .navbar-collapse.collapsing {
     background-color: var(--navbar-bgc) !important;
     z-index: 0;
     padding-top: 100px;
     transition: background-color 300ms;

 }



 a.btn.btn-outline-dark:hover {
     color: var(--color2) !important;
 }