/*!
Theme Name: Game Dev Portfolio
Theme URI: https://github.com/japtar10101/game-dev-portfolio
Author: Taro Omiya
Author URI: https://taroomiya.com
GitHub Theme URI:  japtar10101/game-dev-portfolio
GitHub Theme URI: https://github.com/japtar10101/game-dev-portfolio
Description: Portfolio for game devs.
Version: 2020.7.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: game-dev-portfolio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Game Dev Portfolio is based on Underscores https://underscores.me, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

This theme uses Bulma (https://bulma.io) and FontAwesome (https://fontawesome.com)
*/

body {
	font-family: 'Raleway', BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6, .title {
	font-family: 'Lato', 'Raleway', BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
}

/* Fade link color */
a {
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color;
	transition-property: color;
}

div.entry-content {
	margin-top: -0.5rem;
}

/* Always remove the margin in the ul for block-gallery */
figure.wp-block-gallery ul.blocks-gallery-grid {
	margin: 0;
}

figure.tiled-gallery__item {
	margin: 0;
}

/* Create a class to flush a column to take up the entire width, no gaps in between */
.wp-block-columns.flush {
	margin: 0;
}

.wp-block-columns.flush .wp-block-column {
	margin: 0;
	flex-basis: 50%;
}

.content figure.wp-block-embed.flush, .content .wp-block-columns.flush .wp-block-column figure.wp-block-embed {
	margin: 0;
}

.content figure.wp-block-embed.flush .jetpack-video-wrapper, .content .wp-block-columns.flush .wp-block-column figure.wp-block-embed .jetpack-video-wrapper {
	margin: 0;
}

figure.wp-block-gallery.flush {
	margin: 0;
}

figure.wp-block-gallery.flush ul.blocks-gallery-grid li.blocks-gallery-item {
	margin: 0;
}

/*
Setup post thumbnail to resize and retain the same
aspect ratio based on the width of the browser.
*/
.content header .post-thumbnail, .content header div.wp-custom-header {
	padding-top: 31.75%;
	margin: 0 -0.75rem auto -0.75rem;
	height: 0;
}

.content:first-child header .post-thumbnail, .content header div.wp-custom-header {
	margin: -0.75rem -0.75rem auto -0.75rem;
}

.content header div.wp-custom-header, header.page-header div.wp-custom-header {
	display: block;
	position: relative;
}

.content header .post-thumbnail img, .content header div.wp-custom-header img, .content header div.wp-custom-header iframe {
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
}

.content header.with-thumbnail h1.title {
	margin-top: 1.25rem;
}

.content header.no-thumbnail h2.title {
	margin-top: 0;
}

.content h2, .content h3, .content h4, .content h5, .content h6 {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

#wp-custom-header button {
	display: none;
}

/*
Styling on list of posts
*/
article.listed-post {
	padding-top: 1.5rem;
}

article.listed-post:first-child/* , article.listed-post:nth-child(2) */ { 
	padding-top: 0;
}

div.archive-description {
	margin-bottom: 1.5rem;
}

/*
Format how the list of comments are portrayed.
*/
.comment-list li {
	border-top: 1px solid rgba(219,219,219,.5);
	padding-top: .75rem;
}

.comment-list .comment-respond {
	border-top: 1px solid rgba(219,219,219,.5);
	padding-top: .75rem;
	margin-bottom: .75rem;
}

.comment-list li:first-child {
	border-top: none;
	padding-top: 0px;
}

.comment-list li figure {
	margin: 0px 20px 20px 0px;
}

.pagination ul.pagination-list li {
	margin: 0px;
}

.comment-list .pagination-list

/* Dunno what to do with this */
.gallery-caption {
	background: #fff;
}

/* Dunno what to do with this */
.bypostauthor {
	background: #fff;
}

.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float:right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

/* 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. */
}

/* Styling a tile for mosaic composition */
.mosaic {
	padding-top: 1.5rem;
}

.mosaic .button {
	width: 32.2%;
	height: max-content;
	color: #3273dc;
}

.mosaic .button:hover, .mosaic .button:hover figure figcaption {
	color: #363636;
}

.mosaic .with-thumbnail {
	padding: 0;
}

.mosaic .with-thumbnail figure {
	margin: 0;
	width: 100%;
}

.mosaic .with-thumbnail figure img {
	-moz-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
	-moz-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
}

.mosaic .with-thumbnail figure figcaption {
	text-align: center;
	width: 100%;
	margin-bottom: 0.25rem;
	font-style: normal;
	color: #3273dc;
  -webkit-transition: color 0.3s;
	transition: color 0.3s;
	white-space: normal;
}

.columns-6 {
	column-count: 6;
}
.columns-5 {
	column-count: 5;
}
.columns-4 {
	column-count: 4;
}
.columns-3 {
	column-count: 3;
}
.columns-2 {
	column-count: 2;
}
.columns-1 {
	column-count: 1;
}

@media (max-width: 768px) {
	.columns-6-mobile {
		column-count: 6;
	}
	.columns-5-mobile {
		column-count: 5;
	}
	.columns-4-mobile {
		column-count: 4;
	}
	.columns-3-mobile {
		column-count: 3;
	}
	.columns-2-mobile {
		column-count: 2;
	}
	.columns-1-mobile {
		column-count: 1;
	}

	/* Center align menu text on mobile */
	.menu {
		text-align: center;
	}
	.mosaic .button {
		width: 100%;
	}	
}

@media (min-width: 769px) and (max-width: 1024px) {
	.columns-6-tablet {
		column-count: 6;
	}
	.columns-5-tablet {
		column-count: 5;
	}
	.columns-4-tablet {
		column-count: 4;
	}
	.columns-3-tablet {
		column-count: 3;
	}
	.columns-2-tablet {
		column-count: 2;
	}
	.columns-1-tablet {
		column-count: 1;
	}
	.mosaic .button {
		width: 48.5%;
	}	
}

@media (min-width: 1025px) and (max-width: 1216px) {
	.columns-6-desktop {
		column-count: 6;
	}
	.columns-5-desktop {
		column-count: 5;
	}
	.columns-4-desktop {
		column-count: 4;
	}
	.columns-3-desktop {
		column-count: 3;
	}
	.columns-2-desktop {
		column-count: 2;
	}
	.columns-1-desktop {
		column-count: 1;
	}
}

@media (min-width: 1217px) and (max-width: 1408px) {
	.columns-6-widescreen {
		column-count: 6;
	}
	.columns-5-widescreen {
		column-count: 5;
	}
	.columns-4-widescreen {
		column-count: 4;
	}
	.columns-3-widescreen {
		column-count: 3;
	}
	.columns-2-widescreen {
		column-count: 2;
	}
	.columns-1-widescreen {
		column-count: 1;
	}
}

nav.navbar {
	background-color: rgba(100%, 100%, 100%, 80%);
}

nav.navbar .navbar-item {
	text-align: center;
	padding: 0;
}

nav.navbar .navbar-brand .navbar-item {
	margin: 0 0 0 0.75rem;
	color: #3273dc;
}

/* Hide the navbar on desktop screens */
@media (min-width: 769px) {
	nav.navbar {
		display: none;
	}
}

/* Only show the .navbar-menu if toggle is on */
@media screen and (max-width: 768px) {
	.toggled .navbar-menu {
		display: block;
	}
}

@media screen and (min-width: 769px) {
	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0px;
	}
}

.menu-item {
	border-top: 1px solid 
	#f0f0f0;
}

.menu-item a {
	display: block;
	padding: 0.75rem 0;
}

.menu-bottom-border {
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 1.25rem;
}

#primary {
	background-color: #fff;
	margin-top: 0.75rem;
}

#secondary {
	-moz-border-top-left-radius: 0;
	-moz-border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

span.help {
	display: inline;
}

.contact-form .clear-form {
	margin-bottom: 0px;
}

.contact-form .clear-form, .contact-form .control input[type="email"], .contact-form .control input[type="tel"], .contact-form .control input[type="text"], .contact-form .control input[type="url"] {
	margin-bottom: 0px;
	width: 100%;
}

/* Fix some weird pagination issues */
nav.pagination ul {
	list-style: none;
	margin: 0;
}

/* Remove pagination if infinite scroll is enabled */
.infinite-scroll nav.pagination, .infinite-scroll.neverending footer#footer {
	display: none;
}

.infinite-scroll .mosaic, .infinite-scroll.neverending .mosaic {
	padding-bottom: 2.5rem;
}

/* Shows the footer again in case all posts have been loaded */
.infinity-end.neverending footer#footer {
	display: block;
}

.infinity-end .mosaic, .infinity-end.neverending .mosaic {
	padding-bottom: 0;
}

/* Make the load older post button similar to bulma buttons. */
.mosaic #infinite-handle {
	position: absolute;
	bottom: 0;
	text-align: center;
}

#infinite-handle span {
	padding: 0;
	background: none;
	font-size: 1em;
	color: #4a4a4a;
}

button, #infinite-handle span button, button:hover, #infinite-handle span button:hover, button:focus, #infinite-handle span button:focus {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	border: 1px solid #dbdbdb;
	border-radius: 4px;
	box-shadow: none;
	color: #363636;
	cursor: pointer;
	justify-content: center;
	padding-bottom: calc(.5em - 1px);
	padding-left: 1em;
	padding-right: 1em;
	padding-top: calc(.5em - 1px);
	text-align: center;
	white-space: nowrap;
	user-select: none;
	vertical-align: top;
	line-height: 1.5;
	height: 2.5em;
	font-weight: 400;
	font-size: 1em;
}

button:hover, #infinite-handle span button:hover {
 border-color:#b5b5b5;
 color:#363636
}

button:focus, #infinite-handle span button:focus {
 border-color:#3273dc;
 color:#363636
}