@font-face{
  font-family:FoRegular;
  src:url(/data/fonts/Regular.ttf);
  font-display:swap
}
@font-face{
  font-family:FoEBold;
  src:url(/data/fonts/eBold.ttf);
  font-display:swap
}
@font-face{
  font-family:FoBold;
  src:url(/data/fonts/Bold.ttf);
  font-display:swap
}
@font-face{
  font-family:FoLight;
  src:url(/data/fonts/Light.ttf);
  font-display:swap
}

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  font-family: FoRegular;
}

html {
  min-height: 100%;
  height: 100%;
}

body {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background: #0f0040;
  background-image: linear-gradient(315deg, black, transparent);
}

.start {
  background: url(/data/assets/rainbow.png) no-repeat center center / cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}

nav {
  width: 100%;
  padding: 30px;
  display: flex;
  justify-content: space-between;
}

.nav-logo-side, .nav-function-side {
  width: 50%;
  display: flex;
  align-items: center;
}

.nav-function-side {
  justify-content: end;
}

.nav-logo-side-text {
  width: 160px;
  height: 16px;
  background-position: center;
  background-image: url(/data/assets/logo-venderes.png);
  background-size: cover;
}

.nav-logo-side-text, .nav-functions {
  margin:0 8px;
  cursor: pointer;
  color: #fff;
}

.nav-functions {
  transition-duration: 0.3s;
  color: #fff;
}

.spec-function {
  padding: 8px 10px;
  font-family: FoRegular;
  letter-spacing: 2px;
  font-variant: all-petite-caps;
  border-radius: 2px;
  border-bottom: 1px solid transparent;
  transition-duration: 0.3s border-color;
}

.spec-function:hover {
  border-color: #fff;
  mix-blend-mode: exclusion;
}

.sections {
  margin: 0 auto;
  width: 100%;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 100px);
}

.header-text {
  padding: 4px 15px;
  /*backdrop-filter: invert(1);*/
  margin: 10px;
  font-size: 120px;
  font-family: FoBold;
  /*mix-blend-mode: soft-light;*/
  /*-webkit-backdrop-filter: invert(1);*/
  background: #fff;
  mix-blend-mode: exclusion;
}

.mini-header-text {
  font-size: 30px;
}

.header-text span {
  /*color: #fff;*/
  color: #0f0040;
  font-weight: 700;
}

.header-text span, .header-text span i {
  font-family: FoBold;
}

.cards-svg {
  width: 100%;
  max-width: 500px;
  background: url(/data/assets/digital-cards.svg) no-repeat center center;
  height: 300px;
  margin: 100px auto 80px;
  mix-blend-mode: luminosity;
}

.section-parent {
  align-items: center;
  padding: 100px 0px;
}

.section-parent, .section3 {
  background-color: #030303;
  min-height: 100%;
}

.blocks-parent {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.content-block {
  margin-top: 22px!important;
  margin-bottom:22px!important;
  border-radius: 40px;
  font-size: 70px;
  color: white;
  padding: 50px;
  font-family: FoBold;
  /* background-color: #fff; */
  margin: 20px auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: linear-gradient(119deg, #131313, transparent), var(--thisimgurl);
  background-color: #101010;
}

.content-block-subtext {
  font-size: 20px;
  padding-top: 30px;
}

.text-center {
  text-align: center;
}

.mark-text {
  font-family: 'FoBold';
  font-size: 50px;
  color: white;
}

.mark-text b {
  font-weight: normal;
  font-family: 'FoEBold';
  /*background: -webkit-linear-gradient(45deg, #f00, #333);*/
  background-image: linear-gradient(119deg, transparent, transparent), url('/data/assets/rainbow2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: #f0ffbf;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content-block-subtext .get-started {
  font-size: 30px;
  padding: 15px 30px;
  border-radius:20px;
  border: none;
  background-color: white;
  color: black;
  font-family: 'FoBold';
  font-variant: all-petite-caps;
  cursor: pointer;
}

.get-started::after {
  display: inline-block;
  padding-left: 8px;
  content: "→";
  -webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -ms-transition: transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

.get-started:hover::after{
  -webkit-transform: translateX(4px);
  -moz-transform: translateX(4px);
  -ms-transform: translateX(4px);
  -o-transform: translateX(4px);
  transform: translateX(4px);
}

hr {
  border-style: solid;
  border-width: 1px 0 0 0;
  margin: 20px 0;
}

footer.basic {
  background-color: #101010;
  padding: 40px 50px 30px;
  color: #a0a0a0;
}

footer.basic .footer-elmt-group {
  margin:30px -10px 0;
}

footer.basic .footer-elmt-group a {
  font-variant: all-small-caps;
  cursor: pointer;
  margin: 0 10px;
  transition: 0.3s border-color;
  border-bottom: 1px solid transparent; 
}

footer.basic .footer-elmt-group a:hover {
  border-color: #a0a0a0;
}


/*login*/

.login-reg-nav {
  width: 100%;
  justify-content: center;
}

.input-box {
  max-width: 500px;
  width: 100%;
  padding: 40px 30px;
  border-radius: 40px;
  color: #fff;
  background-image: linear-gradient(119deg, #212121, transparent);
  background-color: #101010;
  mix-blend-mode: luminosity;
}

.input-box-header {
  font-family: FoBold;
  font-size: 28px;
}

.input-box-labeled-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.input-box-input-label {
  margin-bottom: 10px;
}

.input-box-input {
  border: 1px solid #323232;
  background-color: #000;
  color: #fff;
  padding: 15px 20px;
  border-radius: 15px;
  outline: none;
  font-size: 16px;
  width: 100%;
  margin: 6px 0;
}

.input-box-button {
  cursor: pointer;
  margin-top: 30px;
  border: 1px solid #6532cd;
  outline: none;
  width: 100%;
  background-color: #6532cd;
  transition-duration: 0.3s;
  color: #fff;
  padding: 13px 25px;
  border-radius: 15px;
  font-family: FoBold;
  font-size: 14px;
}

.input-box-button:hover {
  background-color: #7b7b7b;
  border: 1px solid #7b7b7b;
}

.input-box-info-text {
  margin-top: 10px;
  font-size: 15px;
}

.input-box-info-text {
  color: #ddd;
}

.input-box-info-text a {
  color: #ddd;
}

.fill-inputs {
  margin: 30px 0 5px;
}

.main-after-hello {
  font-size: 17px;
  font-family: FoLight;
  color: #a0a0a0;
}