

body, html {
    display: flex;
    justify-content: center;
}

.background-container {
  width: 69em;
  height: 43em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url('../images/background_desktop.png');
  background-size: contain;
  background-repeat: no-repeat;
  min-width: 43em;
  margin-top: 2em;
}

.form-element {
  position: absolute;
  right: 7%;
  top: 41%;
  padding: calc(1vw + 5px);
  transform: translateY(-50%);
  font-family: Chalkduster;
}

.form-element input, 
.form-element button {
  padding: 8px 12px;
/*   margin: 0px; */
  border: 1px solid #000;
  font-family: Chalkduster;
}

.form-element button {
  cursor: pointer;
  background-color: #000;
  color: white;
  position: absolute;
  left: 58%;
  top: 106%;
}

.top-link-container{
  position: relative;
  top: -42%;
  font-size: x-large;
  right: -34%;
}

a {
  color: white;
  text-decoration: none;
  font-size: x-large;
  font-family: Chalkduster;
}

.video-container{
  position: absolute;
  top: 42em;
  height: 10em;
}

video {
  height: 50em;
  margin-bottom: 2em;
}

@media only screen and (max-device-width: 810px) {
  .background-container {
    width: 50em;
    height: 43em;
  }
  a {
    font-size: large;
  }
  .top-link-container{
    top:-44%;
  }
  .form-element {
    right: -1%;
    top: 41%;
    transform: translateY(-90%);
    font-family: Chalkduster;
  }
  .video-container{
    top: 33em;
  }
}

@media only screen and (max-device-width: 480px) {
  
  body{
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .background-container {
    height: 98vh;
    background-image: url('../images/background_mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    width: unset;
    align-items: unset;
    position: unset;
    min-width: unset;
    margin-top: unset;
  }
  
  .video-container{
    position: unset;
    margin-top: -140px;
    padding: 0px;
    height: unset;
  }
  video {
    height: 100%;  
    width: 100%;  
  }

  .form-element {
    font-size: small;
    position: relative;
    width: 60%;
    top: 10%;
  /*   left: 8%; */
    right: unset;
    padding:  unset;
    transform: initial;
  }
  img.captcha{
    position: absolute;
    top: 20%;
    left: 22%;
  }
  .form-element input, 
  .form-element button {
    font-size: small;
    padding: 2px 0px;
    margin: 0px;
    border: 1px solid #000;
    font-family: Chalkduster;
  }

  .form-element button {
    cursor: pointer;
    background-color: #000;
    color: white;
    position: absolute;
    right: 0%;
    top: 22%;
    padding: .7em;
  }

  .top-link-container{
    position: absolute;
    font-size: medium;
    font-family: Chalkduster;
    right: 7.5%;
    top: 2.5%;
  }

  a {
    text-decoration: none;
    color: white;
    font-size: medium;
  }

}