/* ---------- Site Colors ---------- */
:root {
	--theme-primary: #b0ecff;
	--theme-secondary: #ffffff;
	--theme-text: #003366;
	--link-text: #003366;
	--theme-bg: rgba(255, 255, 255, 0.65);
}

/* ---------- Base ---------- */

body {
	background-image: url("/info/images/backgrounds/vista.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: "Segoe UI", Arial, sans-serif;
	color: var(--theme-text);
	transition: background 0.4s ease, color 0.4s ease;

}

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

a:hover {
	text-decoration: underline;
}

/* ---------- Header ---------- */

header{color:white}
/* ---------- Glass Box ---------- */

.box1 {
	background: var(--theme-bg);
	backdrop-filter: blur(10px);
	color: var(--theme-text);
	border-radius: 20px;
	box-shadow:
		0 6px 16px rgba(0,0,0,0.25),
		inset 0 2px 6px rgba(255,255,255,0.7);
	border: 1px solid rgba(255,255,255,0.6);
}

.box2 {
	background: var(--theme-bg);
	backdrop-filter: blur(10px);
	color: var(--theme-text);

	border-radius: 20px;
	box-shadow:
		0 6px 16px rgba(0,0,0,0.25),
		inset 0 2px 6px rgba(255,255,255,0.7);

	border: 1px solid rgba(255,255,255,0.6);
	line-height: 1.8;
}

/* ---------- Buttons ---------- */

.button {
	display: inline-block;
	padding: 6px 18px;
	margin: 6px;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none;

	border-radius: 12px;
	border: 2px solid rgba(255,255,255,0.6);


	color: var(--theme-text);

	box-shadow:
		0 3px 6px rgba(0,0,0,0.3),
		inset 0 2px 4px rgba(255,255,255,0.7);

	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.button:hover {
	box-shadow:
		0 5px 10px rgba(0,0,0,0.35),
		inset 0 2px 6px rgba(255,255,255,0.9);
}

.button:active {
	transform: translateY(2px);
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.3);
}

.buttoncolor1 {
	background: linear-gradient(to bottom,var(--theme-primary),var(--theme-secondary));
}
.buttoncolor2 {
	background: linear-gradient(to bottom,#ff5555,var(--theme-secondary));
}

/* ---------- Headings ---------- */

h1 {
	color: var(--theme-text);
}

h2 {
	color: var(--theme-text);
}

h3 {
	color: var(--theme-text);
}