style.css

@import url("https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Signika+Negative:wght@300..700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Roboto+Slab:wght@100..900&family=Signika+Negative:wght@300..700&family=Space+Grotesk:wght@300..700&display=swap');

nav {
  font-family: "Platypi", serif;
  display: flex;
  font-size: 2rem;
  padding: 0.6rem;
  padding-left: 1.5rem;
  background-color: RGB(0, 0, 128);
  color: aliceblue;
}
h1 {
  font-family: "Pacifico", cursive;
}
.valueget,
.result {
  font-family: "Signika Negative", sans-serif;
}
.result {
  display: flex;
}
.valueget input {
  width: 11% !important;
}
img {
  height: 14rem;
  width: 15rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}
.result {
  justify-content: center;
  margin-top: 3rem;
  color:rgb(0, 0, 128);
  font-family: "Roboto Slab", serif;
  font-weight: 900 !important;
  font-size: large;
}

@media screen and (max-width: 768px) {
  .valueget,
  .result {
    display: block;
    margin: 0 auto;
    max-width: 50rem; 
    text-align: center; 
  }

  .result {
    margin-top: 1rem !important;
  }

  .code,
  .amount,
  .button {
    display: block;
    margin: 1rem auto !important; 
    width: 50%; 
  }
  .valueget input{
    width: 50% !important;
  }
}