@import "https://fonts.googleapis.com/css?family=Basic";
@import "https://fonts.googleapis.com/css?family=Caveat";
@import "https://fonts.googleapis.com/css?family=ABeeZee";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";

* {
	box-sizing: border-box;
}

/* Style the body */
body {
	margin: 0;
	padding: 0;
	font-family: Basic;
	font-size: 22px;
}

/* Header/logo Title */
.header {
	font-family: ABeeZee;
    padding: 1px;
    text-align: center;
    background: #75704E;
    color: #F4EBBE;
}
.big {
  text-transform: uppercase;
	font-family: Caveat;
	font-size: 100px;
	font-weight: 1200;
}

/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: #8BA6A9;
	justify-content: space-between;
}

/* Style the navigation bar links */

.navbar_left {
  text-transform: uppercase;
  display: flex;
  background-color: #8BA6A9;
	flex-basis: 1;
	vertical-align: middle;
}

.navbar_left a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar_left a:hover {
  background-color: #9BBDF9;
  color: black;
}

.navbar_right {
	flex-basis: ;
}
/* Column container */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    background-color: #f1f1f1;
    padding: 20px;
	text-align: center;
	order: 2;
}
.side a {
    text-decoration: none;
	color: MidnightBlue;
}

.side a:visited {
    color: pink;
}

/* Main column */
.main {
    flex: 1;
    background-color: white;
    padding: 20px;
	order: 1;
}
.main table {
    border-collapse: collapse;
	border: 1px solid #dbdbdb;
	width: 100%
}
.main td, .main th {
	border: 1px solid #dbdbdb;
	padding: 8px;
}
.main th {
	background-color: #8BA6A9;
}
.main tr:nth-child(even) {
	background-color: #e2e2e2;
}
.main tr:nth-child(odd) {
	background-color: white;
}

.main a {
    text-decoration: none;
	color: MidnightBlue;
}

.main a:visited {
    color: pink;
}

.main_row {
	text-align: center;
}

.main_row h4{
	color: #2B291D;
	justify-content: center;
}

.output {
	text-align: center;
	max-width: 1200px;
	margin: auto;
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

.item {
    background-color: #9BBDF9;
	border-radius: 15px;
	padding: 13px;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-basis: 24%;
	margin-top: 8px;
	margin-bottom: 8px;
	color: #2B291D;
}

/* Fake image, just for this example */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
}

.note {
	font-size: 14px;
}

.warning {
	color: red;
}


/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 700px) {
    .row, .navbar {
        flex-direction: column;
    }
}