/*!
Theme Name: my wp theme
Theme URI: http://underscores.me/
Author: Sergiy Prygara
Author URI: http://www.prygara.com/
Description: Custom WordPress Theme based on Underscores
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: my-wp-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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

my theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/*font*/
/*color*/
/*base styles - default styling for how elements should look in all occurrences on the page.*/
* {
	box-sizing: border-box;
}

a {
	color: #333;
}

html {
	font-size: 62.5%;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

body {
	padding: 0 5px;
	margin: 0;
	border: 12px solid #888;
	color: #333;
	background-color: #fff;
	font-size: 1.6rem;
}

main {
	line-height: 1.8;
}

h1 {
	margin: 2.5rem 0;
	font-size: 3rem;
}

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 2rem;
}

p code {
	border-bottom: 1px dotted grey;
}

pre {
	padding: 1rem;
	border: 1.5px dashed #270;
	border-radius: 5px;
	background-color: #F5F5F5;
}

pre code {
	display: block;
	white-space: pre-wrap;
}

blockquote {
	font-style: italic;
}

/*header navigation animated links - header.php
*https://cssanimation.rocks/animating-links/
*/
.page_item > a:link,
.page_item > a:visited {
	position: relative;
	text-decoration: none;
}

.page_item > a:link::after,
.page_item > a:visited::after {
	content: "";
	position: absolute;
	right: 100%;
	left: 0;
	bottom: -2.3px;
	border-bottom: 0.2rem solid #270;
	transition: right .2s;
	backface-visibility: hidden;
}

.page_item > a:hover,
.page_item > a:active {
	text-decoration: none;
}

.page_item > a:hover::after {
	right: 0;
}

/*links on the following pages
 *blog - index.php 
 *single post view - single.php 
 *about - page-about.php
 *contact - page-contact.php
 */
article ul > li > a:link, article ul > li > a:visited,
p > a:link, p > a:visited,
.cat-links a:link, .cat-links a:visited,
.tag-links a:link, .tag-links a:visited {
	color: #270;
	text-decoration: underline;
}

article ul > li > a:hover, article ul > li > a:active,
p > a:hover, p > a:active,
.cat-links a:hover, .cat-links a:active,
.tag-links a:hover, .tag-links a:active {
	text-decoration: none;
}

/*archive page links - page-archive.php*/
li > div a:link,
li > div a:visited {
	text-decoration: none;
	padding-left: 1px;
	transition: all 0.1s ease-out;
}

li > div a:hover,
li > div a:active {
	padding-right: 0.5rem;
	background-color: #ccc;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/* site layout*/
.l-site-header {
	border-bottom: 1px solid #888;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.l-constrained {
	max-width: 820px;
	width: 100%;
	padding: 0 5px;
	margin: 2.5rem auto;
}

/*blog page - single post view, horizontal margins don't collapse with parent padding (body {padding: 0 5px;}) so removing margin: 0 auto;
*from .l-constrained as it causes overflow of HTML, CSS and PHP code embedded in pre tag on screens 320px and smaller*/
@media screen and (max-width: 650px) {
	.l-constrained {
		margin: 0;
	}
}

.l-constrained article {
	margin-bottom: 3rem;
}

.l-site-footer {
	margin-top: auto;
}

/* work page - front-page.php and single-portfolio.php*/
.work {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 3.5rem;
}

.work div {
	border: 1px solid gray;
	border-radius: 2px;
}

.work img,
.view img {
	display: block;
	width: 100%;
	height: auto;
}

.view .wp-image-2359,
.view .wp-image-2360 {
	max-width: 420px;
	margin: 1rem auto;
}

.view p:first-child {
	display: flex;
	justify-content: space-between;
	margin: 2.5rem 0;
}

@media screen and (max-width: 1000px) {
	.work {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 680px) {
	.work {
		grid-template-columns: repeat(1, 1fr);
	}
}

.view {
	margin: auto;
}

.view p {
	margin: 0 0 2.5rem 0;
}

.view p:last-child {
	margin-bottom: 0;
}

.view > p > a {
	font-size: 1.5rem;
}

.view img {
	max-width: 1200px;
	border: 1px solid gray;
	border-radius: 2px;
	padding: 1rem;
}

/*blog page - index.php*/
.read-more {
	font-size: 1.2rem;
	text-transform: uppercase;
	text-align: right;
}

/*post navigation
*blog page - index.php 
*single project view - single-portfolio.php
*/
.nav-links {
	display: flex;
	justify-content: space-between;
}

.nav-links,
.cat-links,
.tag-links,
.dt {
	font-size: 1.4rem;
}

/*about page - page-about.php*/
.l-about .wp-image-2341 {
	display: block;
	max-width: 300px;
	width: 100%;
	height: auto;
	margin: 3.5rem auto 0;
}


@media screen and (max-width: 420px) {
.l-about .wp-image-2341 {
      max-width: 250px;  
    }
    
}


/*archive page - page-archive.php*/
.l-archive {
	width: 100%;
	margin-top: 2.5rem;
}

.l-archive ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.l-archive li {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #888;
}

.l-archive li > div {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.l-archive h1, .l-archive h2 {
	margin-bottom: 1.5rem;
}

@media all and (max-width: 500px) {
	.l-archive li > div {
		display: block;
		margin-bottom: 1.5em;
	}
	.dt {
		font-size: 1.2rem;
	}
	.l-archive {
		padding: 0 0.5em;
	}
}

/*contact page - page-contact.php*/
.wpcf7-form {
	margin: 2.5rem auto 0;
}

.name-email {
	display: flex;
	justify-content: space-between;
	margin: 0 0 1rem 0;
}

.name-email > div {
	flex: 0 0 35rem;
}

.name-email input {
	width: 100%;
	height: 3.5rem;
	margin-bottom: .6rem;
}

.message textarea {
	width: 100%;
	resize: none;
	margin-top: 0.5rem;
}

.wpcf7-form > p {
	display: flex;
	margin: 3.5rem 0 1.5rem 0;
}

.grecaptcha-badge { visibility: hidden; }

.wpcf7-form p:nth-child(5) {
    display: block;
    text-align: center;
    font-size: small;
}

.wpcf7-submit {
	width: 20rem;
	padding: 1rem 0;
	margin: 0 auto;
	border: 1px solid #888;
	border-radius: 3px;
	color:#333;
	background: #fff;
	transition: background-color 1s ease;
	font-size: 1.7rem;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	 appearance:none;
}

.wpcf7-submit:hover {
	background: #ccc;
}

.wpcf7-spinner {
	display: none;
}

.wpcf7 .sent .wpcf7-response-output,
.wpcf7 .invalid .wpcf7-response-output,
.wpcf7-not-valid-tip {
	padding: 0;
	margin: 0;
	border: none;
	font-size: small;
	font-style: italic;
	color: #333;
	text-align: center;
}

@media screen and (max-width: 780px) {
	.wpcf7-form {
		margin: 1rem auto 1.5rem;
	}
	.name-email {
		flex-flow: column;
	}
	.name-email > div {
		flex: 0 0 auto;
		margin-bottom: 1.5rem;
	}
}

/*--------------------------------------------------------------
# Modules
--------------------------------------------------------------*/
/*logo and navigation - header.php
*https://blog.christopherianmurphy.com/2016/01/responsive-pure-css-menu/
*/
.nav-header {
	/*wrapper*/
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.custom-logo {
	padding: 0;
	margin: 1.5em 0;
}

.menu ul {
	display: flex;
	justify-content: space-between;
	width: 45rem;
	list-style-type: none;
	text-transform: uppercase;
}

.current_page_item > a {
	border-bottom: 0.2rem solid #270;
}

/*hide pseudo-element*/
.current_page_item a:link::after {
	display: none;
}

#menu-toggle {
	display: none;
}

.label-toggle {
	display: none;
}

@media screen and (max-width: 960px) {
	.l-site-header {
		border: none;
	}
	.nav-header {
		display: flex;
		flex-wrap: wrap;
	}
	.menu {
		flex: 1 0 100%;
	}
	.menu ul {
		display: block;
		width: 100%;
		height: auto;
		max-height: 0;
		padding: 0;
		margin: 0;
		background-color: #ddd;
		transition: max-height .5s ease, opacity .5s ease;
		opacity: 0;
		list-style-type: none;
		text-align: center;
		visibility: hidden;
		overflow: hidden;
	}
	.menu li {
		display: block;
		padding: 1.5em 0;
		border-bottom: 1px solid #999;
		font-size: 1em;
		color: #333;
	}
	#menu-toggle:checked ~ .menu > ul {
		height: auto;
		max-height: 40rem;
		opacity: 1;
		visibility: visible;
	}
	.label-toggle {
		display: block;
		margin-left: auto;
		float: none;
		width: 35px;
		height: 30px;
		background: linear-gradient(to bottom, #888 0%, #888 20%, transparent 20%, transparent 40%, #888 40%, #888 60%, transparent 60%, transparent 80%, #888 80%, #888 100%);
		cursor: pointer;
	}
	.current_page_item > a {
		border-bottom: 0.2rem solid #270;
	}
}

/*end topnav*/
/*social icons - footer.php */
.social {
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
	/*remove default left padding from the "ul" */
}

/*remove navigation label text added via custom menu link */
.social li {
	margin: 0 .23em;
}

/*override font awesome classes added via CSS class in social(footer) menu in the admin*/
.social li[class*='fa-']:before {
	content: '';
}

/*add font awesome icons and make them clickable*/
.social li[class*='fa-github'] > a:before {
	content: '\f09b';
}

.social li[class*='fa-codepen'] > a:before {
	content: '\f1cb';
}

.social li[class*='fa-youtube'] > a:before {
	content: '\f167';
}

.social li a {
	display: block;
	width: 1.7em;
	border-radius: 0.8em;
	background: #777;
	transition: background-color 1s ease-out;
	text-decoration: none;
	text-align: center;
	line-height: 1.7em;
	color: #fff;
}

.social li a:hover {
	background: #555;
}

.l-site-footer > p {
	padding: 0.2rem;
	/*replace removed margins with the same value of padding to prevent margin collapse */
	margin: 0;
	/*remove default margin-top and margin-bottom. */
	text-align: center;
	font-size: small;
}

/*# sourceMappingURL=style.css.map */