body {
    background: linear-gradient(180deg, #f3f0ff 0%, #fef2f8 100%);
    color: #111;
  }
  

#intro-section {
    background: linear-gradient(90deg, #ddd6fe 0%, #fbcfe8 100%);
    padding: 2rem 1rem;
}

h1{
    padding-top: 10px;
    background-image: linear-gradient(
    to right,
    #7c3aed, /* from-violet-600 */
    #db2777, /* via-pink-600 */
    #7c3aed  /* to-violet-600 */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1.5rem; /* mb-6 */
  font-weight: 700; /* font-bold */
  font-size: 3rem; /* text-5xl (approx) */
}

#submit-form{
    background-color: white;
}

#show-form{
    background: linear-gradient(90deg, #ddd6fe 0%, #fbcfe8 100%);
    padding: 1rem 0.5rem;
}

#description{
    font-size: 1.25rem;
    line-height: 1.75rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.btn-gradient {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    color: #fff;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
  
.btn-gradient:hover,
.btn-gradient:focus {
background: linear-gradient(90deg, #7c3aed, #db2777);
box-shadow: 0 0.5rem 1rem rgba(219, 39, 119, 0.5);
color: #fff;
}

.form-control:focus {
border-color: #8b5cf6;
box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
outline: none;
}

.rounded-4 {
border-radius: 1rem !important;
}

.form-container {
    background: #ffffff;
    /* max-width: 600px;  */
    margin: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    padding: 2rem; /* Add this line for inner spacing */
}

#confession-form {
    display: none;
}

#confessions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
    /* padding: 1rem; */
    overflow-wrap: break-word;
  }
  
.confession-card {
transition: box-shadow 0.3s ease;
}

.confession-card:hover {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2)
}

.confession-card:hover #card-title {
    color: rgb(59 130 246); /* or any color you want */
}

.confession-footer {
    border-top: 1px solid #e5e7eb; /* border-gray-300 */
}
  
.card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.confession-footer {
    height: 40px;
}