:root {
	--header-color: #2A4B82;
	--header-font-color: white;
	--hover-color: #1D355B;
	--content-font-color: black;
	--toggle-color: #21262E;
	--bg-color: #EAF2FF;
}

.dark-mode {
	--header-color: #2E538F;
	--header-font-color: black;
	--hover-color: #213D69;
	--content-font-color: white;
	--toggle-color: #EAF2FF;
	--bg-color: #21262E;
}

body {
	margin: 0;
	background-color: var(--bg-color);
	color: var(--content-font-color);
}

.collapsible {
	background-color: var(--header-color);
	color: var(--header-font-color);
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 18px;
}

.active, .collapsible:hover {
	background-color: var(--hover-color);
}

.content {
	padding: 5px 5px;
	overflow: hidden;
	display: none;
	background-color: var(--bg-color);
	color: var(--content-font-color); 
}

.push {
	border: 1px solid #ccc;
	display: inline-block;
	cursor: pointer;
	color: var(--header-font-color);
	background-color: var(--header-color);
	font-size: 18px;
	border-radius: 4px;
	border: none;
	padding: 6px 8px;
	margin: 3px 3px;
}

.header {
	display: flex;
	background-color: var(--hover-color);
}

.header button {
	color: var(--header-font-color);
	background-color: var(--header-color);
	font-size: 20px;
	font-align: center;
	border: 2px solid var(--hover-color);
	height: 40px;
	flex: 1;
}

.header div {
	flex: 1;
}

.title {
	display: table;
	margin: 5px auto;
	color: var(--header-font-color);
	font-size: 20px;
}

.wrapper {
	display: none;	
	border: none;
	width: 100%;
	height: 100vh;
}

.home {
	display: grid;	
}

.home button {
	color: var(--header-font-color);
	background-color: var(--header-color);
	font-size: 20px;
	font-align: center;
	border: 2px solid var(--hover-color);
	height: 40px;
	overflow: hidden;
}