/*
Theme Name: Back to The 90s Free
Author: Moki-Moki Ios
Author URI: hhttps://mokimoki.net/90s-retro-wordpress-theme/
Description: This is a demonstration version of the 90s retro theme for WordPress. It makes your site to look like a blast from the past. However, under the hood runs a modern HTML5, responsive, SEO-friendly, easily customized, translation ready, crossbrowser compatible code.
Tags: two-columns, three-columns, left-sidebar, custom-menu, custom-logo, featured-image-header, featured-images, theme-options, translation-ready
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the90sretro
*/

html,
body {
	margin: 0;
	padding: 0;
}

#player {
	position: fixed;
	top: 0;
	left: 45%;
	width: 200px;
	height: 100px;
	z-index: 777;
}

h1 {
	font-size: 170%;
}

.single h1 {
	margin-bottom: 0.5em;
}

.single h1 a {
	text-decoration: none;
}

header h1 {
	font-size: 245%;
}

h2 {
	font-size: 120%;
}

h2 a {
	text-decoration: none;
}

h3 {
	font-size: 100%;
}

h4 {
	font-size: 70%;
}

.wrapper {
	display: flex;
}

nav {	
	position: fixed;
	top: 0;
	left: 0;
	width: 200px;	
	height: 100vh;
	border-right: 4px groove #999;
	padding: 1em 1em 2em 1em;
	overflow: auto;
}

.sidebar ul,
nav ul {
	list-style: none;
	padding: 0;
}

.sidebar ul li,
nav ul li {
	margin: 0 0 1em 0;
}

nav h2 a {
	text-decoration: none;
}

nav h2 a img {
	width: 95%;	
}

header {
	margin-top: 2em;
}

header img {
	width: 100%;
	max-width: 1000px;
}

main {
	position: relative;
	left: 250px;
	width: calc(100% - 500px);
	margin: 0;
}

main .wp-post-image {
	float: left;
	margin: 0 1em 1em 0;
}

.single main .wp-post-image {
	float: left;
	margin: 1em 0 0.5em 1em;
	max-height: 540px;
}

span.date {
	display: block;
}

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

.separator {
	border-bottom: 2px groove #444;
	margin: 1em 0;
}

.high {
	margin: 1.777em 0;
}

#comments ul {
	list-style: none;
	padding: 0;
}

.comment-author img {
	float: left;
}

#commentform label {
	display: inline-block;
	min-width: 100px;
}

::-webkit-scrollbar-track:window-inactive,
::-webkit-scrollbar-track-piece:window-inactive {
	background: #111;		
}

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

.pagination {
	padding: 1em 0;
}

footer {
	margin: 2em 0;
	font-size: 70%;
}

img.gif-icon {
	width: 48px;
	vertical-align: middle;
	margin: -6px 5px 0 0px;
}

/**
 * Home
 */
.small-and-gray {
	font-size: 77%; 
	color: #ccc;
}

/**
 * Marquee
 */
.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;  /* show the marquee just outside the paragraph */
    animation: marquee 15s linear infinite;
}

.marquee span:hover {
    animation-play-state: paused
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
} 

.margin {
	margin: 1em 0;
}

iframe {
	width: 100%;
}

/**
 * Blink
 */
.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/**
 * WordPress
 */
 
.alignleft {
	float: left;
	margin: 0 1em 0 0;
}

.alignright {
	float: right;
	margin: 0 0 0 1em;
}

.aligncenter {
	text-align: center;
	margin: 0 auto;
}

.wp-post-image {
	max-width: 100%;	
}

.wp-caption-text {
	text-align: center;
}

.comment .avatar {
	margin-right: 1em;
}

.bypostauthor,
.gallery-caption,
.sticky {}

/* Text meant only for screen readers. */
.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; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.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;
	/* Above WP toolbar. */
}



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