@font-face {
  font-family: "Amithen";
  src: url("../fonts/amithen-webfont.eot");
  src: url("../fonts/amithen-webfont.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/Amithen.ttf") format("truetype"); /* Safari, Android, iOS */
}

@font-face {
  font-family: "Metrisch-bold";
  src: url("../fonts/Metrisch-Bold-webfont.eot");
  src: url("../fonts/Metrisch-Bold-webfont.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/Metrisch-Bold-webfont.ttf")
      format("truetype"); /* Safari, Android, iOS */
}

@font-face {
  font-family: "Metrisch-light";
  src: url("../fonts/Metrisch-Light-webfont.eot");
  src: url("../fonts/Metrisch-Light-webfont.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/Metrisch-Light-webfont.ttf")
      format("truetype"); /* Safari, Android, iOS */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Metrisch-light;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
  padding: 30px;
}

.logo-box {
  position: absolute;
  /* left: 2%; */
  margin: 5px;
  display: block;
}

.logo {
  height: 10vh;
  color: white;
}

.form {
  top: 100px;
  left: 500px;
  width: 800px;
  height: 2251px;
}

footer {
  width: 100%;
  background-color: #f1f1f1;
  padding: 2% 30%;
}

@media (max-width: 500px) {
  .form {
    width: 490px;
  }
}

@media (max-width: 450px) {
  .form {
    width: 440px;
  }

  footer {
    padding: 2% 2%;
  }
}

@media (max-width: 390px) {
  .form {
    width: 380px;
  }
}

@media (max-width: 320px) {
  .form {
    width: 310px;
  }
}