* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-image: url(data:image/jpeg;base64,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);
  background-size: cover;
  width: 100vw;
  height: 100vh;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 5%;
  width: 100%;
}
.container h1 {
  margin: 1% 0;
  font-size: 3rem;
  text-transform: uppercase;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-decoration: none !important;
  color: rgb(236, 204, 255);
  border-bottom: 4px solid;
}
@keyframes scale {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.child {
  height: auto;
  text-align: center;
  width: 35%;
  border: 2px solid;
  padding: 2%;
  background: url(https://th.bing.com/th/id/OIP.9oB0DMLrQFr6X358gChFMgHaEK?w=310&h=180&c=7&r=0&o=5&dpr=1.2&pid=1.7)
    no-repeat center center/cover;
  opacity: 1.3;
  border-radius: 50px;
  border: 3px solid;
  animation: box 3s infinite;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  box-shadow: blue 0px 0px 0px 2px inset;
}

.child input {
  width: 80%;
  height: 40px;
  border-radius: 50px;
  outline: none;
  font-size: 1rem;
  text-align: center;
  outline: none;
  border: none;
  border: 3px solid transparent;
  animation: border 3s infinite ease-in-out;
}
.child input::placeholder {
  font-size: 1rem;
  padding: 10px;
  color: rgb(78, 74, 52);
  font-weight: bold;
  animation: scale 3.5s infinite;
}
.child button {
  border-radius: 100%;
  width: 40px;
  height: 40px;
  outline: none;
  border: none;
  border: 3px solid transparent;
  animation: border 3s infinite ease-in-out;
}
@keyframes border {
  from {
    border-color: blue;
    color: rgb(143, 79, 131);
  }
  50% {
    border-color: blue;
    color: rgb(143, 79, 131);
  }
  100% {
    border-color: blue;
    color: rgb(143, 79, 131);
  }
}
.child button i {
  font-size: 1rem;
  color: rgb(235, 203, 22);
  animation: border 3s infinite ease-in-out;
}
.child-2 {
  width: 100%;
  height: 35%;
  display: flex;
  justify-content: center;
}
.child-2 div {
  margin-top: 10px;

  border-radius: 100%;
  width: 100%;
  height: 100%;
}
#weathercondition,
#temperature,
#cityname,
#humidity,
#wind,
#feellike {
  margin-top: 10px;
  color: rgb(218, 206, 191);
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  text-align: start;
}
.child-2 div img {
  text-align: center;
  width: 60%;
  height: 170px;
}
.child-3 {
  width: 100%;
  border: 5px solid white;
  text-align: center;
}
@media (min-width: 576px) and (max-width: 800px) {
  .child {
    width: 60%;
  }
}

@media (max-width: 575.97px) {
  .child {
    width: 90%;
    padding: 5%;
  }
  .container h1 {
    font-size: 2rem;
    margin-bottom: 5%;
  }
  .child-2 {
    padding: 10px;
  }
}