/* ============================================
   LEFT NAV COLOR VARIABLES
   ============================================ */

:root {
	
	-cont_box_bg: rgba(245, 239, 255, 0);
	
	--left_nav_link_color:        #1000ff;
	--left_nav_link_hover_color:  rgba(0, 164, 255, 0.64);

	--left_nav_icon_color:        #ffd966;   /* emoji color "feel" */
	--left_nav_icon_glow_color:   #ffffff;

	--left_nav_block_text_color:  var(--text_color, #222);
	--left_nav_glow_color:        rgba(255, 0, 0, 0.4);
	--left_nav_glow_hover_color:  rgba(255, 0, 0, 0.58);
	
	--page_border: rgba(14, 141, 0, 1);
	--page_bg_top: rgba(202, 231, 202, 1);
	--page_bg_bottom: rgba(202, 231, 202, .5);
}


/* ============================================
   LEFT NAVIGATION BASE
   ============================================ */

#left_nav {
	list-style: none;
	margin: 0 0 1em 0.2em;
	padding: 0;
}

#left_nav li {
	list-style: none;
	position: relative;
	margin: 0 0 0.9em 0;      /* no left margin */
	padding: 0 0 0 1.5em;     /* <-- space for the icon on the left */
}

/* ============================================
   LEFT NAV ICON / BULLET
   ============================================ */

/* icon base state */
   #left_nav li::before {
	   content: "☺️";
	   position: absolute;
	   left: 0;
	   top: 0.1em;
	   font-size: 1em;
	   color: var(--left_nav_icon_color, #ffd966);
	   transform-origin: center;
   }
   
   /* animate icon when parent li is hovered */
   #left_nav li:hover::before {
	   animation: link_pulse 2s ease-in-out infinite;
   }
   

/* ============================================
   NAVIGATION LINKS
   ============================================ */

#left_nav a {
	color: var(--left_nav_link_color);
	text-decoration: none;
	transition: color 0.3s ease;
}

/* Hover link color */
#left_nav a:hover {
	color: var(--left_nav_link_hover_color);
}

#left_nav li.active::before,
#left_nav a.active::before {
	filter: brightness(1.5);
	animation: link_pulse 1s ease-in-out infinite;
}


/* ============================================
   BLOCK LINK (MAKES A WHOLE CARD CLICKABLE)
   ============================================ */

.block_link,
.block_link:hover {
	color: var(--left_nav_block_text_color);
	text-decoration: none;
}


/* ============================================
   GLOW BOX AROUND LINK DIV
   ============================================ */

.link_div {
	box-shadow: 0 0 8px 3px var(--left_nav_glow_color);
	transition: box-shadow 0.3s ease;
}

.link_div:hover {
	box-shadow: 0 0 10px 3px var(--left_nav_glow_hover_color);
}


/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes link_pulse {
	0%, 100% {
		transform: scale(1);
		filter: brightness(1.5);
	}
	50% {
		transform: scale(1.2);
		filter: brightness(2);
	}
}


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

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

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

	border: 4px solid var(--page_border);
}


/* ========================================
   Content Boxes
   ======================================== */
.content_box {
	background-color: #fff4f4
}

.content_box {
}

.content_box_title {
}

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