/******************************************
/* CSS
/*******************************************/

/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/
img{
  display: block;
  margin: 0 auto;
}


/******************************************
/* ADDITIONAL STYLES
/*******************************************/

.typing-p {
  display: inline-block;
  padding: 8px 16px;
  background: #b8fac1;
  border-radius: 12px;
  color: #323a31;
  font-size: 14px;
}

.typing-p span {
  animation: typing 1.4s infinite;
  display: inline-block;
}

@keyframes typing {
  0%, 60%, 100% { opacity: 0.3;}
  30% {opacity: 1;}
}

@media (max-width: 480px){
  input{
    flex-direction: column;
    gap: 8px;
  }

  input, #clear {
    width: 100%;
    font-size: 16px !important;
    padding: 12px !important;
  }

  #clear{
    margin-top: 5px;
  }
}