/*
Theme Name: Back to The 90s (Custom)
Author: Moki-Moki Ios
Author URI: https://mokimoki.net/
Theme URI: https://mokimoki.net/90s-retro-wordpress-theme/
Description: Back to The 90s Retro Theme for WordPress, with the former "full version" features re-implemented for personal use (colours, background image, header image, fonts, background music, front-page scroller, styling shortcodes, your own CSS). Modern HTML5, responsive, SEO-friendly, translation ready, crossbrowser compatible.
Tags: two-columns, three-columns, left-sidebar, custom-menu, custom-logo, featured-image-header, featured-images, theme-options, translation-ready, custom-background
Version: 1.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: back-to-the-90s-free
*/

html,
body#back-to-the-90s-free {
	margin: 0;
	padding: 0;
}

#back-to-the-90s-free h1 {
	font-size: 170%;
}

#back-to-the-90s-free.single h1 {
	margin-bottom: 0.5em;
}

#back-to-the-90s-free .single h1 a {
	text-decoration: none;
}

#back-to-the-90s-free header h1 {
	font-size: 245%;
}

#back-to-the-90s-free h2 {
	font-size: 140%;
}

#back-to-the-90s-free h3 a {
	text-decoration: none;
}

#back-to-the-90s-free h3 {
	font-size: 120%;
}

#back-to-the-90s-free h4 {
	font-size: 100%;
}

#back-to-the-90s-free .wrapper {
	display: flex;
}

#back-to-the-90s-free nav.theme-navigation {	
	position: fixed;
	top: 0;
	left: 0;
	width: 200px;	
	height: 100vh;
	border-right: 4px groove #999;
	padding: 1em 1em 2em 1em;
	overflow: auto;
}

#back-to-the-90s-free .sidebar ul,
#back-to-the-90s-free nav.theme-navigation ul {
	list-style: none;
	padding: 0;
}

#back-to-the-90s-free .sidebar ul li,
#back-to-the-90s-free nav.theme-navigation ul li {
	margin: 0 0 1em 0;
}

#back-to-the-90s-free nav.theme-navigation h2 a {
	text-decoration: none;
}

#back-to-the-90s-free nav.theme-navigation h2 a img {
	width: 95%;	
}

#back-to-the-90s-free header {
	margin-top: 2em;
}

#back-to-the-90s-free header img {
	width: 100%;
	max-width: 1000px;
}

#back-to-the-90s-free main {
	position: relative;
	left: 250px;
	width: calc(100% - 500px);
	margin: 0;
}

#back-to-the-90s-free main .wp-post-image {
	float: left;
	margin: 1em 1em 1em 0;
}

#back-to-the-90s-free .single main .wp-post-image {
	float: left;
	margin: 1em 0 0.5em 1em;
	max-height: 540px;
}

#back-to-the-90s-free span.date {
	display: block;
}

#back-to-the-90s-free .post-edit-link,
#back-to-the-90s-free .commentmetadata,
#back-to-the-90s-free a.view-article,
#back-to-the-90s-free span.date,
#back-to-the-90s-free span.author,
#back-to-the-90s-free span.comments,
#back-to-the-90s-free span.category {
	text-transform: uppercase;
	font-size: 77.7%;
	margin-bottom: 0.5em;
}

#back-to-the-90s-free .separator {
	border-bottom: 2px groove #444;
	margin: 1em 0;
}

#back-to-the-90s-free .high {
	margin: 1.777em 0;
}

#back-to-the-90s-free #comments ul {
	list-style: none;
	padding: 0;
}

#back-to-the-90s-free .comment-author img {
	float: left;
}

#back-to-the-90s-free #commentform label {
	display: inline-block;
	min-width: 100px;
}

#back-to-the-90s-free ::-webkit-scrollbar-track:window-inactive,
#back-to-the-90s-free ::-webkit-scrollbar-track-piece:window-inactive {
	background: #111;		
}

#back-to-the-90s-free aside.sidebar {
	position: fixed;
	top: 0;
	right: 0;	
	width: 200px;
	height: 100vh;
	border-left: 4px groove #999;
	padding: 1em;
	overflow: auto;	
}

#back-to-the-90s-free section nav {
	border-right: none;
}

#back-to-the-90s-free .pagination {
	padding: 1em 0;
}

#back-to-the-90s-free footer {
	margin: 2em 0;
	font-size: 70%;
}

#back-to-the-90s-free img.gif-icon {
	width: 48px;
	vertical-align: middle;
	margin: -6px 5px 0 0px;
}

#back-to-the-90s-free .small-and-gray {
	font-size: 77%; 
	color: #ccc;
}
 
#back-to-the-90s-free .alignleft {
	float: left;
	margin: 0 1em 0 0;
}

#back-to-the-90s-free .alignright {
	float: right;
	margin: 0 0 0 1em;
}

#back-to-the-90s-free .aligncenter {
	text-align: center;
	margin: 0 auto;
}

#back-to-the-90s-free .wp-post-image {
	max-width: 100%;	
}

#back-to-the-90s-free .wp-caption-text {
	text-align: center;
}

#back-to-the-90s-free .comment .avatar {
	margin-right: 1em;
}

#back-to-the-90s-free .bypostauthor,
#back-to-the-90s-free .gallery-caption,
#back-to-the-90s-free .sticky {}

#back-to-the-90s-free .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

#back-to-the-90s-free .screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/**
 * Mobile
 */
@media screen and (max-width: 900px) {
	#back-to-the-90s-free .wrapper {
		display: block;
		margin-bottom: 5em;
	}
	
	#back-to-the-90s-free main {
		padding: 1em;
	}
	
	#back-to-the-90s-free footer,
	#back-to-the-90s-free main,
	#back-to-the-90s-free nav.theme-navigation,
	#back-to-the-90s-free aside.sidebar {
		display: block;
		float: left;
		position: static;
		width: 88% !important;
		height: auto;
		overflow: visible;
		border: none !important;
		margin: 0;
	}
}