/* ========================================
	Theme Variables
   ======================================== */
:root {
	
	--bg_img: url('https://cache.e-cards.com/images/backgrounds/shamrock.gif');
	--menu_emoji: "🍀";
	
	--body_bg: #a9e4aa;
	--page_bg: rgba(236, 244, 235, 1);
	--page_bg_top: var(--page_bg);
	--page_bg_bottom: rgba(243, 255, 242, 1);
	--cont_box_bg: rgba(237, 247, 237, 1);
	
	--text_color: #00096f;
	--text_heading: #0a711d;
	
	--link: #0005dd;;
	--link_viited: rgba(0, 69, 215, 1);
	--link_active: rgba(0, 69, 215, 1);
	--link_hover: rgba(0, 69, 215, 1);
	
	--nav:  #535eff;
	--nav_viited: #535eff;
	--nav_active: #535eff;
	--nav_hover: #535eff;
	
	--page_border: #1800b7;

}


/* ========================================
   Global
   ======================================== */

body {
	background-color: #e2e8ff;
	background-image: var(--bg_img);
	background-size: auto;
	background-repeat: repeat;
	color: var(--text_color);
}
   
a:link {
	color: var(--link)
}
a:visited {
	color: var(--link_visited);
}
a:hover {
	color: var(--link_hover);
}
a:active {
	color: var(--link_cative);
}


h1,
h2,
h3 {
	color: var(--text_heading);
}


/* ========================================
   Page Container
   ======================================== */

#page {
	background-color: var(--page_bg_top);

	background: linear-gradient(
		to bottom,
		var(--page_bg_top) 0%,
		var(--page_bg_top) 50%,
		var(--page_bg_bottom) 100%
	);

	border-color: var(--page_border);
}



/* ========================================
   Logo
   ======================================== */



/* ========================================
   Left Nav
   ======================================== */

#left_nav li::before {
	content: var(--menu_emoji);
}

#left_nav li {
	color: var(--nav);
}

#left_nav li:hover {
	color: var(--nav_hover);
}

#left_nav li:active {
	color: var(--nav_hover);
}

#left_nav li:visited {
	color: var(--nav_hover);
}


/* ========================================
   Content Boxes
   ======================================== */
.content_box {
	background-color: var(--cont_box_bg);
}

.content_box {
}

.content_box_title {
}

.content_box_content {
	color: var(--body_text);
}



/* ========================================
   Misc
   ======================================== */