:root {
	/*colours*/
	--primary: #954ECA;
	--secondary: #B98EFF;
	--background: #EFE5F7;
	--text: #000000;
	--accent: #FF4C4C;
	--highlight: #FBE4FF;
	--link: #954ECA;
	--hover: #6B2E99;
	--error: #FF4C4C;
	--success: #4CAF50;

	--border: 2px solid var(--primary);
	--border-input: 1px solid var(--highlight);

	/*fonts*/
	--font: 'Trebuchet MS', sans-serif;

	/*spacing*/
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;

	--success-bg: #d4edda;
  --success-text: #155724;
  --success-border: #c3e6cb;

  --error-bg: #f8d7da;
  --error-text: #721c24;
  --error-border: #f5c6cb;

  --info-bg: #d1ecf1;
  --info-text: #0c5460;
  --info-border: #bee5eb;

  --warning-bg: #fff3cd;
  --warning-text: #856404;
  --warning-border: #ffeeba;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--background);
	min-height: 100vh;
	font-family: var(--font);
	color: var(--text);
}

.MainContent {
    clear: both;
    padding: 1%;
}

h1, h2, h3 {
	color: var(--primary);
}

a:link, a:visited {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	color: var(--hover);
	text-decoration: none;
}

a:active {
	color: var(--accent);
	text-decoration: none;
}

.hidden {
	display: none !important;
}

.messages {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    text-align: center;
    width: fit-content;
    max-width: 90%;
}

.alert {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: max-content;
    min-width: 0;
    max-width: 400px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);

    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.alert.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

.alert-success {
  color: var(--success-text);
  background-color: var(--success-bg);
  border-color: var(--success-border);
}

.alert-error {
  color: var(--error-text);
  background-color: var(--error-bg);
  border-color: var(--error-border);
}

.alert-info {
  color: var(--info-text);
  background-color: var(--info-bg);
  border-color: var(--info-border);
}

.alert-warning {
  color: var(--warning-text);
  background-color: var(--warning-bg);
  border-color: var(--warning-border);
}

.close-btn {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin-left: 1rem;
}

@media (max-width: 1280px) {


}

@media (max-width: 1024px) {
}


@media (max-width: 640px) {

}