@font-face {
	font-family: 'Product Sans';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans'), url('../fonts/ProductSans-Regular.woff') format('woff');
}

body {
	font-family: "Product Sans";
	/*overflow: hidden;*/
}

*:focus {
    outline: 0 !important;
}

.padding {
	margin: 10px;
}

.mode {
	position: fixed;
	bottom: 0;
	margin: 2rem;
	background-color: transparent;
	border-radius: 50%;
	border: 1px solid black;
	padding: 1.5rem;
	line-height: 1rem;
	font-size: 2rem;
}

.blogs {
	position: fixed;
	top: 0;
	right: 0;
	line-height: 1;
	font-size: 25rem;
	color: #4d4d4d;
	opacity: 0.5;
	z-index: -1;
	margin-right: 2rem;
}

.header {
	margin: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.stylish-dark {
	position: absolute;
	top: 300px;
	padding: 0 1rem;
	background-color: #212121;
	color: #ffffff;
}

.stylish-white {
	position: absolute;
	top: 300px;
	padding: 0 1rem;
	background-color: #ffffff;
	color: #212121;
}

.styleit h3 {
	margin: 1rem 0;
}

.stylish2-dark {
	position: absolute;
	top: 720px;
	padding: 0 1rem;
	background-color: #212121;
	color: #ffffff;
}

.stylish2-white {
	position: absolute;
	top: 720px;
	padding: 0 1rem;
	background-color: #ffffff;
	color: #212121;
}

.styleit2 h3 {
	margin: 1rem 0;
}

.tiles {
	border-radius: 15px;
	/*border: 1px solid black;*/
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	margin-bottom: 2rem;
}

.footer {
	width: 100%;
	margin: 2rem 0;
}

.footer-data {
	display: flex;
	justify-content: center;
	align-items: center;
}

.dark-theme {
	background-color: #212121;
	color: #ffffff;
}

.color {
	border-radius: 50%;
	height: 50px;
	width: 50px;
}

.margin-right {
	margin-right: 2rem;
}

.margin-bottom {
	margin-bottom: 1rem;
}

.img-responsive {
	width: 100%;
	height: 400px;
	border-radius: 15px 15px 0 0;
}

.description {
	display: flex;
	align-items: center;
}

.date-white {
	background-color: #212121;
	color: #ffffff;
	height: 70px;
	width: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main {
	margin-top: 15rem;
}

.date-dark {
	background-color: #ffffff;
	color: #212121;
	height: 70px;
	width: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.post-data h4 {
	line-height: 2.5rem;
}

.blue {
	background-color: #33c3ff;
}

.red {
	background-color: #ff3900;
}

.yellow {
	background-color: #ffc600;
}

.handles {
	font-size: 3rem;
}

.handles i {
	padding-right: 0.75rem;
}

/* width */
::-webkit-scrollbar {
  	width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  	background: #f1f1f1; 
  	border-radius: 10px;
  	margin:3px 1px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  	background: #888; 
  	border-radius: 10px;	
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  	background: #555; 
}

@media (max-width: 992px) {
}

@media (max-width: 576px) {
	.handles {
		font-size: 2rem;
	}
	.main {
		margin-top: 10rem;
	}

	.blogs {
		position: fixed;
		top: 0;
		right: 0;
		line-height: 1;
		font-size: 10rem;
		color: #4d4d4d;
		opacity: 0.5;
		z-index: -1;
		margin: 3rem 0.25rem 0 0;
	}
}