#lexicon {
				width: 100%;
				display: flex;
				gap: 20px;
				justify-content: space-between;
				align-items: flex-start;
			}

		
		#lexicon #navigation {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			background: var(--mainboard-bg);
			border-bottom: 4px solid var(--mediumgreen);
		}
		
		#lexicon #navigation .navigation-headline {
			min-height: 50px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			text-transform: uppercase;
			text-align: center;
			padding: 0 5px;
			box-sizing: border-box;
			background-image: url(https://i.imgur.com/uAQO5N5.png);
			color: #ffffff;
		}
		
		
		
		#lexicon #navigation .navigation-headline:first-child a:link,
		#lexicon #navigation .navigation-headline:first-child a:visited,
		#lexicon #navigation .navigation-headline:first-child a:active,
		#lexicon #navigation .navigation-headline:first-child a:hover {
			margin-left: 0;
		}
		
		#lexicon #navigation .navigation-headline a:link,
		#lexicon #navigation .navigation-headline a:visited,
		#lexicon #navigation .navigation-headline a:active,
		#lexicon #navigation .navigation-headline a:hover {
			color: #ffffff;
			margin-left: 5px;
		}
		
		#lexicon #navigation .navigation-item {
			min-height: 25px;
			width: 100%;
			margin: 0 auto;
			padding: 5px 20px;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1px dotted #666;
			background: var(--mainboard-bg);
		}
		
		
		#lexicon #navigation .navigation-subitem {
			min-height: 25px;
			width: 100%;
			margin: 0 auto;
			padding: 0 20px 0px 20px;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1px solid #ddd;
			background: var(--mainboard-bg);
		}
		
		#lexicon #navigation .navigation-subitem i {
			font-size: 11px;
			padding-top: 1px;
		}
		
		#lexicon #navigation .navigation-externallink-option {
			width: 100%;
			text-align: right;
		}
		
		#lexicon #navigation .navigation-search {
			width: 100%;
			margin: 3px auto;
			padding: 10px 0;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1px dotted #666;
			background: var(--mainboard-bg);
			justify-content: center;
			align-content: center;
		}
		
		#lexicon #navigation .navigation-search input.textbox {
			width: 68%;
		}
		
		#lexicon .lexicon-entry {
			width: 80%;
			box-sizing: border-box;
			background: var(--mainboard-bg);
			border-bottom: 4px solid var(--mediumgreen);
			padding: 1px;
		}
		
		#lexicon .lexicon-entry .entry-headline {
			height: 50px;
			width: 100%;
			font-size: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			text-transform: uppercase;
			font-family: var(--sc-font);
			background-image: url(https://i.imgur.com/saqHSGZ.png);
			color: #ffffff;
		}
		
		
		#lexicon .lexicon-entry .entry-subline {
			text-align: right;
			padding-right: 10px;
			padding-top: 5px;
			background: var(--mainboard-bg);
		}
		
		#lexicon .lexicon-entry .entry {
			background: var(--mainboard-bg);
			padding: 20px 40px;
			text-align: justify;
			line-height: 180%;   
			-moz-border-radius-bottomright: 6px;
			-webkit-border-bottom-right-radius: 6px;
			border-bottom-right-radius: 6px;
			-moz-border-radius-bottomleft: 6px;
			-webkit-border-bottom-left-radius: 6px;
			border-bottom-left-radius: 6px; 
		}
		
		#lexicon .lexicon-entry .entry.content {
			-moz-border-radius-bottomright: 0;
			-webkit-border-bottom-right-radius: 0;
			border-bottom-right-radius: 0;
			-moz-border-radius-bottomleft: 0;
			-webkit-border-bottom-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		
		#lexicon .lexicon-entry .content-bit {
			padding: 0 40px 40px 40px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 20px;
			background:var(--mainboard-bg);
			-moz-border-radius-bottomright: 6px;
			-webkit-border-bottom-right-radius: 6px;
			border-bottom-right-radius: 6px;
			-moz-border-radius-bottomleft: 6px;
			-webkit-border-bottom-left-radius: 6px;
			border-bottom-left-radius: 6px; 
		}
		
		#lexicon .lexicon-entry .content-bit .content-letter {
			width: 45%;     
		}
		
		#lexicon .lexicon-entry .content-bit .content-letter .content-item {
			margin-bottom: 5px;    
		}
		
		#lexicon .lexicon-entry .content-bit .content-letter .content-item .content-item-cat {
			font-size:0.7em;
		}
		
		#lexicon .lexicon-entry .lexicon_search_results {
			margin-bottom: 10px;
		}

#lexicon h1 {
  font-family: var(--title-font);
  font-size: 3.5em;
  font-style: normal;
  font-weight: normal;
  text-transform: lowercase;
  letter-spacing: 1px;
  line-height: 1.2;
  color: var(--lightergreen);
  margin: 15px 0 30px 0;
  text-shadow: 0 0 2px #111;
}

#lexicon h2 {
  display: inline-block;
  width: 100%;
  text-align: center;
  overflow: hidden;
  font-family: var(--header-font);
  text-transform: lowercase;
  letter-spacing: 1px;
  color: var(--lightergreen);
  text-shadow: 0 0 2px #111;
}

#lexicon h2::before, #guidebook h2::after {
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
  background-color: var(--mediumgreen);
}

#lexicon h2::before {
  right: 0.5em;
  margin-left: -50%;
}

#lexicon h2::after{
  left: 0.5em;
  margin-right: -50%;
}

#lexicon subh2 {
	color: #999;
	position: relative;
	display: block;
	padding: 0;
	margin-top: -20px;
	text-align: center;
	text-transform: lowercase;
	letter-spacing: 3px;
	text-shadow: 0 0 2px #111;
	
	font-family: var(--accent-font);
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
}

#lexicon h3 {
	color: var(--lightergreen);
	letter-spacing: 1px;
	margin: 0;
	padding-top: 1.618em;
	padding-bottom: 0.3em;
	margin-bottom: 1.618em;
	border-bottom: solid 1px var(--mediumgreen);
	text-shadow: 0 0 2px #111;
	
	font-family: var(--accent-font);
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
}

#lexicon strong {
    font-family: var(--sc-font);
    color: var(--lighterwhite);
    letter-spacing: 0.15rem;
    font-size: 1rem;
}

#lexicon #myref strong {
    font-family: var(--base-font);
    font-size: 13.5px;
    letter-spacing: 0;
}

#lexicon #myref warning strong {
    font-size: 80%;
    letter-spacing: 0.15rem;
}

#lexicon em {
    font-family: var(--accent-font);
    color: var(--lighterwhite);
    letter-spacing: 0.15rem;
    font-size: 1rem;
}

#lexicon blockquote {
	background: rgba(15, 15, 15, 0.37);
	color: #999;
	margin: 14px 40px;
	padding: 20px;
	border-left: solid 5px var(--mediumgreen);
	letter-spacing: 0.15rem;
	text-shadow: 0 0 2px #111;
	font-family: var(--accent-font);
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
}

#lexicon fieldset {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.35em 0.75em 0.625em;
  white-space: pre-line;
  font-size: 13.5px;
}

#lexicon fieldset > legend {
  text-transform: none;
  padding: 0.35em 0.75em 0.05em;
  letter-spacing: 1px;
  font-family: var(--accent-font);
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  white-space: pre-line;
  width: fit-content;
}

#lexicon hr {
	background: var(--mediumgreen);
	width: 75%;
	margin: 2rem auto;
}

#lexicon #myref .row hr {
    margin: 1rem auto;
}

#lexicon columns {
  margin: 14px 0 0;
}

#lexicon .group_insignia {
	width: 100px;
	display: inline-block;
	margin: 20px;
	height: 100px;
	border: 3px solid var(--mediumgreen);
	border-radius: 100%;
}

#lexicon .group_insignia img {
  width: 102px;
  height: 102px;
  border-radius: 100%;
  position: relative;
  top: -1px;
  left: -1px;
  z-index: 0;
}

/***** LEXICON LANDING PAGE STYLING *****/

#lexicon .lexicon-cat-title {
    font-family: "UnifrakturMaguntia";
    text-transform: lowercase;
    font-size: 30px;
    letter-spacing: 1px;
    font-style: normal;
    font-weight: normal;
    margin: 5px 0 5px 0;
    padding: 5px;
    text-align: center;
	text-decoration: underline;
    text-underline-offset: 10px;
	color: #eee;
}

.lexicon-category-desc-snippet {
    letter-spacing: 0.15rem;
    text-shadow: 0 0 2px #111;
    font-family: var(--accent-font);
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
	text-align: center;
}

#lexicon .lexicon-landing-page-wrapper {
/**	width: 80%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
    background: var(--mainboard-bg);
    border-top: 4px solid var(--mediumgreen);
	border-bottom: 4px solid var(--mediumgreen);
    padding: 1em; **/
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--mainboard-bg);
    border-top: 4px solid var(--mediumgreen);
    border-bottom: 4px solid var(--mediumgreen);
    padding: 1em;
	margin-bottom: 1em;
}

.lexicon-rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1rem 0;
    align-items: stretch;
}

/* entry box styling */
.lexicon-cat-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #101010;
    min-height: 150px;
    width: 100%;
    box-sizing: border-box;
}

/* title of entry */
.lexicon-entry-title {
    font-family: "New Rocker";
    font-size: 1.5em;
    letter-spacing: 1px;
    background: url(../../../images/graphics/oocBoard-titleTear.png);
    background-position: center;
    background-size: cover;
    text-align: center;
    text-transform: lowercase;
    padding: 0.5rem;
    margin: 0.5rem;
}

.lexicon-entry-title a {
    text-decoration: none;
    display: block;
	color: #eee
}

/* description of entry */
.lexicon-entry-description {
    margin: 0 0.5rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: justify;
    min-height: 50px;
}

/* tags (i.e. mandatory reading) */
.lexicon-entry-overlay {
    background: rgba(0, 0, 0, 0%);
    background-image: url(../../../images/graphics/lastPost-tear.png);
    color: #ebebeb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.8rem;
    height: 40px;
	text-align: center;
}

/* mobile responsiveness for the index page */
@media screen and (max-width: 1024px) {
    .lexicon-rows {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .lexicon-rows {
        grid-template-columns: 1fr;
    }
}

/***** MOBILE STYLING *****/


@media screen and (max-width: 768px) {
	

    #lexicon {
        flex-direction: column;
        gap: 15px;
    }

    /* Navigation stacks above content */
    #lexicon #navigation,
    #lexicon .lexicon-entry {
        width: 100%;
    }

    /* Make navigation easier to tap */
    #lexicon #navigation .navigation-item,
    #lexicon #navigation .navigation-subitem {
        padding: 10px 15px;
    }

    /* Search bar fills available space */
    #lexicon #navigation .navigation-search input.textbox {
        width: calc(100% - 30px);
    }

    /* Prevent content from feeling cramped */
    #lexicon .lexicon-entry .entry {
        padding: 20px;
    }

    #lexicon .lexicon-entry .content-bit {
        padding: 20px;
    }

    /* Letter columns become a single column */
    #lexicon .lexicon-entry .content-bit .content-letter {
        width: 100%;
    }

    /* Smaller title */
    #lexicon .lexicon-entry .entry-headline {
        height: auto;
        min-height: 50px;
        padding: 10px;
        font-size: 22px;
        text-align: center;
    }

    /* Scale headings */
    #lexicon h1 {
        font-size: 2.5em;
    }

    /* Prevent oversized blockquotes */
    #lexicon blockquote {
        margin: 14px 0;
        padding: 15px;
    }

    /* Make large images fit */
    #lexicon img {
        max-width: 100%;
        height: auto;
    }

    /* Prevent fieldsets from overflowing */
    #lexicon fieldset {
        overflow-wrap: break-word;
    }
}



#lexicon {
    width: 100%;
}


.lexicon-container {
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}


.lexicon-nav-sidebar {
    width: 20%;
    flex-shrink: 0;
}


.lexicon-index {
    width: 80%;
}



/* mobile */

@media screen and (max-width: 768px) {

    .lexicon-container {
        flex-direction: column;
    }


    .lexicon-nav-sidebar,
    .lexicon-index {
        width: 100%;
    }

}