body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Menlo, Roboto Mono, monospace;
  font-weight: 100;
  background-color: rgb(255, 255, 255);
  overflow: hidden;

}

.container {
  width: 100%;
  height: auto;

  margin: 0 auto;

  padding: 0%;

}

header {
  font-size: larger;

}

.center {
  position: relative;
  text-align: center;
  width: auto;
  height: auto;
}

h1 {
  color: rgb(255, 255, 255);
  align-items: center;
}

h2 {
  font-weight: 200;
}

.ui-btn {

  --btn-padding: 15px 20px;
  --btn-hover-bg: rgb(49, 95, 148);
  --btn-transition: 0.3s;
  --btn-letter-spacing: 0.1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: rgb(255, 255, 255);
  --default-btn-color: rgb(255, 255, 255);
  --font-size: 26px;
  /* 👆 this field should not be empty */
  --font-weight: 200;
  --font-family: Menlo, Roboto Mono, monospace;
  /* 👆 this field should not be empty */
}

/* button settings 👆 */
.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  padding-left: 1%;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
  border: none;
}

.ui-btn span {

  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover,
.ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span,
.ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before,
.ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: "Y";
  }

  10% {
    content: "Ye";
  }

  15% {
    content: "ve";
  }

  20% {
    content: "Yeve";
  }

  25% {
    content: "Ve";
  }

  30% {
    content: "Ye";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "Yeve";
  }

  45% {
    content: "Eve";
  }

  50% {
    content: "Yeve";
  }

  55% {
    content: "eve";
  }

  60% {
    content: "Yev";
    right: 0;
  }

  65% {
    content: "Yeve";
    right: 0;
  }

  70% {
    content: "Yeve";
    right: 0;
  }

  75% {
    content: "'veY";
    right: 0;
  }

  80% {
    content: "Yeve";
    right: 0;
  }

  85% {
    content: "Yev";
    right: 0;
  }

  90% {
    content: "Y";
    right: 0;
  }

  95% {
    content: "v";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}

.video-container {
  position: relative;
  height: 100%;
  width: 100%;


}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  /* Видео будет занимать половину ширины экрана */
  height: 100%;
  width: auto;
  height: auto;
  z-index: -2;
  transform: translateY(-40%);
  object-fit: cover;
  background-attachment: fixed;
}


/*ГРАДИЕНТ*/
body:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgb(0, 0, 0, 1));
  z-index: -1;
}


h2 {
  color: white;
  z-index: 0;
  position: relative;
  margin-top: 20%;
  margin-left: 20%;
  margin-right: 20%;


}

a {
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 0;
}