@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');
  body,
  html {
  /*background-image: url('arkaplan.jpg');
  background-repeat: no-repeat;*/
  font-weight: 400;
}

body,
p,
input,
select,
textarea,
button {
  font-family: "Quicksand", sans-serif;
  letter-spacing: -0.2px;
  font-size: 16px;
}

div,
p {
  /*color: #BABECC;*/
  text-shadow: 1px 1px 1px #FFF;
}

@media screen (max-width: 767px) {
  form {
    padding: 16px;
    top: 50px;
    width: 100%;
    margin: 0 auto;
  }}

  @media screen (min-width: 768px) {
    form {
      padding: 16px;
      width: 400px;
      margin: 0 auto;
    }}

    .segment {
      padding: 32px 0;
      text-align: center;
    }

    button,
    input {
      border: 0;
      outline: 0;
      font-size: 16px;
      border-radius: 15px;
      padding: 14px;
      background-color: #EBECF0;
      text-shadow: 1px 1px 0 #FFF;
    }

h4 {
  font-size: 20px;
  font-weight: 600;
}

    label {
      display: block;
      margin-top: 20px;
      margin-bottom: 5px;
      width: 100%;
      font-size: 14px;
      font-weight: 600;
    }

    input {
      margin-right: 8px;
      box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
      width: 90%;
      box-sizing: border-box;
      transition: all 0.2s ease-in-out;
      appearance: none;
      -webkit-appearance: none;
      text-align: center;
    }

    input:focus {
      box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
    }

    button {
      color: #61677C;
      font-weight: 600;
      box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
    }

    button:hover {
      box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
      background-color: red;
    }

    button:active {
      box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
    }

    button .icon {
      margin-right: 8px;
    }

    button.unit {
      border-radius: 8px;
      line-height: 0;
      width: 48px;
      height: 48px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 0 8px;
      font-size: 19.2px;
    }

    button.unit .icon {
      margin-right: 0;
    }

    button.red {
      display: block;
      width: 100%;
      color: #AE1100;
      width:  70%;
    }

    .input-group {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    .form {
      max-width: 400px;
      background-color: #fff;
      background: rgba(255, 255, 255, 0.5);
      border-radius:10px
    }

    .input-group label {
      margin: 0;
      flex: 1;
    }

a {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: none;
    color: red;
}