.container{
   max-width: 1184px;

}
#content {
  text-align: center;
  margin-bottom: 30px;
}

#head {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  border-radius: 12px;
  color: #fff;
}

h1 {
  font-size: 45px !important;
  font-weight: 700 !important;
  margin-bottom: 10px;
  color: #fff !important;
}

.sub-title {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}



.controls{
  margin-top:20px;
  background: #f9f9f9;
	border: 1px solid #f3c6cf;
  padding:25px;
  border-radius:14px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}

.control{
  display:flex;
  flex-direction:column;
}

.control.full{
  grid-column:1/-1;
}

.control input{

	padding: 0px !important;
  border-radius:29px !important;
  border:1px solid #ddd;
}

.control textarea{
	  border-radius:10px;
  border:1px solid #ddd;
	padding: 13px 13px 13px 13px !important;
}

textarea{
  resize:none;
  min-height:80px;
}
 textarea:focus {
	border-color: #e91e63 !important;
	box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.15);
}

input[type="color"]{
  height:51px;
  border:none;
}

.buttons{
  grid-column:1/-1;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button{
  flex:1;
  padding:12px;
  border:none;
  border-radius:93px !important;
  cursor:pointer;
  background:#ff512f;
  color:#fff;
}

button:hover{
  background:#e63b16;
}

.preview-box{
  margin-top:20px;
  border-radius:12px;
  min-height:300px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
  padding:20px;
}

#preview{
  font-size:80px;
  font-weight:700;
  animation:flicker 1.5s infinite alternate;

  display:block;
  width:100%;
  max-width:100%;

  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;

  line-height:1.1;
  text-align:center;
}

@keyframes flicker{
  0%{opacity:1;}
  50%{opacity:.8;}
  100%{opacity:1;}
}

@media(max-width:1024px){
  #preview{
    line-height:1;
    max-width:100%;
  }

  .preview-box{
    min-height:220px;
    padding:15px;
  }
}

@media(max-width:768px){
  .controls{
    grid-template-columns:1fr;
  }

  .buttons{
    flex-direction:column;
  }

  #preview{
    line-height:1;
    max-width:100%;
  }

  .preview-box{
    min-height:180px;
    padding:10px;
  }
}