body,
  html {
  /*background-image: url('arkaplan.jpg');
  background-repeat: no-repeat;*/
}

body,
p,
input,
select,
textarea,
button {
  font-family: "Montserrat", 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;
        }

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

        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: bold;
          box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
          transition: all 0.2s ease-in-out;
          cursor: pointer;
          font-weight: 600;
        }

        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:  50%;
        }

        .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;
        }