* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #f4f7f6;
	transition: 0.3s;
}

/* HEADER */
header {
	background: linear-gradient(135deg, #1a2a6c, #2949d8);
	color: white;
	text-align: center;
	padding: 25px;
}

header button {
	margin-top: 10px;
	padding: 8px 15px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
}

/* NAV */
.main-menu {
	background: #5c7cfa;
	padding: 10px;
}

.main-menu ul {
	display: flex;
	justify-content: center;
	list-style: none;
}

.main-menu ul li {
	margin: 0 15px;
}

.main-menu ul li a {
	color: white;
	text-decoration: none;
	font-weight: bold;
}

/* LAYOUT */
.container {
	display: flex;
	flex: 1;
}

/* SIDEBAR */
.side-menu {
	width: 250px;
	background: #2949d8;
	color: white;
	padding: 20px;
}

.side-menu ul {
	list-style: none;
}

.side-menu ul li {
	margin: 15px 0;
}

.side-menu ul li a {
	color: white;
	text-decoration: none;
	transition: 0.3s;
}

.side-menu ul li a:hover {
	padding-left: 8px;
}

.side-menu ul li a.active {
	background: white;
	color: #2949d8;
	padding: 5px 10px;
	border-radius: 5px;
}

/* MAIN */
main {
	flex: 1;
	padding: 40px;
	background: #e9f0ff;
}

.activity-box {
	background: white;
	padding: 25px;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-top: 15px;
}

/* CALCULATOR INPUT */
input {
	padding: 8px;
	margin: 5px;
	width: 100px;
}

button.calc-btn {
	padding: 8px 15px;
	margin-top: 10px;
	cursor: pointer;
}

/* FOOTER */
footer {
	background: black;
	color: #888;
	text-align: center;
	padding: 15px;
}

/* DARK MODE */
body.dark {
	background: #1e1e1e;
	color: white;
}

body.dark main {
	background: #2c2c2c;
}

body.dark .activity-box {
	background: #3a3a3a;
}

body.dark .side-menu {
	background: #111;
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.container {
		flex-direction: column;
	}

	.side-menu {
		width: 100%;
		text-align: center;
	}

	.main-menu ul {
		flex-direction: column;
	}
}

.hidden {
	display: none;
}

.side-menu ul ul {
	margin-left: 15px;
	margin-top: 5px;
}