#loader{
	left:10px;
	position:relative;
	top:3px;
	display:none;
}

#success {
	display:none;
	margin-top:10px;
}
#success:target {
	display:block;
}
#error {
	display:none;
	border: 1px solid #C2160A;
	border-left: 4px solid #C2160A;
	background: #FAEDEC;
	border-radius: 4px;
	padding: 12px;
	font-size: larger;
	color: #C2160A;
}
#error:target {
	display:block;
}

.shortit {
	background:#fff;
	border:1px solid #CCC;
	margin:10px;
	display:block;
	color:#333333;
	padding:5px;
}

:root {
    --accent-color: #ff3e81; /* Vibrant Pink/Red */
    --accent-hover: #e62e6d;
    --gradient-start: #6a11cb; /* Indigo */
    --gradient-end: #2575fc;   /* Purple */
}

.form-container {
    max-width: 650px;
    margin: 3rem auto;
    padding: 3rem;
    background: #ffffff;
    border-radius: 28px;
    /* Soft colored shadow to match the theme */
    box-shadow: 0 5px 10px rgba(99, 102, 241, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
}

/* Add a decorative color bar at the top */
.form-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
}

.form-container h4 {
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 1.75rem;
}

.form-container .btn {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border: none;
    color: white;
	font-weight:600;
}

.form-container .btn:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}