style.css

@import url(https://fonts.googleapis.com/css?family=El+Messiri|Lato);* {
  padding: 0;
  margin: 0;
  border: none;
  font-size: 0;
  color: white; }

body {
  background-color: #222;
  overflow-x: hidden; }
  body #header-canvas-container {
    width: 100%;
    z-index: -10; }
    @media only screen and (max-width: 1400px) {
      body #header-canvas-container {
        display: none; } }
  body .inv {
    display: none; }
  body .nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; }
  body #nav_bar {
    z-index: 666;
    width: 100%;
    height: 60px;
    display: inline-block;
    background-color: #222; }
    body #nav_bar div {
      height: 100%; }
      body #nav_bar div #button {
        display: none;
        float: right;
        box-sizing: border-box;
        padding: 20px 28px;
        font-family: 'Lato', sans-serif;
        font-size: 20px;
        background-color: #222; }
        @media only screen and (max-width: 900px) {
          body #nav_bar div #button {
            display: block; } }
        body #nav_bar div #button:hover {
          background-color: #00796B;
          cursor: pointer; }
      body #nav_bar div ul {
        float: right; }
        @media only screen and (max-width: 900px) {
          body #nav_bar div ul {
            display: none;
            width: 80%;
            margin: 0 auto; } }
        body #nav_bar div ul li {
          display: inline-block;
          margin: 16px 0; }
          @media only screen and (max-width: 900px) {
            body #nav_bar div ul li {
              margin: 0;
              display: block; } }
          body #nav_bar div ul li a {
            background: #222;
            padding: 20px 28px;
            text-decoration: none;
            font-family: 'Lato', sans-serif;
            font-size: 20px; }
            @media only screen and (max-width: 900px) {
              body #nav_bar div ul li a {
                display: block; } }
            body #nav_bar div ul li a:hover {
              background-color: #00796B; }
  body .cell {
    display: table;
    text-align: center;
    min-height: 600px;
    width: 100%; }
    body .cell .inner-cell-container {
      display: table-cell;
      vertical-align: middle; }
      body .cell .inner-cell-container .background-container {
        padding: 40px 60px;
        width: 69%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 20px; }
        body .cell .inner-cell-container .background-container h2 {
          text-align: center;
          font-size: 46px;
          font-family: 'El Messiri', sans-serif; }
        body .cell .inner-cell-container .background-container p {
          text-align: justify;
          font-family: 'Lato', sans-serif;
          font-size: 36px; }
  body #about-me, body #technologies, body #my-projects, body #contact {
    padding: 200px 0;
    background-image: url(./img/code-desktop.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat; }
  body #technologies {
    background-image: url(./img/mobile-desktop.jpg); }
    body #technologies .background-container {
      width: 100%;
      border-radius: 0; }
      body #technologies .background-container #icon-container {
        width: 100%;
        height: 300px; }
        body #technologies .background-container #icon-container i {
          position: absolute;
          width: calc(100% / 3);
          font-size: 256px; }
  body #my-projects {
    background-image: url(./img/design-desktop.jpg); }
  body #contact {
    background-image: url(./img/office-desktop.jpg); }

footer {
  text-align: center; }
  footer p {
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    text-align: center; }

.show {
  display: block; }