*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  --color-text: #F2CBEA;
  --color-bg: #061940;
  --color-bg-alt: #6258A6;
  --color-title: #DF99F2;
  --color-link: #DF99F2;
  --color-link-hover: #C189D9;
  --page-padding: 1.5rem;
}



/* стилизация прокрутки */
@media (max-width: 780px) {
    
*,
html *
{
  scrollbar-width: bold;
    scrollbar-color: #DF99F2 #061940;
}

}
*::-webkit-scrollbar,
html *::-webkit-scrollbar {
  height: 18px;
  width: 18px;
    z-index:999;
}
*::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
  background: #061940;
    z-index:999;
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
  background-color: #DF99F2;
  border-radius: 10px;
  border: 4px solid #061940;
    z-index:999;
}

/* стилизация прокрутки конец */
body *::selection {
    color:white;
    background: rgba(98,88,166, 0.7); /* Safari */
}
body *::-moz-selection {
    color:white;
    background: rgba(98,88,166, 0.7); /* Safari */
  /*   background: #6258A6; Firefox */
}
/*----------Вверху стилизация выделения--------------*/


body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: Jost, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  height: 100%;
/*     background: url(https://mafiko.top/assets/templ/img/cletka.svg), url(../img/noise.png), radial-gradient(circle, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  background-size: 32px, 150px, 100% 100vh; */
  
  
  background: url(https://mafiko.top/assets/templ/temlplates/EntranceAnimationForImages-main/img/noise.png), radial-gradient(circle, var(--color-bg) 0%, #DF99F2 100%);
  background-size: 150px, 100% 115vh;
}

/* Page Loader */

.loading {
   overflow:hidden; 
}

.js .loading .boxing {
    
    display:block;
}
    .boxing {
            display:none;
            border-radius:0.4rem;
            z-index:1000;
            height: 1em;
            width: 1em;
            font-size: 10vmin;
            background-color: #DF99F2;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -0.5em;
            margin-left: -1em;
            transform-origin: top right;
            animation: box-flip 4s ease-in-out infinite;
    }
    .boxing:nth-child(2) {
            animation-delay: -2s;
    }
                    
            @keyframes box-flip {
                    16.6666666667% {
                    transform: rotate(0);
                    }
                    33.3333333333% {
                    transform: rotate(0.5turn);
                    }
                    50% {
                    transform: rotate(0.5turn);
                    }
                    66.6666666667% {
                    transform: rotate(0.75turn);
                    }
                    83.3333333333% {
                    transform: rotate(0.75turn);
                    }
                    100% {
                    transform: rotate(1turn);
                    }
            }
.js .loading::before,
.js .loading::after {
  content: "";
  position: fixed;
  z-index: 999;
}

.js .loading::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

/* .js .loading::after {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  opacity: 0.4;
  background: var(--color-link);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
} */

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;
}

a:hover {
 /*  text-decoration: underline; */
  color: var(--color-link-hover);
  outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
  /* Provide a fallback style for browsers
	 that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

a:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
  background: transparent;
}

a:focus-visible {
  /* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
  outline: 2px solid red;
  background: transparent;
}

.unbutton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.unbutton:focus {
  outline: none;
}


 .maf-index-header { 
    padding-top:0.5rem !important;
    padding-right:0.5rem !important;
    padding-bottom:0rem !important;
    padding: var(--page-padding);
    position: relative;
    text-transform: lowercase; 
    /* font-size: 12px; */
    overflow:hidden;
    z-index: 1000;
    width: 100%; 
    display:flex; 
    justify-content: space-between!important;
    align-items: center!important;
    transition:0.3s;
 }
 .maf-logo {
    width:40%; 
 }
 .maf-buttons {
     
    width:60%; 
 }

 .maf-menu {
    width:100%;  
 }
 
.frame {
  padding: var(--page-padding);
  position: relative;
  text-transform: uppercase;
  font-size: 12px;
  display: grid;
  z-index: 1000;
  width: 100%;
  height: 100%;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  pointer-events: none;
  justify-items: start;
  grid-template-columns: auto auto;
  grid-template-areas: "title" "archive" "back" "github" "demos" "sponsor" "tags";
}

.frame #cdawrap {
  justify-self: start;
}

.frame a {
  pointer-events: auto;
}

.frame__title {
  grid-area: title;
  font-size: inherit;
  margin: 0;
}

.frame__back {
  grid-area: back;
  justify-self: start;
}

.frame__archive {
  grid-area: archive;
  justify-self: start;
}

.frame__tags {
  grid-area: tags;
}

.frame__github {
  grid-area: github;
}

.frame__demos {
  grid-area: demos;
  display: flex;
  gap: 1rem;
}

.contentik {
  display: flex;
  justify-content: center;
  align-items: center;
   height: 115vh;
  /* height: 100vh; */
  width: 100%;
  
  position: absolute;
  left: 0;
  top: 0;
}

.gloock-regular {
  font-family: "Dela Gothic One";
  font-weight: 400;
  font-style: normal;
}

.debug {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 1px;
  border-radius: 5px;
  background-color: red;
  transform: translate(-50%, -50%);
}

.scene {
  perspective: 1000px;
  overflow: hidden;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
   height: 115vh;
  /* height: 100vh; */
  width: 100vw;
  left: 0;
  top: 0;
}

.cardi {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card__img {
  width: 5em;
  border-radius: 5px;
  aspect-ratio: 2.5/3;
  background-position: center;
  background-size: cover;
}

.headings {
  text-align: center;
  position: relative;
  z-index: 10;
  color: var(--color-title);
  text-transform: uppercase;
}

.headings__main {
        margin-top: revert-layer;
    margin-bottom: revert;
  line-height: 0.5;
  font-size: clamp(2.5rem, 1.59rem + 3.883vw, 6.25rem);
}

.headings_subtitle {
  line-height: 0.5;
  font-size: clamp(1rem, 0.757rem + 1.036vw, 2rem);
}
@media screen and (min-width: 53em) {
    
    .maf-index-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display:flex;
        /* backdrop-filter: blur(16px); */
        padding-left:1.5rem;
        border-radius: 0 0 1rem 1rem;
        background-size: 150px;
    }
    
    .maf-buttons {
     
        width:25%; 
    }
    .maf-logo {
        width:14%; 
    }
    .maf-menu {
        width:61%;  
    }
    
    
  .frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    grid-template-columns: auto auto auto 1fr;
    grid-template-rows: auto auto;
    align-content: space-between;
    grid-template-areas: "title back archive github sponsor" "tags tags tags demos demos";
  }
  .frame #cdawrap,
  .frame__demos {
    justify-self: end;
  }

  .card__img {
    width: 7em;
  }
  
  .contentik, 
  .scene {
      height:110vh;
  }
  body {
      background-size: 150px, 100% 101vh;
  }
  
}
    .marg-top {
    height:1vh;
      width:100vw; 
      background:transparent;
      margin-top: 100vh;  
        
    }
    .gr-ient1 {
        margin-top: 5vh; 
/*         padding-bottom:1rem; */
        /* background-image: linear-gradient(180deg, rgba(223, 153, 242, 0.01), rgba(14, 39, 89, 1) 85%),
                radial-gradient(ellipse at top left, 
                rgba(93, 81, 157, 0.5), transparent 50%),
                radial-gradient(ellipse at top right, 
                rgba(166, 121, 206, 0.5), transparent 50%),
                radial-gradient(ellipse at bottom right, 
                rgba(223, 153, 242, 0.5), transparent 50%),
                radial-gradient(ellipse at center left, 
                rgba(197, 97, 217, 0.5), transparent 50%),
                radial-gradient(ellipse at top center, 
                rgba(7, 26, 64, 0.6), transparent 50%),
                radial-gradient(ellipse at center center, 
                rgba(95, 205, 217, 0.5), transparent 50%),
                radial-gradient(ellipse at center right, 
                rgba(2, 83, 217, 0.5), transparent 50%),
                radial-gradient(ellipse at center left, 
                rgba(39, 43, 115, 0.5), transparent 50%);
                
                
                
                
                url(https://mafiko.top/assets/templ/temlplates/EntranceAnimationForImages-main/img/noise.png),
         linear-gradient(172deg, transparent,  #DF99F2, var(--color-bg),  #B9C8E9, #FE94D2, #0245C8);
         */
        
        
        background: 
         /*  url(https://mafiko.top/assets/templ/temlplates/EntranceAnimationForImages-main/img/noise.png), */
         linear-gradient( transparent, #081947);
         /* radial-gradient(circle, #DF99F2 0%, var(--color-bg) 100%) */
        background-size: 150px, 100% ;
    }
    
    .gr-ient2 {
        background: url(https://mafiko.top/assets/templ/temlplates/EntranceAnimationForImages-main/img/noise.png),
         linear-gradient(172deg, #081947, var(--color-bg),  #2135A6, rgba(223, 153, 242, 0.01)),
         radial-gradient(circle at bottom center, #DF99F2 0%, var(--color-bg) 100%);
         /* radial-gradient(circle, #DF99F2 0%, var(--color-bg) 100%) */
        background-size: 150px, 100% ;
        
    }
    
    .gr-ient3 {
         background: 
         url(https://mafiko.top/assets/templ/temlplates/EntranceAnimationForImages-main/img/noise.png),
         linear-gradient(172deg, #2135A6, #081947, var(--color-bg)  );
         /* radial-gradient(circle, #DF99F2 0%, var(--color-bg) 100%) */
        background-size: 150px, 100% ;
        
    }
    
    
    
@media (max-width: 768px) {
   /*  .marg-top {
     margin-top: 65vh;  
       
   } */
}

                    .button--atlas {
                    	font-family: "Dela Gothic One";
                    	font-weight: 500;
                    	font-size: clamp(1rem, 0.757rem + 1.036vw, 2rem);
                    	background: #DF99F2;
                    	color:#061940;
                    	border-radius:2rem;
                    	box-shadow: inset 0 0 1rem #DF99F2;
                    	line-height: inherit;
                    }
                    
                    .button--atlas > span {
                    	display: inline-block;
                    }
                    
                    .button--atlas:hover > span {
                    	opacity: 0;
                    }
                    .marquee {
                    	position: absolute;
                    	top: 0;
                    	left: 0;
                    	width: 100%;
                    	overflow: hidden;
                    	pointer-events: none;
                    }
                    
                    .marquee__inner {
                    	width: fit-content;
                    	display: flex;
                    	position: relative;
                    	--offset: 1rem;
                    	--move-initial: calc(-25% + var(--offset));
                    	--move-final: calc(-50% + var(--offset));
                    	transform: translate3d(var(--move-initial), 0, 0);
                    	animation: marquee 1s linear infinite;
                    	animation-play-state: paused;
                    	opacity: 0;
                    }
                    
                    .button--atlas:hover .marquee__inner {
                    	animation-play-state: running;
                    	opacity: 1;
                    	transition-duration: 0.4s;
                    }
                    
                    .marquee span {
                    	text-align: center;
                    	white-space: nowrap;
                    	font-style: italic;
                    	padding: 1.5rem 0.5rem;
                    }
                    
                    @keyframes marquee {
                    	0% {
                    		transform: translate3d(var(--move-initial), 0, 0);
                    	}
                    
                    	100% {
                    		transform: translate3d(var(--move-final), 0, 0);
                    	}
                    }

                    .button::before,
                    .button::after {
                    	position: absolute;
                    	top: 0;
                    	left: 0;
                    	width: 100%;
                    	height: 100%;
                    }
                    
                    .button {
                    	pointer-events: auto;
                    	cursor: pointer;
                    	border: none;
                    	padding: 1.5rem 3rem;
                    	margin: 0;
                    	position: relative;
                    	display: inline-block;
                    	-webkit-appearance: button;
                    	transition:0.2s;
                    }
                    
                    .button:hover {
                        transform:scale(1.1);
                    }
                    
                    .button:active {
                        transform:scale(0.9);
                    }
                    
                    
                    .button--calypso {
                    	overflow: hidden;
                    	/* font-size: 1.15rem; */
                    	border-radius: 0.85rem;
                    	color: #DF99F2;
                    	border:none;
                    }
                    
                    .button--calypso span {
                    	display: block;
                    	position: relative;
                    /*     mix-blend-mode: difference; */
                    	z-index: 10;
                    	
                    }
                    
                    .button--calypso:hover span {
                    	animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
                        color: #061940;
                    }
                    
                    @keyframes MoveScaleUpInitial {
                    	to {
                    		transform: translate3d(0,-105%,0) scale3d(1,2,1);
                    		opacity: 0;
                    	}
                    }
                    
                    @keyframes MoveScaleUpEnd {
                    	from {
                    		transform: translate3d(0,100%,0) scale3d(1,2,1);
                    		opacity: 0;
                    	}
                    	to {
                    		transform: translate3d(0,0,0);
                    		opacity: 1;
                    	}
                    }
                    
                    
                    
                    
                    .button--calypso::before {
                    	content: '';
                    	background: #DF99F2;
                    	width: 120%;
                    	height: 0;
                    	padding-bottom: 120%;
                    	top: -110%;
                    	left: -10%;
                    	border-radius: 50%;
                    	transform: translate3d(0,68%,0) scale3d(0,0,0);
                    }
                    
                    .button--calypso:hover::before {
                    	transform: translate3d(0,0,0) scale3d(1,1,1);
                    	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
                    }
                    
                    .button--calypso::after {
                    	content: '';
                    	background: #DF99F2;
                    	transform: translate3d(0,-100%,0);
                    	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
                    }
                    
                    .button--calypso:hover::after {
                    	transform: translate3d(0,0,0);
                    	transition-duration: 0.05s;
                    	transition-delay: 0.4s;
                    	transition-timing-function: linear;
                    }
                    
                    
                    
                    .button--calypsom {
                    	overflow: hidden;
                    	/* font-size: 1.15rem; */
                    	border-radius: 0.85rem;
                        color: #061940;
                    	border:none;
                    }
                    
                    .button--calypsom span {
                    	display: block;
                    	position: relative;
                    	color: #061940;
                    	/* mix-blend-mode: difference; */
                    	z-index: 10;
                    }
                    
                    .button--calypsom:hover span {
                        
                        color: #DF99F2;
                    	animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
                    }
                    .button--calypsom::before {
                    	content: '';
                    	background: #061940;
                    	width: 120%;
                    	height: 0;
                    	padding-bottom: 120%;
                    	top: -110%;
                    	left: -10%;
                    	border-radius: 50%;
                    	transform: translate3d(0,68%,0) scale3d(0,0,0);
                    }
                    
                    .button--calypsom:hover::before {
                    	transform: translate3d(0,0,0) scale3d(1,1,1);
                    	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
                    }
                    
                    .button--calypsom::after {
                    	content: '';
                    	background: #061940;
                    	transform: translate3d(0,-100%,0);
                    	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
                    }
                    
                    .button--calypsom:hover::after {
                    	transform: translate3d(0,0,0);
                    	transition-duration: 0.05s;
                    	transition-delay: 0.4s;
                    	transition-timing-function: linear;
                    }
                    
                    button:focus:not(:focus-visible) {
                        outline: 0;
                    }
                    
                    
                                        
                    .link--eirene {
    /* font-family: europa, sans-serif; */
    font-weight: bold;
}

.link--eirene::before {
    height: 7px;
    border-radius: 20px;
    transform: scale3d(1, 1, 1);
    transition: transform 0.2s, opacity 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);
}

.link--eirene:hover::before {
    transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
    transition-duration: 0.4s;
    opacity: 1;
    transform: scale3d(1.2, 0.1, 1);
}

.link--eirene span {
    transform: translate3d(0, -4px, 0);
    display: inline-block;
    transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);
}

.link--eirene:hover span {
    transform: translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
    transition-duration: 0.4s;
    transition-delay: 0s;
}
.link {
    cursor: pointer;
    font-size: 18px;
    position: relative;
    white-space: nowrap;
    color: var(--color-text);
}

.link::before,
.link::after {
    position: absolute;
    width: 100%;
    /* height: 1px; */
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.link::before {
    content: '';
    /* show by default */
}
.link--kale {
    /* font-family: halyard-display, sans-serif; */
    font-weight: 600;
    text-transform: lowercase;
}

.link--kale::before {
    border-radius: 20px;
    height: 10px;
    top: 100%;
    opacity: 0;
}

.link--kale:hover::before {
    opacity: 1;
    animation: lineUp 0.3s ease forwards;
}

@keyframes lineUp {
    0% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 0.045, 1);
    }

    50% {
        transform-origin: 50% 100%;
        transform: scale3d(1, 1, 1);
    }

    51% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 1, 1);
    }

    100% {
        transform-origin: 50% 0%;
        transform: scale3d(1, 0.045, 1);
    }
}

.link--kale::after {
    content: '';
    transition: opacity 0.3s;
    opacity: 0;
    transition-delay: 0s;
}

.link--kale:hover::after {
    opacity: 1;
    transition-delay: 0.3s;
}          
                    
                    
                    .nav-scroller {
                        position: relative;
                        z-index: 2;
                        height: 2.75rem;
                        overflow-y: hidden;
                        scrollbar-width: none;
                     }
                     
                     
                     .custom-1 {
                        padding-top: .25rem!important;
                        padding-bottom: .25rem!important; 
                        margin-bottom: 0rem!important;
                     }
                     
                     .custom-2 {
                         padding-top: 0rem!important;
                        padding-bottom: 0rem!important; 
                        padding: .5rem;
                     }
                                    
                    .nav-scroller .navik {
                        display: flex;
                        flex-wrap: nowrap;
                        padding-bottom: 1rem;
                        margin-top: -1px;
                        overflow-x: auto;
                        text-align: center;
                        white-space: nowrap;
                        -webkit-overflow-scrolling: touch;
                        scrollbar-width: none;
                    }
                    .jc-space-evenly {
                        display:flex;
                        justify-content:space-evenly !important;
                    }
                    
                    .bg-pinky {
                        background-color: #DF99F2 !important;
                        color: #061940 !important;
                        transition: 0.2s;
                        box-shadow: 0px 0px 5px #0F1629;
                    }
                    .bg-blum {
                        background-color: #061940 !important;
                        color: #DF99F2 !important;
                        border: 2px solid #DF99F2;
                        transition: 0.2s;
                    }
                    .link-blum {
                        color: #061940 !important;
                        transition:0.2s;
                    }
                    .link-blum:hover {
                        opacity:0.7;
                    }
          
                    
.btn-maf-close {
    opacity:1;
    transition:0.2s;
}
.btn-maf-close:hover {
    opacity:0.7;
}
.btn-maf-close svg {
        opacity: 1;
    position: static;
    pointer-events: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.modal {
  opacity: 0;
  filter:blur(5px);
  transition: opacity 0.2s ease-in-out, filter 0.1s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out, filter 0.1s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out, filter 0.1s ease-in-out;
}

.modal.show {
  opacity: 1;
  filter:blur(0px);
}


    .modal {
            --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: ;
    --bs-modal-bg: #061940 !important;
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: 2rem;
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
    outline: 0;
    }
    
    
    .button--hyperion {
	/* font-family: input-mono-narrow, monospace; */
	font-weight: 900;
	padding: 1rem 1.5rem;
	border-radius: 2rem;
	border: 2px solid #DF99F2;
	background:#061940;
	overflow: hidden;
	color: #DF99F2;
}

.button--hyperion span {
	display: block;
	position: relative;
}

.button--hyperion > span {
	overflow: hidden;
}

.button--hyperion > span > span {
	overflow: hidden;
	mix-blend-mode: difference;
}

.button--hyperion:hover > span > span {
	animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
}

@keyframes MoveUpInitial {
	to {
		transform: translate3d(0,-105%,0);
	}
}

@keyframes MoveUpEnd {
	from {
		transform: translate3d(0,100%,0);
	}
	to {
		transform: translate3d(0,0,0);
	}
}

.button--hyperion::before {
	border-radius: 2rem;
	content: '';
	background: #DF99F2;
	transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
	transform-origin: 100% 50%;
}

.button--hyperion:hover::before {
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
}

 
 
 .bg-form-blum {
       background-color: #04142E !important;
        border: 0 !important;
        color: #DF99F2 !important; 
        transition:0.5s;
        
     }
        .bg-form-blum:focus { 
            background-color: #04142E !important;
            border: 0 !important;
            color: #DF99F2 !important;  
            border: 0 !important;
            outline: 3px solid rgba(44,54,115,0.5);    
        }                   
         
         
         
         ::placeholder {
  color: #8FA0BC !important;

}           
       
       
#blurry-filter {
  width: 100%;
  height: 6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100' height='100' style='filter:url(%23f)' opacity='.1'/%3E%3C/svg%3E");
  mask: linear-gradient(black 50%, transparent 100%);
  -webkit-mask: linear-gradient(black 50%, transparent);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  pointer-events: none;
  touch-action: none;
  transition:0.3s;
  opacity:1;
}        

#blurry-filter.none-blur {
    opacity:0;
}