/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

html * {
	font-family: 'Roboto Mono', monospace;
}

html {
	scroll-behavior: smooth;
}

body > div {
	transition: background 0.3s ease-in-out, color 0.8s ease-in-out;
	color: var(--text-color);
	background-color: var(--bg-color);
}

.flex {
	display: flex;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-vcenter {
	display: flex;
	align-items: center;
}

.flex-hcenter {
	display: flex;
	justify-content: center;
}

/* Global */

.section {
	margin: 0 auto;
	max-width: 1000px;
}

.section-title {
	font-size: 3rem;
	color: var(--primary-color);
	font-weight: 700;
	font-family: 'Lexend Deca', sans-serif;
}

/* Theming */

.dev {
	--bg-color: #1b2028;
	--primary-color: #23a9d5;
	--secondary-color: #4b5975;
	--text-color: #ccccb5;
	--text-secondary-color: #a0a08d;
}

.military {
	--bg-color: #cac4be;
	--primary-color: #648366;
	--secondary-color: #98a599;
	--text-color: #2c2c2c;
	--text-secondary-color: #474747;
}

._8008 {
	--bg-color: #333a45;
	--primary-color: #f44c7f;
	--secondary-color: #292e37;
	--text-color: #e9ecf0;
	--text-secondary-color: #b6b3b5;
}

.matrix {
	--bg-color: #051600;
	/* --primary-color: #15ff00; */
	--primary-color: #11cc00;
	--secondary-color: #003b00;
	--text-color: #d0ffcd;
	--text-secondary-color: #808880;
}
/* 
Can try these: 
1. fledgling
*/