:root {
	--main-bg: #222831;
	--secondary-bg: #282c31;
	--code-bg: #17191b;
	--main-font: #EEEEEE;
	--main-link: #A6E1FA;
	--main-link-hover: #0E6BA8;
	--main-link-visited: #A6E1FA;
}

.site-title {
	margin-top: -4px;
}
.site-header {
	border-top: unset;
}
a {
  color: var(--main-link);
  text-decoration: none; 
}
.site-nav .page-link {
    color: unset;
}
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: var(--main-bg);
	min-width: 160px;
	border: var(--main-font) 1px solid;
	padding: 0px;
	z-index: 1;
	right:0;
}
.dropdown-item:hover {
	background: var(--secondary-bg);
}
.dropdown-item a {
	display:inline-block;
	height: 100%;
	width: 100%;
	padding: 12px 12px !important;
	margin: unset !important;
	text-align: left;
}


.dropdown label {
    display: block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    
}



.dropdown:hover .dropdown-content {
  display: block;
}
@media screen and (max-width: 600px) {
	.dropdown:hover .dropdown-content {
		right:0;
	}
}

.post-preview, .post-list li {
	background: var(--secondary-bg);
	padding: 10px;
	margin-bottom: 10px;
}

.wordlist{
	margin: unset;
}
.wordlist .glossary-description, 
.wordlist input{
	display:none;
	
}
.wordlist input:checked ~ .glossary-description,
.wordlist input:checked ~ .closer{
    display:block;
}
.wordlist .glossary-description{
    background-color: rgb(30, 30, 30);
}
.glossary-word{
  margin-top: 10px;
  padding: 0px;
  width: 100%;
  list-style-type: none;
}
.glossary-word-label {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	color: var(--main-font);
	background-color: var(--main-link-hover);
	font-size: 20px;
	text-decoration: none;
	display: block;
    height: 40px;
	line-height: 40px;
	padding: 10px;
}
.glossary-word-label:hover {
	color: #FFF;
	background-color: var(--main-link);
}
.glossary-description-text {
	padding: 10px;
}
.glossary-description-addon-button {
	padding: 10px;
	background-color: var(--main-link-hover);
	display: block;
    height: 40px;
    line-height: 40px;
}
.glossary-description-addon {
	display: block;
	padding: 10px;
}
.glossary-description-addon div {
	margin-bottom: 10px;
}
.content-hidder {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.hidden-content {
	display:none;
	background-color: var(--secondary-bg);
	padding: 10px;
}
.content-hidder input:checked ~ .hidden-content {
	display: block;
}
.content-hidder input:checked ~ .button {
	background-color: var(--secondary-bg);
}
#gameContainer {
	height: 600px;
	width: 100%;
}

.post-image-preview {
	max-height: 100px;
	max-width: 600px;
}

.post-subtitle {
	color: var(--main-font);
}
.post-subtitle:hover {
	color: var(--main-font);
}
.post-subtitle:visited {
	color: var(--main-font);
}
.fa-github {
	mask-image: url("/assets/socal_icons/github-brands.svg");
}
.fa-mastodon {
	mask-image: url("/assets/socal_icons/mastodon-brands.svg");
}

.fa-brands {
	height: 32px;
	width: 32px;
	display: block;
	background-color: var(--main-link);
	mask-size: cover;
}