html {
    background: #edf2f7;
}

h1, h2, h3, h4 {
    font-family: "Lilita One", serif;
    font-weight: 400;
    font-style: normal;
}

.petal-color-0 { background-color: none; }
.petal-color-1 { background-color: #F24822; }
.petal-color-2 { background-color: #FFA629; }
.petal-color-3 { background-color: #FFCD29; }
.petal-color-4 { background-color: #BC0; }
.petal-color-5 { background-color: #14AE5C; }


.rotate {   
    animation-name: spin;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

	/* Success message - Green gradient */
	.message-gradient-success {
		background: linear-gradient(135deg, #0097b2 0%, #7ed957 100%);
		color: #064e3b;
		border: none;
	}

	/* Error message - Red gradient */
	.message-gradient-error {
		background: linear-gradient(135deg, #fecaca 0%, #f87171 100%);
		color: #7f1d1d;
		border: none;
	}

	/* Warning message - Yellow gradient */
	.message-gradient-warning {
		background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
		color: #78350f;
		border: none;
	}

	/* Info message - Blue gradient */
	.message-gradient-info {
		background: linear-gradient(135deg, #bfdbfe 0%, #60a5fa 100%);
		color: #1e3a8a;
		border: none;
	}

	/* Common styles for all message alerts */
	[class*='message-gradient-'] {
		margin-bottom: 1rem;
	}

	/* Style for close button */
	[class*='message-gradient-'] .uk-alert-close {
		color: currentColor;
		opacity: 0.7;
	}

	[class*='message-gradient-'] .uk-alert-close:hover {
		opacity: 1;
	}