badge{
    text-align: center;

    display: block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size:160px;
    background-color: antiquewhite;
    border-radius: 15px;
}
body{
    height: 100vh;

background: linear-gradient(
		45deg,
		#ff9a9e 0%,
		#fad0c4 10%,
		#fbc2eb 20%,
		#a6c1ee 30%,
		#a18cd1 40%,
		#fbc2eb 50%,
		#fad0c4 60%,
		#ff9a9e 70%,
		#fad0c4 80%,
		#fbc2eb 90%,
		#a6c1ee 100%
	);
	background-size: 200% 200%;
	animation: multicolor 12s linear infinite;
    }
@keyframes multicolor {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

#badges{
width: 100%;
 display: flex;
 justify-content: center;
 gap:50px;   
 padding-top:60px
}
hero{
    
    display: block;
    width: 100%;
    padding: 40px;
    text-align: center;
   
}

form{
    width: 100%;
    padding-inline:10vw;
    box-sizing: border-box;
    display:flex;
    justify-content: space-around;
}
h1{
    font-size: 80px;
}
p{
    font-size: 40px;
}
h3{
    font-size: 60px;
}
#user_input{
    border:2px solid #7a7a7a00  ;
    border-bottom:5px solid black;
    width: 40vw;
    font-size: 60px;
    background: transparent;
}



button{
    

  display: inline-block;
  font-size: 60px;
  padding: 20px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #9e2dd2;
  color: #ffffff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}

hintspace{
    text-align: center;
}