body {
  background-attachment: fixed;
  background-image: url("../images/bg.jpg");
  background-position: center;
  background-size: cover; }

#knockout-header {
  height: 10em;
  width: 90%;
  align-self: flex-start;
  background: white;
  margin: 10em 0 22.5em 0;
  position: relative; }
  #knockout-header::after {
    align-items: center;
    display: flex;
    justify-content: center;
    background-attachment: fixed;
    background-image: url("../images/bg.jpg");
    background-position: center;
    background-size: cover;
    position: absolute;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    content: "LOREM DIMSUM"; }
  #knockout-header::after {
    font-size: 8em;
    font-weight: bolder;
    white-space: nowrap; }

#info-bar {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 40px;
  width: 80%;
  min-width: 750px;
  margin: 2em 0em;
  transition-duration: 0.5s; }
  #info-bar .nav-link {
    transition-duration: 0.5s;
    height: 100%;
    width: 100%;
    margin: 0px;
    font-size: 2em;
    font-weight: bolder;
    position: relative; }
  #info-bar #info1 {
    transition-duration: 0.5s;
    background: white; }
    #info-bar #info1::after {
      align-items: center;
      display: flex;
      justify-content: center;
      background-attachment: fixed;
      background-image: url("../images/bg.jpg");
      background-position: center;
      background-size: cover;
      position: absolute;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      content: "HOME"; }
    #info-bar #info1:hover {
      background: rgba(0, 0, 0, 0.25); }
      #info-bar #info1:hover::after {
        -webkit-text-fill-color: white;
        content: "HOME"; }
  #info-bar #info2 {
    transition-duration: 0.5s;
    background: white; }
    #info-bar #info2::after {
      align-items: center;
      display: flex;
      justify-content: center;
      background-attachment: fixed;
      background-image: url("../images/bg.jpg");
      background-position: center;
      background-size: cover;
      position: absolute;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      content: "WORK"; }
    #info-bar #info2:hover {
      background: rgba(0, 0, 0, 0.25); }
      #info-bar #info2:hover::after {
        -webkit-text-fill-color: white;
        content: "WORK"; }
  #info-bar #info3 {
    transition-duration: 0.5s;
    background: white; }
    #info-bar #info3::after {
      align-items: center;
      display: flex;
      justify-content: center;
      background-attachment: fixed;
      background-image: url("../images/bg.jpg");
      background-position: center;
      background-size: cover;
      position: absolute;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      content: "ABOUT"; }
    #info-bar #info3:hover {
      background: rgba(0, 0, 0, 0.25); }
      #info-bar #info3:hover::after {
        -webkit-text-fill-color: white;
        content: "ABOUT"; }
  #info-bar #info4 {
    transition-duration: 0.5s;
    background: white; }
    #info-bar #info4::after {
      align-items: center;
      display: flex;
      justify-content: center;
      background-attachment: fixed;
      background-image: url("../images/bg.jpg");
      background-position: center;
      background-size: cover;
      position: absolute;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      content: "CONTACT"; }
    #info-bar #info4:hover {
      background: rgba(0, 0, 0, 0.25); }
      #info-bar #info4:hover::after {
        -webkit-text-fill-color: white;
        content: "CONTACT"; }

#blog {
  width: 80%; }
  #blog .blog-post {
    background: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
    color: #333;
    max-width: 100%;
    padding: 2em;
    transition-duration: 0.5s;
    width: 100%;
    word-wrap: normal;
    position: relative; }
    #blog .blog-post .anchor {
      position: absolute;
      top: 0; }
    #blog .blog-post:hover {
      background: white;
      color: black; }
    #blog .blog-post h2 a {
      color: black; }
    #blog .blog-post h2 i {
      opacity: 0;
      transition-duration: 0.5s; }
    #blog .blog-post h2:hover a {
      text-decoration: underline; }
    #blog .blog-post h2:hover i {
      opacity: 1; }
  #blog .blog-post + .blog-post {
    margin: 2em 0em; }

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