:root {
  --white: white;
  --black: black;
}

body, button, input, textarea {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
}

body {
  color: #333;
  background-color: #010101;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.image {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

.page-wrapper {
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-2 {
  z-index: -10;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.div-block {
  width: 70%;
  position: relative;
}

.div-block-2 {
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.background-video {
  z-index: 1;
  width: 600px;
  position: absolute;
  top: 9%;
  bottom: 0%;
  left: 9%;
  right: 0%;
}

.image-3 {
  z-index: 2;
  position: absolute;
}

.div-block-3 {
  justify-content: center;
  align-items: center;
  height: 700px;
  padding-bottom: 37px;
  display: flex;
}

.image-4 {
  width: 100%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.background-video-2 {
  width: 100%;
  height: 100%;
}

.image-5 {
  z-index: 10;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

@media (max-width: 768px) { 
  .image-5 {
    height: 65%;
    margin-bottom: 128px;
  }
}

.background-video-3 {
  z-index: -10;
  width: 100%;
  height: 100%;
  position: absolute;
}

.div-block-4 {
  width: 300px;
  height: 64px;
  margin-right: 128px;
  position: absolute;
}

.div-block-5 {
  filter: blur(2px);
  border: 2px solid #6B470E;
  width: 300px;
  height: 64%;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.input {
  z-index: 100;
  color: #6B470E;
  width: 360px;
  height: 64px;
  margin-bottom: 128px;
  position: absolute;
  backdrop-filter: blur(20px);
}

.form {
  height: 100%;
  display: flex;
}

.text-field {
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid #6B470E;
  height: 100%;
  margin-right: 8px;
  box-shadow: 0 0 10px #6B470E;
  color: #6B470E;
  opacity: 60%;
}

.text-field:focus {
  outline: none;
  border: 2px solid #6B470E; 
  box-shadow: 0 0 10px #6B470E;
  opacity: 100%;
  
}

.submit-button {
  background-color: #6B470E;
  width: 128px;
  box-shadow: 0 0 10px #6B470E;
  color:#060905;
  font-weight: bold;
  letter-spacing: 1px;
  opacity: 60%;
}

.submit-button:hover {
  opacity: 100%;
}

.success-message {
  color: #12B438 !important;
  background-color: rgba(221, 221, 221, 0);
}

.error-message {
  color:rgb(197, 8, 8) !important;
  background-color: rgba(255, 222, 222, 0);
}

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

@media screen and (min-width: 1280px) {
  .image {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }
}

@media screen and (min-width: 1440px) {
  .background-video {
    width: 650px;
    top: 15%;
  }
}

@media screen and (min-width: 1920px) {
  .background-video {
    z-index: 1;
    object-fit: cover;
    width: 900px;
    height: 700px;
    top: 12%;
    left: 8%;
  }

  .image-3 {
    z-index: 2;
    position: relative;
  }
}

@media screen and (max-width: 991px) {
  .div-block-4 {
    margin-right: 64px;
  }
}

@media screen and (max-width: 767px) {
  .div-block-4, .input {
    margin-right: 0;
  }
}

@media screen and (max-width: 479px) {
  .input {
    width: 300px;
  }
}