body{
margin:0px;}
.app {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  .app-body {
    display: flex;
    flex: 1;
  }

  .app-content {
    flex: 1;
    background: transparent;
  }

  .app-nav {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
    background: transparent;
  }

  /* Flex Header*/
  /**
 * Images a now responsive
 */
img {
	max-width: 100%;
	height: auto;
}

/**
 * Limit the container in
 * width for big screens
 */
.container {
    display: flex;
	max-width: 100%;
	/*padding: 20px;*/
	margin: 0 auto;
}

/**
 * By using display: flex
 * Logo and nav are in 2 cols
 * align-items make them
 * vertically centered
 * justify-content distribute
 * horizontal spaces around
 * and flex-wrap break the
 * things in two lines in
 * small screens
 */
.main-header .container {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}
body > header > div > nav.main-nav {
    width: 100%;
    display: flex;
    align-items: center;

}
/**
 * The followings are to
 * make things more
 * clean and airy
 * and contents centered
 */
.main-nav ul {
	margin: 1em 0 .5em;
	text-align: center;
}
.main-nav li {
	display: inline;
}
.main-nav a {
	display: inline-block;
	padding: .5em 1.5em;
}

/*Employee cards*/
.card > .container {
    flex: auto;
    flex-flow: column;
}

/* techzample main*/

.techzample-main {
    display: flex;
    flex-direction: column;
}


/* Generic fonts n stuff */
body {
    font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
}

.main-text {
    max-width: 400px;
    margin: 5px auto;
}

.main-text h1 {
    font-size: 22px;
}

.main-text p {
    margin: 15px auto 0;
}

h1,
h2,
h3,
h4,
h5,
p,
ul {
    padding: 0;
    margin: 0;
    font-weight: 400;
}
/*PAGINATION*/
.pagination {
    display: flex;
    flex-flow: wrap;
  }

  .pagination a,  .pagination li {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    list-style-type: none;
  }

  .card {
    display: flex;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    max-width: 15em;
    height: 5em;
    margin: 1em 1em 1em 1em;
  }

  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  /* Add some padding inside the card container */
  body > div > main > div > div > div.container {
    padding: 2px 16px;
  }
  .table-container {
    display: flex;
  }
  .flex-table.row {
    padding-left: 10px;
  }

  /*Navbar headr*/
  body > header > div > nav > ul > li > a{
    text-decoration: none;
    color: white;
    font-size: 2rem;
  }
  body > header > div > nav > ul{
    height100%;
  }

  /* display employee cards*/
  body > div > main > div.employee-container{
      display: flex;
      flex-direction: row;
      flex-flow: wrap;
  }