/* CSS Document */
:root{
	--main-color: #22BF83;
	/*var(--main-color, #00A9FF)*/
	--main-color-dark: #034638;
	/*var(--main-color-dark, #007bff)*/
}

html {
	scroll-behavior: smooth;
}
body {
	display: grid;
	height: 100vh;
	/*grid-template-rows: auto 1fr auto;*/
	background-image: url("../images/bg4.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	
	font-family: system-ui, sans-serif;

}
#main_sidebar {
	display: flex;
}
#main_sidebar div{
	margin-left: auto;
	margin-right: auto;
}
aside {
	width: 30%;
	min-width: 30%;
	padding: 1rem;
	margin-left: auto;
}
@media only screen and (max-width: 795px){
	#main_sidebar {
		flex-flow: column-reverse;
	}
	aside {
		width: 100%;
		text-align: center;
	}
}

.hover_color {
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.hover_color:hover {
	/*color: #00A9FF;*/
	color: var(--main-color, #00A9FF);
}

h1 {
	font-size: 30px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 22px;
}
h4 {
	font-size: 20px;
}
p, span {
	font-size: 15px;
}
.button {
	background-color: var(--main-color, #007bff); /* Green */
	border: none;
	border-radius: 5px;
	color: white;
	padding: 7px 13px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.button:hover {
	opacity: 0.9;
}
section {
	margin-bottom: 30px;
}
section:first-child {
	margin-top: 30px;
}
.open_sans {
	font-family: 'Open Sans';
}
.text_center {
	text-align: center;
}
.hr_full {
	width: 100%;
	color: lightgrey;
}
.hr_50 {
	align-self: left;
	width: 50px;
	color: lightgrey;
}
header {
	padding: 4rem;
	font-family: 'Kalam', coursive;
}


nav {
	background: white;
	text-align: center;
	box-shadow: 0px 1px 5px rgba(0,0,0, 0.1);
	
}
nav a{
	font-family: 'Open Sans';
	text-decoration: none;
	color: grey;
	display: inline-block;
	padding: 1rem;
	padding-left: 2rem;
	padding-right: 2rem;
	margin-right: -5px;
	transition: 0.3s;
}
nav a:hover{
	text-decoration: none;
	transform: scale(1.05);
}
nav a:visited{
	color: black;
}
nav a:visited{
	color: black;
}
#nav_active {
	color: var(--main-color, #00A9FF);
	transition: 0.3s;
}
#nav_active:hover {
	transform: scale(1.03);
}


main {
	background: white;
	
}
#main {
	padding: 2rem;
	padding-top: 1rem;
	padding-bottom: 2rem;
	padding-left: 5rem;
	padding-right: 5rem;
	max-width: 1400px;
	margin: 0 auto;
	color: #515151;
}
@media only screen and (max-width: 795px) {
  	#main {
	padding: 2rem;
	padding-top: 1rem;
	padding-bottom: 2rem;
	padding-left: 1rem;
	padding-right: 1rem;
}
}

footer {
	background: #F1F1F1;
	padding: 2rem;
	text-align: center;
}


#page {
	margin: 0px;
	width: 100%;
}
#header_logo {
	width: 100%;
	text-align: center;
}
#header_logo h1{
	font-size: 60px;
}

a {
	color: #515151;
	text-decoration: none;
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
a:hover {
	text-decoration: none;
	color: var(--main-color, #00A9FF);
}
a:visited{
	color: #515151;
}
nav a:visited{
	color: #515151;
}
/* post grid */
:root {
	--post-padding: 20px;
}
.posts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/*grid-gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
}

.img_article {
	width: calc(100% + 2 * var(--post-padding, 20px));
	margin: calc( -1 *  var(--post-padding, 20px));
	margin-bottom: 15px;
}

.post {
	/*flex: 1 1 300px;*/
	flex: 1 1 300px;
	align-self: stretch;
	min-width: 200px;
	max-width: 400px;
	margin: 1%;
	margin-bottom: 20px;
}
/*.posts  .post:first-child {
	margin-left: 0px;
}
.posts  .post:last-child {
	margin-right: 0px;
}*/
@media only screen and (max-device-width: 900px){
	.post {
		width: 48.5%;
	}
}
@media only screen and (max-device-width: 715px){
	.post {
		width: 100%;
	}
}

.post_body {
	background: #f5f5f5;
	padding-left: var(--post-padding, 20px);
	padding-right: var(--post-padding, 20px);
	padding-top: var(--post-padding, 20px);
	padding-bottom: var(--post-padding, 20px);
}
.post_body p {
	margin-top: 14px;
}
.post_body h2 {
	color: black;
	margin-bottom: 4px;
}
.post_body button {
	margin-top: -9px;
	margin-bottom: 14px;
}
/*post grid end*/

/*title*/
.title {
	text-align: center;
	margin-bottom: 35px;
	/*padding-top: 30px;*/
}
.title h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 35px;
	color: black;
}
.title h3 {
	text-transform: uppercase;
	font-size: 23px;
	font-family: 'Roboto', sans-serif;
	color: black;
}
.title hr{
	border-top: 2px solid var(--main-color, #00A9FF);
	width: 60px;
}
/*title end*/
/*to top*/
.to_top {
	color: var(--main-color, #00A9FF);
	margin-top: 10px;
	transition: 0.3s;
}
.to_top:hover {
	opacity: 0.6;
}
/*to top end*/
/*about me*/
.img_about_me {
	width: 95%;
	margin-bottom: 15px;
}
	
.about_me {
	display: flex;
	/*margin-top: 30px;*/
}
.about_me div {
	margin: auto;
	flex-grow: 1;
	width: 30%;
}

.about_me_padding {
	padding: 40px;
}
.about_me div h2{
	text-transform: uppercase;
	color: black;
}
.about_me div h3{
	font-weight: 400;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 15px;
	color: black;
}
.about_me div p {
	margin-top: 5px;
}
.about_me div i{
	font-size: 35px;
	color: var(--main-color, #00A9FF);
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.about_me div i:hover{
	opacity: 0.6;
}
@media only screen and (max-width: 795px) {
	.img_about_me {
		width: 100%;
	}
  	.about_me div {
		display: block;
		width: 90%;
		padding: 2rem;
	}
	.about_me div:nth-child(2), .about_me div:last-child {
		
	}
	.about_me div:first-child {
		margin-bottom: 40px;
	}
	.about_me {
		display: block;
	}
	.about_me div:first-child {
		text-align: center;
	}
}
/*about me end*/
/*tag list*/
.tag_list {
	/*display: subgrid;*/
	
	padding-top: 10px;
	/*width: auto;
	margin: none;*/
	width: 100%;
	box-sizing: border-box;
}
.tag_list a span {
	/*padding: 0.5rem 1rem 0.5rem 1rem;*/
	display: inline-block;
	padding: 0.5rem;
	margin-right: 5px;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 100;
	text-transform: uppercase;
	font-family: 'Open Sans';
	border: 1px solid #BCBCBC;
	color: #BCBCBC;
}
.tag_list a span {
	-moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.tag_list a:hover span {
	transform: scale(1.05) ;
}
/*tag list end*/
/*contact*/
	.contact textarea {
		resize: none;
		height: 200px;
	}
@media only screen and (max-width: 795px) {
	.contact {
		text-align: center;
		padding: 1rem;
	}
}
/*contact end*/
/*page numbers*/
.page-numbers-container {
	text-align: center;
}
.page-numbers {
	margin: 5px;
	padding: 0.6em 1em;
	-moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	border: 1px solid rgba(188,188,188,0);
}
.page-numbers:hover, .page-numbers-current{
	border: 1px solid rgba(188,188,188,1);
}
.page-numbers span {
	/*width: 19px;
	height: 18px;*/
}
@media only screen and (max-width: 795px) {
	.page-number-not-mobile {
		display: none;
	}
	.page-numbers {
		border: 1px solid rgba(188,188,188,1);
	}
	.page-numbers-arrow {
		border: none;
	}
	.page-numbers-current{
		margin-left: 10px;
		margin-right: 10px;
	}
}

/*page numbers end*/
/*article*/
.article_left{
	text-align: left;
}
.article_right{
	text-align: right;
}
.article_center{
	text-align: center;
}
.article_img_center{
	display: block;
	width: 80%;
	margin: auto;
}
.article_img_left{
	width: 40%;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}
.article_img_right{
	width: 40%;
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}
.article_img_center img, .article_img_left img, .article_img_right img{
	width: 80%;
}
.article_img_left img, .article_img_right img{
	width: 70%;
	margin: 30px;
}
@media only screen and (max-width: 795px) {
	.article_img_left{
		width: 100%;
	}
	.article_img_right{
		width: 100%;
	}
}
/*article end*/
/*comments*/
.comment div p{
	font-weight: bold;
	display: inline;
}
.comment div span{
	font-size: 12px !important; 
	margin-left: 4px; 
	color: grey; 
	margin: 0px;
}
.comment {
	margin-bottom: 30px;
}
.comment div{
	margin-bottom: 0px;
}

/*comments end*/