* {
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  width: 100%;
  background-image: url("https://media.ksdk.com/assets/KSDK/images/cc0915a2-222d-4e11-96de-22155c74518f/cc0915a2-222d-4e11-96de-22155c74518f_1920x1080.jpg");
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mouth {
  background-color: rgb(0, 0, 0);
  width: 35em;
  border: 7px solid pink;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap:0rem;
  transition:gap 0.8s;
}

.mouth:hover {
  gap:10rem;
    transition:gap 0.8s;
}

.mouth:hover .content{
   display: block;
   text-align: center;
   overflow:visible;
   }
   
   .content{
     display: none;
   }
   
   h1 {
     margin-top:0px;
  font-size: 35px;
  font-weight: bold;
  background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   }