@font-face {
   font-family: 'BeVietnamPro-Regular';
   src: url('BeVietnamPro-Regular.otf') format('opentype');
}

#blablabla, #namer {
   padding: 12px;
   text-align: left;
   border-radius: 12px;
   border: none;
   box-sizing: border-box;
   background-color: #f1f1f1;
   transform-origin: center;
}

#blablabla {
   font-size: 20px;
}

#namer {
   font-size: 40px;
}

#blablabla, #namer {
   width: 100%;
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word;

}

.invisible-input {
   background: transparent; /* Fons transparent */
   border: none;
   outline: none;
   box-shadow: none;
   background: transparent;
   color: #7C7C7C;
   font-weight:bold;
}


#blablabla::placeholder, #namer::placeholder {
   font-family: 'BeVietnamPro-Regular', sans-serif;
   color: #888;
   opacity: 0.8;
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%;
}

#blablabla:focus, #namer:focus {
   outline: none;
   background-color: #e0e0e0;
}

#blablabla:hover, #namer:hover {
   background-color: #e8e8e8;
}

/* New separate class for the glow effect */
.glow-effect:focus {
   box-shadow: 0 0 25px rgba(238, 81, 81, 0.9);
}

.glow-effect:hover {
   box-shadow: 0 0 15px rgba(238, 81, 81, 0.5);
}

@keyframes glow {
   0% { box-shadow: 0 0 10px rgba(238, 81, 81, 0.4); }
   50% { box-shadow: 0 0 30px rgba(238, 81, 81, 0.8); }
   100% { box-shadow: 0 0 10px rgba(238, 81, 81, 0.4); }
}

.glow-effect:focus {
   animation: glow 4s infinite;
}