body,html{
  background-image: url("https://i.postimg.cc/MpYBJHMF/eb7a051a34607369a0a4feed1eb596d3.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding:0;
  background-attachment: fixed;
}
.parent{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
}
.child{
  text-align: center;
  padding: 0 20px 20px 20px;
  backdrop-filter: blur(10px);
  display: none;
}
.search-box{
  background: rgba(0,0,0,0.7);
  border: 2px solid rgba(0, 0, 0,1);
  align-self: center;
  place-self: center;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0.5px 0.5px 10px white;
}
input{
  outline: none;
  border: none;
  background: white;
  padding: 10px;
  font-size: medium;
  border-radius: 5px;
}
button{
  outline: none;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  font-size: medium;
  background-color: lightgreen;
  box-shadow: 2px 2px 1px white;
  transition: box-shadow 0.25s ease,transform 0.25s ease-in-out;
}
.text{
  padding: 20px;
  background: rgba(10, 100, 255,0.5);
  display: none;
  border: 2px solid purple;
  border-radius: 5px;
  color: white;
  backdrop-filter: blur(5px);
  place-self: center;
  align-self: center;
  width: 80%;
  margin-bottom: 5px;
}
img{
  height: 25%;
  align-self: center;
  place-self: center;
  display: none;
  margin-bottom: 10px;
  border-radius: 10px;
  image-rendering: auto;
}
.desc{
  padding: 20px;
  color: white;
  font-size: 17px;
  background: linear-gradient(180deg, #00bfff, #00aaff);
  display: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 10px;
  place-self: center;
  width: 80%;
  align-self: center;
  text-align: center;
}
.resh{
  animation: reshape 1s 1 ease-in alternate-reverse;
}
.text span {
  color: #FFD700;              /* Gold */
  border: 1px solid #800080;   /* Purple border */
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(128, 0, 128, 0.15); /* Light purple tint */
  font-weight: 600;
}

.desc span {
  display: inline-block;
  color: #FFD700;              /* Gold */
  background: linear-gradient(90deg, #001F8C, #0033CC); /* Smooth blue gradient */
  border: 1px solid #800080;   /* Purple border */
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  
  margin: 5px 5px 6px 5px ;
  text-align: center;
}
button:hover{
 animation-name: res;
 animation-duration: 0.25s;
 animation-iteration-count: 1;
}
@keyframes res{
  0%{
    
  }
  100%{
  box-shadow: 0.5px 0.5px 1px white;
  transform: translate(2%,2%);
  }
}
@keyframes reshape{
  
  0%{
    
  }
  100%{
    transform: scale(1.05);
  }
}