body { 

	background-color: #0C0C0C;
	color: #63FA86;
}

main {

	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-areas:
	  "header header"
	  "nav content"
	  "footer footer";
	grid-template-rows: 2fr 8fr 1fr;
	gap: 0.5em;
}

.home-link {

	color: #63FA86;
	text-decoration: initial;
}

.top-header {

	text-align: center;
	background-image: radial-gradient(#0C0C0C 65%, darkturquoise);
	border-radius: 20px;
}

#subheader-container {

	display: grid;
	grid-template-columns: 0.2fr 1fr;
	grid-template-areas: "emojis donation";
	gap: 0.5em;
}

.img-article-container { display: flex; }

#emojis { 

	grid-area: emojis;
	text-align: right;
}

#emojis a { display: inline-block; width: auto; height: auto;}

#donation { 

	grid-area: donation;
	text-align: right;
}

.notification {
	
	background-color: orange;
	margin-top: 0px;
	color: blue;
	text-align: center;
}

nav li { display: flex; }

li { 

	color: #43C6DB;
	margin-bottom: 24px;
}

header { grid-area: header; }

nav {

	grid-area: nav;
	background-image: linear-gradient(to top right, #0C0C0C 85%, lavender, antiquewhite);
	max-height: 450px;
}

#content { grid-area: content; }

footer {

	grid-area: footer;
	text-align: center;
	font-weight: bolder;
	font-size: 20px;
}

footer a { text-decoration: none; }

.collage-img {

	max-width: 100%;
	height: ;
 }
 
figure { margin: 0px; }
 
figcaption {
	 
	background-color: rgba(0, 0, 0, 0.5);
	color: antiquewhite;
	font-size: smaller;
	text-align: center;
 }
 
.caption-in-article { text-align: left; }

#profile-picture-img { 

	margin-top: 1em;
	max-width: 100%;
	height: auto;
}

.collage {

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column: 2 / 3;
	grid-gap: 0.5em;
}

a {

	width: 100%;
	height: 100%;
	color: #43C6DB;
	font-weight: bold;	
}

.index-nav-menu a {
	
	width: 20%;
}

nav > ul { list-style: none; }

li > a:hover {

	background-image: linear-gradient(45deg, black, #0C0C0C, antiquewhite);
}

article > div > ul > li { 

	color: #63FA86;
	margin: 5px;
}

.yellow-text { color: yellow; }

.orange-text { color: orange; }

em { color: orange; }

.collage-img:hover { filter: hue-rotate(90deg); }

code { color: darkkhaki; }

p > em { color: lightgoldenrodyellow; }

.honey { color: azure; }

.active-link {

	background-image: linear-gradient(45deg, black, #0C0C0C, antiquewhite);
}

small {

	font-weight: normal;
	font-size: 14px;
}

.subheader-img { margin-right: 5px; }

td { padding-bottom: 20px; }

#playground-container {

	display: flex;
	flex-direction: row;
	gap: 2em;
}

.playground-item { text-align: center; }

.playground-item > a > img {
	
	border:10px solid orange;
	background: black;
	border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='darkturquoise' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%35' y1='0%25' x2='0%22' y2='50%25'%3E%3Cstop offset='0%25' stop-color='antiquewhite' /%3E%3Cstop offset='25%50' /%3E%3Cstop offset='50%25' stop-color='purple' /%3E%3Cstop offset='50%35'  /%3E%3C/linearGradient%3E %3Cpath d='M2.5 1.0 l50 0l55 100l-90 0 l5 -50' stroke-linecap='butt' stroke='url(%50g)' stroke-width='5' stroke-dasharray='100'/%3E %3C/svg%3E") 25;
}

.article-date { margin-bottom: 0px;}

.article-date-data-placeholder { 
	
	display: inline-block;
	width: 86%;
}

.article-date-data { 
	
	display: inline-block;
	background-color: yellow;
	color: black;
	text-align: right;
	width: 14%;
}

.article-title-container {

	display: flex;
  	justify-content: left;  	
}

.article-link-container { margin-top: 1.2em; }

.article-link { text-decoration: none; }

#playground-container > div { margin: 10px; }

.take-me-to-the-top {

	position: fixed;
  	bottom: 0;
  	right: 0;
	font-size: xx-large;
	font-weight: bolder;
	z-index: 1;
}

.take-me-to-the-top > a {

	text-decoration: none;
}

@media (max-width: 500px) {
	
	.code-container { white-space: pre-wrap; }

	.pre-code-container {

		width: 200px; 
		overflow: auto;
	}
	
	.index-nav-menu a { width: 100%; }
	
	.subheader-img{ width: 25px; height: 25px; }
	
	input[type="image"] { width: 68px; height: 25px; }
	
	#subheader-container { grid-template-columns: 1.5fr 1fr; }
	
	#playground-container { flex-direction: column; }
	
	.article-date-data-placeholder { width: 27%; }
	
	.article-date-data { width: 73%; }
}

@media (811px >= width) and (width <= 1100px) {
	
	#subheader-container { grid-template-columns: 1.3fr 1fr; }
}