@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');




*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  
  align-items: center;
  justify-items: center;
  overflow-y: hidden;
  background-color: black;
}

#voice{
  width: 355px;
  height: 290px;
  border: none;
  position: relative;
  top: 80px;
  left: 5px;
  display: none;
  border-radius: 100px;
  background: transparent;
  transform: rotateX(180deg);

}

#btn{
  width: 100px;
  height: 100px;
  border: 2px solid #000000;
  border-radius: 100px;
  position: absolute;
  bottom: 30px;
  left: 135px;
  overflow-y: hidden;
  align-items: center;
  justify-content: center;
  transition: ease-in 0.5s;
  background: linear-gradient(to top , #FFFFFFDB,#FFFFFF1F);
  
  
}

#btn:hover{
  box-shadow: 2px 2px 20px #0015FF;
}


#mic-svg{
  
  width: 46px;
  align-items: center;
  justify-content: center;
  overflow-y: hidden;
  
}

#ai-logo{
  
  width:75px;
  position: absolute;
  left: 10px;
  top: 10px
}

#design{
  
  position: absolute;
  bottom: 50px;
  width: 385px;
  height: 365px;
  border-radius: 100%;
  position: absolute;
  bottom: -200px;
  right: -11.5px;
  overflow-y: hidden;
  z-index: -1;
  background: linear-gradient(to left,
  #005DFF,#BEC3FF);
}

#head{
  position: absolute;
  top: 25px;
  left: 85px;
  font-size: 30px;
  color: #638FFF;
  font-family: "Protest Guerrilla", sans-serif;
}

#head-2{
  position: absolute;
  top: 20px;
  left: 192px;
  font-size: 35px;
  color: #D6E1FF;
  box-shadow: blur(10px);
  font-family: "Protest Guerrilla", sans-serif;
  
}