img {
  width: 50px;
  height: 50px;
}

body {
  background-image: url(slike/cvece.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: rgb(31, 4, 57);
}

h2 {
  color: rgb(139, 26, 244);
  font-style: italic;
  text-shadow: 1px 1px 1px grey;
  padding: 20px;
}

form,
.pozadina {
  background-color: aliceblue;
  opacity: 0.9;
  border-radius: 15px;
  padding: 20px;
  display: inline-block;
  width: 50%;
  position: relative;
  left: 25%;
}
input {
  padding: 10px;
  margin: 10px;
}

input[type="number"]:focus {
  border: 3px solid purple;
}
input[type="number"] {
  border-radius: 5px;
}
input[type="reset"],
input[type="submit"] {
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
}

input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: purple;
  color: white;
}

.pozdrav {
  color: aliceblue;
  text-shadow: 5px 5px 5px black;
  text-transform: uppercase;
  text-align: center;
  padding: 80px;
}
@media only screen and (max-width: 700px) {
  form,
  .pozadina {
    width: 90%;
    left: 2%;
    padding: 10px;
  }
  .pozdrav {
    padding: 40px;
    font-size: medium;
  }
  img {
    width: 30px;
    height: 30px;
  }
  h2 {
    margin: 5px;
    padding: 0px;
    font-size: 20px;
  }
  input {
    padding: 5px;
    margin: 10px;
  }
  input[type="number"] {
    width: 55%;
    font-size: 12px;
  }
  p {
    padding: 5px;
    margin: 5px auto;
    width: 90%;
  }
}