:root{
	--mainText:white;
	--secondaryText:white;

	--borderColor:#ffffff;

	--mainColor:#2b2b2b;
	--secondaryColor:#5a5a5a;

	--previewShadow:#5a5a5a;

	--buttonColor:#000000;

}

h1, h2, h3, h4, h5, h6, strong{
	color: var(--mainText);
	font-family: 'Roboto', sans-serif;
	padding-top: 10px;
	text-align: center;
}

p, li, span, label, input, textarea{
	color: var(--secondaryText);
	font-family: 'Roboto', sans-serif;
}


h1 { font-size: 56px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

.ul li a{
    margin-right: 20px;
}


i.fab, i.far, i.fas {
	color: white;
}

.navbar-custom{
	background-color: var(--mainColor);
	border-bottom:1px solid var(--borderColor);
	height: 50px;

}

.nav-link{
	color: var(--mainText);
}

.nav-wrapper{
	padding-top: 50px;

}

.navbar-toggler-icon {
	
	display: block;
	width: 30px;
	height: 5px;
	margin-bottom: 5px;
	position: relative;
	
	background: #ffffff;
	border-radius: 3px;
	
	z-index: 1;
	
	transform-origin: 4px 0px;
	
	transition: transform 0.5s cubic-bezier(0.76,0.3,0.04,1.0),
				background 0.5s cubic-bezier(0.76,0.3,0.04,1.0),
				opacity 0.55s ease;
}

.contact-buttons {
    background-color: var(--mainColor);
	border-color: var(--mainColor);
	margin-top: -6px;
	padding-top: 5px;
	padding-left: 5px;
}

.intro-wrapper{
	border:3px solid var(--background-color);
	
	-webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);

	text-align: center;
}



.tinted-image{
	background:
	radial-gradient(
      rgba(200, 209, 209, 0.6), 
      rgba(0, 0, 0, 0.8)
    ),
    url(images/bg02.jpg);
}

.s1{
	border-bottom:1px solid var(--borderColor);
	overflow: auto;
	background-color: var(--mainColor);
}

.s2{
	background-color: var(--secondaryColor);
	border-bottom:1px solid var(--borderColor);
	overflow: auto;
}

.skills-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 10px;
	gap: 20px;
	text-align: center;
}

.post-wrapper{
	display: grid;
	grid-template-columns: repeat(auto-fit, 320px);
	gap: 30px;
	justify-content: center;
	margin-bottom: 10px;
}

.post{
	border:1px solid var(--borderColor);
	-webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
}

.post-title{
	justify-content: center;
}

.thumbnail{
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.aboutimg{
	justify-content: center;
}

.post-preview{
	background-color: var(--previewShadow);
	padding: 2px;

}

.contact-wrapper{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	gap: 10px;
	
}


.themes-wrapper{
	display: flex;
	justify-content: center;

}

.theme-style{
	height: 20px;
	width: 20px;
	background-color: black;
	border-radius: 50%;

	margin: 5px;
	border:2px solid var(--themeDotBorder);

	-webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
	box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);

	cursor: pointer;
}

.theme-style:hover{
	border-width: 1px;
}

#default-mode{
	background-color: #fff;
}

#blue-mode{
	background-color: #225aa7;
}

#green-mode{
	background-color: #606B56;
}

#dark-mode{
	background-color: #2c2c2c;
}