* {
	padding: 0;
	margin: 0;
	font-family: Avenir Next, sans-serif;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}
}
:root {
	transition-duration: 0.5s;
}

html.lightMode {
	--primary: linear-gradient(45deg, #00e5d7, #00aeff);
	--secondary: #000000;
	--bg-first: #f1f5f9;
	--bg-second: #e2e8f0;
	--text: #10202f;
	--border: #94a3b8;
	--shadow: #1e293b;
	--padding-first: 36px;
}
html.darkMode {
	--primary: linear-gradient(#1e293b);
	--secondary: #ffffff;
	--bg-first: #0f172a;
	--bg-second: #1e293b;
	--text: #ffffff;
	--border: #334155;
	--shadow: transparent;
	--padding-first: 36px;
}

header {
	background-image: var(--primary);
	color: #ffffff;
	padding: var(--padding-first);
}
#content {
	background-color: var(--bg-first);
	color: var(--text);
	padding: var(--padding-first);
}
footer {
	background-color: var(--bg-second);
	color: var(--text);
	padding: var(--padding-first);
}

a {
	text-decoration: none;
}

a.button,
a.button-filled,
a.button-error {
	padding: 13.5px 18px;
	margin: 9px 0;
	border: none;
	border-radius: 9px;
	background-color: var(--bg-second);
	color: #ffffff;
}
a.button-filled {
	background-color: var(--primary);
	color: #ffffff;
}
a.button-error {
	background-color: #ef4444;
	color: #ffffff;
}

header a.button {
	background-color: #ffffff50;
	color: #ffffff;
}
header a.button-filled {
	background-color: #ffffff;
	color: #000000;
}


.container {
	padding: 18px 0;
}
.flex-container {
	padding: 18px 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 9px;
}

.card {
	border: none;
	border-radius: 9px;
	background-color: var(--bg-second);
	flex-basis: 33.33%;
	padding: 9px;
}