* {
   padding: 0;
   margin: 0;

 }



 body {
   background-color: #000;

 }

 :root {
   --nav-height: 100px;

   --spacer-width: 25px;


   --accent-color: #ffff00;

   --main-color: #534490;
   --main-color-50: #f1f2fc;
   --main-color-100: #e5e7fa;
   --main-color-200: #d0d2f5;
   --main-color-300: #b4b6ed;
   --main-color-400: #9895e4;
   --main-color-500: #867bd9;
   --main-color-600: #7561ca;
   --main-color-700: #6551b1;
   --main-color-800: #534490;
   --main-color-900: #453c73;
   --main-color-950: #292343;


 }

 html {
   scroll-behavior: smooth;

 }

 .small {
   width: 100vw;
   height: auto;
 }

 .cta {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   border-radius: 999px;
   padding: 12px 22px;
   background: #2563eb;
   color: #fff;
   text-decoration: none;
   transition: opacity 1s ease, transform 1s ease, background 0.5s ease;
 }

 .cta:hover,
 .cta:focus-visible {
   background: red;
   opacity: 0;
 }

 .flex-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-height: 99%;
 }

 .foot-text {
   font-family: "Jaro", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;

   color: var(--main-color-800);
   text-decoration: none;
   font-size: 15px;
   max-height: 50;
 }

 .nav-text {
   font-family: "Silkscreen", sans-serif;
   font-weight: 400;
   font-style: normal;

   color: var(--main-color-800);
   text-decoration: none;
   font-size: 30px;
   max-height: var(--nav-height);

   border: 5px solid var(--main-color-800);
   border-radius: 7px;
   padding: 2px 5px 2px 5px;

   transition: color 0.25s ease, font-size 0.5s ease;

 }

 .text {
  font-family: "Jaro", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;


   color: var(--main-color-800);
   text-decoration: none;
   font-size: 30px;
 }

 .head-text {
   font-family: "Silkscreen", sans-serif;
   font-weight: 700;
   font-style: normal;

   margin-bottom: 20px;

   color: var(--main-color-800);
   text-decoration: none;
   font-size: 80px;
 }

 .sub-text {
   font-family: "Silkscreen", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;

   color: var(--main-color-800);
   text-decoration: none;
   font-size: 60px;
 }


 .nav-text:hover {

   color: var(--main-color-900);
   font-size: 32px;

 }

 .nav-spacing {
   margin: 0px 20px 0px 0px;
 }

 .size-0 {
   font-size: 0;
   width: 0;
   max-height: 0;



 }

 .nav-div-sd {
   display: flex;

   width: auto;
   height: var(--nav-height);

   justify-content: center;

   animation-name: scaleDown;
   animation-duration: 1s;



   max-width: 99vw;
   max-height: 99vh;

 }

 .nav-div {
   width: auto;
   height: var(--nav-height);
 }


 .video {
   position: fixed;
   right: 0;
   bottom: 0;
   min-width: 100vw;
   min-height: 100vh;
   z-index: 0;
 }



 #nav-container {
   position: sticky;
   background-color: #000000ee;
   z-index: 1;
   min-width: 100vw;

 }

 #foto-nav {
   width: auto;
   height: var(--nav-height);
 }

 #foto-opener {
   width: auto;
   height: var(--nav-height);

   animation-name: scaleDown;
   animation-duration: 1s;


   max-height: 99vh;
   max-width: 99vw;
 }

 #footer {
   left: 2vw;
   min-width: 98vw;
 }

 #footer-size {
   background-color: #000000dd;
   
   left: 1vw;
   bottom: 0vh;
   min-width: 100vw;
   z-index: 0;
 }

 @keyframes scaleDown {
   0% {
     height: 100vh;
     opacity: 0%;

   }

   25% {
     opacity: 100%;
   }

   50% {
     height: 100vh;
     opacity: 100%;
   }

   90% {
     height: var(--nav-height);
     opacity: 100%;
   }
 }



 @keyframes oppFadeIn {
   0% {
     opacity: 0%;
   }

   70% {
     opacity: 0%;
   }

   100% {
     opacity: 100%;
   }
 }

 @keyframes backColFade {
   0% {
     background-color: #ffffffff;
   }

   80% {
     background-color: #ffffffff;
   }

   100% {
     background-color: #FFFFFF00;
   }
 }

 .fade-in {
   opacity: 100;

   animation-name: oppFadeIn;
   animation-duration: 2s;
 }

 .scale-down {
   animation-name: scaleDown;
   animation-duration: 1s;


 }

 .col-fade {
   animation-name: backColFade;
   animation-duration: 1.5s;
 }

 .spacer {
   width: var(--spacer-width);
   height: var(--nav-height);
 }