@font-face {
  font-family: "Spartan MB";
  src: url("//db.onlinewebfonts.com/t/b6e5385a4772a5792603dfb941fd7909.eot");
  src: url("//db.onlinewebfonts.com/t/b6e5385a4772a5792603dfb941fd7909.eot?#iefix")
      format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/b6e5385a4772a5792603dfb941fd7909.woff2")
      format("woff2"),
    url("//db.onlinewebfonts.com/t/b6e5385a4772a5792603dfb941fd7909.woff")
      format("woff"),
    url("//db.onlinewebfonts.com/t/b6e5385a4772a5792603dfb941fd7909.ttf")
      format("truetype"),
    url("//db.onlinewebfonts.com/t/b6e5385a4772a5792603dfb941fd7909.svg#Spartan MB")
      format("svg");
}
@font-face {
  font-family: "Proxima Nova";
  src: url("//db.onlinewebfonts.com/t/bf9f5d50c1b928ff21436517a1a95ad9.eot");
  src: url("//db.onlinewebfonts.com/t/bf9f5d50c1b928ff21436517a1a95ad9.eot?#iefix")
      format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/bf9f5d50c1b928ff21436517a1a95ad9.woff2")
      format("woff2"),
    url("//db.onlinewebfonts.com/t/bf9f5d50c1b928ff21436517a1a95ad9.woff")
      format("woff"),
    url("//db.onlinewebfonts.com/t/bf9f5d50c1b928ff21436517a1a95ad9.ttf")
      format("truetype"),
    url("//db.onlinewebfonts.com/t/bf9f5d50c1b928ff21436517a1a95ad9.svg#Proxima Nova")
      format("svg");
}
* {
  box-sizing: border-box;
}

body {
  background-image: url("bg-img.png");
  font-family: "Proxima Nova";

}
.bodyy {
  min-height: 100vh;
}
.top-text {
  margin-top: 80px;
  text-align: center;
}
.top-text h1 {
  font-size: 30px;
}
.form label {
  font-size: 12px;
}
.form button {
  font-size: 14px;
  color: white;
}
.form select {
  border-right: 16px solid transparent;
}
.top-text p {
  font-size: 20px;
}
.flexed-div {
  display: flex;
  justify-content: center;
}
.container {
  display: inline-block;
  justify-content: center;
  border: solid 2px #d5f1ee;
  padding: 25px;
  margin-top: 40px;
  border-radius: 10px;
  background: #d5f1ee;
}
.input-area {
  padding: 10px;
  width: 350px;
  height: 35px;
  background: #fff;
  border: #d5f1ee;
  border-radius: 20px;
  margin: 3px 0px 15px 0px;
  font-size: 12px;
}
.submit {
  background: #2079ff;
  border: #2079ff;
  width: 350px;
  height: 35px;
  margin-top: 35px;
  border-radius: 20px;
  color: white;
}
.img-container {
  display: flex;
  justify-content: center;
}
.img-container img {
  width: 100px;
  height: 100px;
}

.demo {
  max-width: 0.9rem;
}
.result {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
}
.footer {
  margin-top: 30px;
  padding-top: 1rem;
  background-color: #d5f1ee;
  width: 100%;
  height: 70px;
}
.footer p {
  text-align: center;
  font-size: 14px;
}
.input-box {
  display: flex;
  align-items: center;
  background: #fff;
  border: #d5f1ee;
  border-radius: 20px;
  overflow: hidden;
  width: 350px;
  height: 35px;
}

.input-box .prefix {
  font-weight: 300;
  font-size: 14px;
  color: #999;
  background: #fff;
  padding: 0.5rem;
}

.input-box input {
  flex-grow: 1;
  background: #fff;
  border: none;
  outline: none;
}

.input-box:focus-within {
  border-color: #777;
}

@media only screen and (max-width: 768px) {
    body{
        background-size: 100vh 100vw 100vw;
    }
  .top-text {
    margin-top: 70px;
  }
  .top-text h1 {
    font-size: 20px;
  }
  .top-text p {
    font-size: 15px;
  }
  .container {
    padding: 20px;
  }
  .form label {
    font-size: 9px;
  }
  .form button {
    font-size: 12px;
  }
  .input-area {
    width: 100%;
    height: 30px;
    margin: 3px 0px 10px 0px;
    min-width: 260px;
    font-size: 10px;
  }
  .submit {
    width: 100%;
    height: 30px;
    min-width: 260px;
  }
  .input-box {
    width: 100%;
    height: 30px;
    min-width: 260px;
  }
  .footer p {
    font-size: 10px;
  }
}