body {

font-family: Hermit, sans-serif;
color: #333;
font-size: 18px;
line-height: 20px;

}

.highlight pre {

background-color: #F1F1F1;;
padding: 10px 10px;
border-radius: 3px;

}

code {

font-family: Hermit, sans-serif;

}

p {

margin-bottom: 20px;
font-family: 'Roboto', sans-serif;
line-height: 24pt;
font-size: 20px;

}

.header {

position: relative;
height: 400px;

}

.content {

display: block;
min-height: 600px;
padding: 60px 40px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: -webkit-linear-gradient(270deg, #fff, #fff);
background-image: linear-gradient(180deg, #fff, #fff);
box-shadow: 0 0 16px 0 #fff;

}

.footer {

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 20px 40px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #FF9900;

}

.navbar-container {

position: fixed;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 70px;
margin-right: 0px;
margin-left: 0px;
padding-top: 10px;
padding-left: 60px;
padding-right: 60px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
z-index: 1;

}

.title {

color: #fff;
font-size: 44px;
text-shadow: 1px 1px 6px #000;
text-align: center;

}

.background {

position: fixed;
z-index: -1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 400px;
margin-bottom: 0px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-position: center;
background-size: cover;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);

}

.subtitle {

color: #fff;
text-shadow: 1px 1px 6px #000;
text-align: center;

}

.navbar {

min-width: 120px;
box-shadow: 0 0 6px 0 #000;

}

.nav-menu, .navbar, .w-nav-button.w–open {

background-color: #FF9900;

}

.post-description {

color: #fff;
text-shadow: 1px 1px 6px #000;

}

.post-description p {

font-family: Hermit, sans-serif;
line-height: 14pt;
font-size: 14px;
text-indent: 0px;

}

.overlay {

position: fixed;
z-index: -1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 400px;
margin-bottom: 0px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .33), rgba(0, 0, 0, .33));
background-image: linear-gradient(180deg, rgba(0, 0, 0, .33), rgba(0, 0, 0, .33));

}

.contact-content {

display: block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

}

.post {

width: 250px;
height: 250px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
position: absolute;

}

.post-container {

width: 250px;
height: 250px;
margin: 20px;
box-shadow: 0 0 6px 0 #000;

}

.post-background {

position: absolute;
width: 250px;
height: 250px;
background-color: grey;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
background-position: center;
background-size: cover;

}

.heading {

color: #fff;
text-shadow: 1px 1px 6px #000;

}

.heading-2 {

direction: ltr;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 6px #000;

}

.nav-hover {

box-shadow: 0 0 6px 0 #000;

}

.blog-content {

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

}

.post-content {

display: block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

}

.home-content {

display: block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

}

.sample-blog {

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

}

.heading-3 {

text-align: center;

}

.heading-4 {

text-align: center;

}

.heading-5 {

text-align: center;

}

.experience {

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0px 20px;
margin-top: 30px;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
box-shadow: 0 0 6px 0 #000;

}

.experience-item {

text-decoration: none;
margin: 20px;
color: #000000;
font-size: 84px;

}

.link-block {

width: 50px;
height: 50px;
margin: 10px;
background-image: url('../images/example-bg.png');
background-position: 0px 0px;
background-size: 125px;

}

.github-fork-ribbon:before {

background-color: #0099FF !important;

}

@media (max-width: 991px) {

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.navbar {
  width: 200px;
}
.sample-blog {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

}

@media (max-width: 767px) {

.content {
  padding-bottom: 60px;
}
.navbar {
  width: 200px;
}
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

}

@media (max-width: 479px) {

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.navbar {
  width: 100%;
}
.sample-blog {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

}

@font-face {

font-family: 'Hermit';
src: url('../fonts/Hermit-medium.otf') format('opentype');
font-weight: 500;
font-style: normal;

} @font-face {

font-family: 'Hermit';
src: url('../fonts/Hermit-bold.otf') format('opentype');
font-weight: 700;
font-style: normal;

} @font-face {

font-family: 'Hermit';
src: url('../fonts/Hermit-light.otf') format('opentype');
font-weight: 300;
font-style: normal;

} @font-face {

font-family: 'Hermit';
src: url('../fonts/Hermit-light.otf') format('opentype');
font-weight: 300;
font-style: normal;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
font-weight: bold;
font-style: italic;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-Thin.ttf') format('truetype');
font-weight: 200;
font-style: normal;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-Light.ttf') format('truetype');
font-weight: 100;
font-style: normal;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-Medium.ttf') format('truetype');
font-weight: 300;
font-style: normal;

} @font-face {

font-family: 'Roboto';
src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;

}