/* KEYFRAMES */
@keyframes pulseopacity {
	0% {opacity:1;}
	50% {opacity:0.7;}
	100% {opacity:1;}
}

@keyframes pulsecolor {
	0% {color: var(--main-color); text-shadow: var(--main-text-glow-color) 0 0 0.5rem;}
	50% {color: var(--accent-color); text-shadow: var(--accent-text-glow-color) 0 0 0.5rem;}
	100% {color: var(--main-color); text-shadow: var(--main-text-glow-color) 0 0 0.5rem;}
}

@keyframes loadingbar {
	0% {left:0;}
	12.5% {left:8.5rem;}
	25% {left:4rem;}
	37.5% {left:8rem;}
	50% {left:2rem;}
	62.5% {left:6.5rem;}
	75% {left:1rem;}
	82.5% {left:4rem;}
	90% {left:7rem;}
	100% {left:0rem;}
}

@keyframes hypercpu {
	0% {left:4.25rem;}
	7.5% {left:3.5rem;}
	16% {left:4.4rem;}
	24% {left:2.75rem;}
	29% {left:3.25;}
	34% {left:4.5rem;}
	38% {left:4rem;}
	44% {left:4.5rem;}
	50% {left:3.25rem;}
	55.5% {left:1.5rem;}
	64.5% {left:3;}
	72% {left:4.25rem;}
	80% {left:4.5rem;}
	87% {left:3rem;}
	92% {left:1.75rem;}
	100% {left:4.25rem;}
}

@media (max-width:850px) {
	main h1 img {
		width:500px;
		height:auto;
	}
}

/* Codex Decryptor Title */
main h1 {
	background-color:var(--transparent);
	font-family: 'zector', 'Courier New', monospace;
	font-weight: bold;
	font-size: 5rem;
	color: var(--main-color);
	text-align:center;
	position:relative;
	float:center;
	margin:0rem;
}

main h1 img {
	widtdh:70vw;
	heighdt:auto;
}

main div.hr {
	width:auto;
	margin: 0.5rem 1rem 2.5rem 1rem;
	color: var(--main-color);
	background-color:var(--transparent);
	border-top:0.1rem solid var(--main-color);
	box-shadow: 0 0 0.75rem var(--main-box-glow-color);
}

/* hyperI/O box */

main .sticky{
	font-family:"spacemono", 'Courier New', monospace;
	background-color: var(--bg-color);
	float:right;
	overflow:visible;
	position:sticky;
	z-index:1;
	top:30px;
	border:0.1rem solid var(--main-color);
	margin-top: 2rem;
	color: var(--accent-color);
	text-shadow: var(--accent-text-glow-color) 0 0 0.5rem;
	
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
			inset 0 0 0.75rem var(--main-box-glow-color);
}

main .sticky>div {
	background:var(--main-bg-color);
	padding:0.2rem;
	text-align:center;
}

.cpuborder {
	display: inline-block;
	position: relative;
	border:0.1rem solid var(--main-color);
	margin:0.3rem 0.5rem 0 0.5rem;
	width: 5rem;
	height:0.5rem;
	background-color: var(--transparent);
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
			inset 0 0 0.75rem var(--main-box-glow-color);
}

.cpu {
	display: block;
	position:relative;
	width: 0.5rem;
	height:0.5rem;
	background-color: var(--main-color);
	animation: 15s cubic-bezier(0.35, 0, 0.65, 1.0) hypercpu infinite;
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
			inset 0 0 0.75rem var(--main-box-glow-color);
}


/* Flavor text sub-title*/
main h2 {
	font-family: 'zector', 'Courier New', monospace;
	font-weight: bold;
	font-size: 2rem;
	color: var(--accent-color);
	text-align:left;
	text-shadow: var(--accent-text-glow-color) 0 0 0.5rem;
}

/* ENTRY FORMATTING */
div.entry {
	font-family: 'spacemono', 'Courier New', monospace;
	font-size: 1rem;
	line-height: 2rem;
}

div.entry p {
	margin-bottom:2rem;
	margin-left: 1rem;
}



/* Lexicon */
div.entry h3 {
	font-size: 1.25rem;
	font-weight:normal;
	margin-bottom:3rem;
	margin-left:1rem;
	color: var(--main-color);
	text-shadow: var(--main-text-glow-color) 0 0 0.5rem;
}

div.entry dl {
	margin-left:3rem;
}

div.entry dd {
	margin-bottom:2rem;
}

div.entry dt {
	color: var(--main-color);
	text-shadow: var(--main-text-glow-color) 0 0 0.5rem;
}

/* Dropdown Button Formatting */
button.dropdownbutton {
	font-family: 'spacemono', 'Courier New', monospace;
	font-weight: bold;
	font-size: 1.5rem;
	color: var(--main-color);
	
	text-shadow: var(--main-text-glow-color) 0 0 0.75rem;
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
				inset 0 0 0.75rem var(--main-box-glow-color);
	
	border: 0.3rem solid var(--main-color);
	height:5rem;
	padding: 0.1rem 2rem;
	text-align:center;
	margin:1rem 0rem;
	background-color: var(--main-bg-color);
	
	transition-duration: 0.2s;
	
	cursor:pointer;
}

button.dropdownbutton:hover {
	background-color:var(--main-color);
	color:var(--bg-color);
}

button.dropdownbutton:active {
	transform: scale(0.95, 0.95);
	transition-duration:0.05s;
}

img.dropdownarrow {
	margin-left:1.5rem;
	opacity:0.5;
}


/* Sub-entries are indented and have smaller buttons. */
div.dropdown_content > div.entry {
	margin-left:4rem;
}

div.dropdown_content > div.entry > button.dropdownbutton {
	height:4.5rem;
	padding:0.1rem 1.5rem;
	font-size:1.25rem
}

/* Entries with images */
.imageentry {
	display:grid;
	align-items:center;
	grid-template-columns: 3fr 1fr;
	column-gap:3rem;
	margin-right: 3rem;
}

.imageentry p {
	width:100%;
}


.imageentry img {
	position:relative;
	width:100%;
	border: 0.3rem solid var(--main-color);
	padding:0rem;
	float:right;
	
	/*left:50%;*/
	opacity:0;
	
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
				inset 0 0 0.75rem var(--main-box-glow-color);
	background-color: var(--main-bg-color);
				
	transition-duration:0.2s;
	
	
	
}

.imageentry a.image_link {
	display:inline-block;
	color:var(--transparent);
	margin-left:2rem;
	position:relative;
	
	transition-duration:0.2s;
	text-align:center;
	text-decoration:none;
}


.imageentry span.image_desc {
	align-items:center;
}

.imageentry img:hover {
	border: 0.3rem solid var(--accent-color);
	border-radius:2rem;
	box-shadow: 0 0 0.75rem var(--accent-box-glow-color),
				inset 0 0 0.75rem var(--accent-box-glow-color);
	background-color: var(--accent-bg-color);
}

.imageentry a.image_link:hover {
	color:var(--main-color);
	text-shadow: var(--main-text-glow-color) 0 0 0.5rem;
	
}

.image_desc {
	transition-duration:0.2s;
}

.image_desc:hover {
	text-decoration:underline;
	color:var(--accent-color);
	text-shadow: var(--accent-text-glow-color) 0 0 0.5rem;
	transition-duration:0.2s;
}


/* (Sub)entry link Styling */
.subentrylink, .entrylink {
	font-weight: bold;
	color: var(--main-color);
	text-decoration:underline;
	text-shadow: var(--main-text-glow-color) 0 0 0.5rem;
	transition-duration:0.2s;
	cursor:pointer;
}

.subentrylink:hover, .entrylink:hover {
	text-decoration:none;
	text-shadow: var(--accent-text-glow-color) 0 0 0.5rem;
	color: var(--accent-color);
}

.lexilink {
	font-style:italic;
	font-weight:normal;
	color: var(--accent-color);
	text-shadow: var(--accent-text-glow-color) 0 0 0.5rem;
}

.lexilink:hover {
	color: var(--main-color);
	text-shadow: var(--main-text-glow-color) 0 0 0.5rem;
}


/* Highlights and other special text effect stylings */
main strong {
	color: var(--accent-color);
	font-weight: normal;
	text-shadow: var(--accent-text-glow-color) 0 0 0.5rem;
}

main span.bold {
	font-weight: bold;
}

main span.redacted {
	background-color:var(--main-color);
	color:var(--main-color);
	border: 0.2rem solid var(--main-color);
	box-shadow: 0 0 0.75rem var(--main-box-glow-color);
}

main span.pink {
	color: var(--main-color);
	text-shadow: var(--main-text-glow-color) 0 0 0.5rem;
}

main span.entry-subtitle {
	font-size: 2rem;
}

.pulse {
	animation: pulsecolor 2s infinite;
}


/* LOADING MESSAGE FORMATTING */
div.fake_loading_message {
	border: 0.3rem solid var(--main-color);
	padding:1rem;
	font-family: 'zector', 'Courier New', monospace;
	font-weight: bold;
	font-size: 3rem;
	color: var(--main-color);
	text-align:center;
	
	background-color: var(--main-bg-color);
	text-shadow: var(--main-text-glow-color) 0 0 0.75rem;
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
			inset 0 0 0.75rem var(--main-box-glow-color);
}	

.loadingarea {
	display: inline-block;
	position:relative;
	margin:0;
	padding:0;
	width: 10rem;
	height:1.5rem;
	border: 0.3rem solid var(--main-color);
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
			inset 0 0 0.35rem var(--main-box-glow-color);
	background-color: var(--main-bg-color);
}

.loadingarea .loadingicon {
	display:block;
	position:relative;
	margin:0;
	padding:0;
	width: 1.5rem;
	left:0;
	height:1.5rem;
	background-color: var(--main-color);
	animation: 16s cubic-bezier(0.35, 0, 0.65, 1.0) loadingbar infinite;
	box-shadow: 0 0 0.75rem var(--main-box-glow-color),
			inset 0 0 0.75rem var(--main-box-glow-color);
}

/* VISIBILITY STYLES */
.dropdown_content {
	display: none;
}

.visible {
	display: block;
}