:root {
	--xmas-c1: #80bfff; /* Background - Mouse Down 004d99*/
	--xmas-c1-rgb: 128, 191, 255; /* Background Gradient Effect */
	--xmas-c2: #a91f0a; /* Headers & Button Background */
	--xmas-c3: #0a5c3f; /* Content Background */
	--xmas-c4: #CC231E; /* Button Highlight */
	--xmas-c5: #FFFFFF; /* highlight */
	--xmas-grey: #cccccc; /* grey color used in difficulty */
	--xmas-silver: #999999; /* silver color used in trophy */
	--xmas-gold: #ffcc00; /* gold for the hard mode trophy */
	--xmas-text: #FFFFFF; /* main text color */
	--xmas-text-dark: #FFFFFF; /* alt text color */
	--xmas-text-muted: #19E1A2; /* muted green text for challenge info */
}

body {
	background-color: var(--xmas-c1);
}

.col-12 p {
	margin-left: 10px;
}

#next-nav-table {
	width: 100%;
	margin-top: 15px;
}

#next-nav-table a {
	text-decoration: none;
	color: var(--xmas-text-muted);
}

.showcased-img {
	display: block;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
}

.hhc-subheader {
	font-size: 1.2em;
	/* font-weight: bold; */
	background-color: var(--xmas-c2);
	border-radius: 5px;
	margin-top: 20px;
	margin-bottom: 10px;
}

/* Table Style */
.styled-table{
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	color: var(--color-dark);
	background-color: var(--xmas-c3);
}

.styled-table a:link{
	color: black;
}

.styled-table a:visited{
	color: black;
}

.styled-table td, .styled-table th {
	border: 1px solid #ddd;
	padding: 8px;
}

.styled-table tr:nth-child(even) {
	color: var(--color-dark);
	background-color: #0d734f;
}

.styled-table tr:hover {
	color: #FFFFFF;
	background-color: var(--xmas-c4);
}

.styled-table th {
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background: var(--xmas-c2);
	color: #FFFFFF;
}

.hhc-subheader i {
	/* color: var(--xmas-text); */
}

.difficulty-highlight {
	color: var(--xmas-c4);
}

.difficulty {
	color: var(--xmas-grey);
}

.easy-mode {
	color: var(--xmas-silver);
}

.hard-mode {
	color: var(--xmas-gold);
}

.overlay{
    background-color: var(--xmas-c1);
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:-1000;
}

.sidenav-link{
	margin-top: 5px;
	border-radius: 5px;
}

.sidenav-highlight{
	color: var(--xmas-text); !important;
	background-color: var(--xmas-c4); !important;
	font-weight: bold;
	border-color: var(--xmas-text);
}

.vid-container {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	text-align: center;
}

.code-style-container {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
    background-color: var(--xmas-c2);
	width: 95%;
}

.language-label {
	text-align: right;
	color: var(--color-dark);
	padding-right: 20px;
}

.code-name {
	font-family: monospace;
    float: left;
    font-weight: bold;
    width: 300px;
	color: var(--color-dark);
}

pre {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 10px;
}

pre code {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.code-name img {

}

.caption {
	width: 100%;
	text-align: center;
	font-style: italic;
	margin-bottom: 10px;
	color: var(--xmas-text);
}

a {
  color: var(--xmas-text);
  text-decoration: none;
  font-weight: bold;
}

a:visited {
	text-decoration: none;
}


a:hover {
  color: var(--xmas-dark);
  text-decoration: underline;
}

.markdown-quotation-mark:before{
    font-size: 40px;
    font-style: italic;
    font-weight: normal;
    float: left;
    height: 100%;
    content: "\201C"; 
}

.markdown-quotation-content {
    padding: 10px 15px 10px 20px;
}

.markdown-quote {
    margin: auto;
    width: 80%;
    border-left: 8px solid var(--xmas-c2);
    padding: 10px 15px 10px 10px;
	margin-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
	color: var(--xmas-text);
	border-radius: 5px;
}

.markdown-quote:before { 
    
}

.markdown-quote:after { 
    font-size: 0.9em;
    font-style: italic;
    font-weight: normal;
    margin-left: 100px;
    padding-top: 10px;
    content: "- "attr(data-quoter); 
}