/****** BASE STYLES ******/

body {
    font-family: 'Source Sans Pro', sans-serif;
    color: #2b2b2b;
}

/***** HEADER *****/

.header {
  padding: 60px; /* some padding */
  text-align: center; /* center the text */
  background: black; /* black background */
  color: white; /* white text color */
}

/* Increase the font size of the <h1> element */
.header h1 {
  font-size: 62px;
}

/* style */
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%; /* Set the width of the sidebar */
  background-color: #f1f1f1; /* Grey background color */
  padding: 20px; /* Some padding */
}

/* Main column */
.main {
  flex: 70%; /* Set the width of the main content */
  background-color: white; /* White background color */
  padding: 20px; /* Some padding */
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden; /* Hide overflow */
  background-color: white; /* white background color */
}

/* Style the navigation bar links */
.navbar a {
  float: left; /* Make sure that the links stay side-by-side */
  display: block; /* Change the display to block for responsive reasons */
  color: Black; /* Black text color */
  text-align: center; /* Center the text */
  padding: 14px 20px; /* Add some padding */
  text-decoration: none; /* Remove underline */
}

/* Right-aligned link to be used when more links are needed */
/* .navbar a.right {
  float: right; /* Float a link to the right
} */

/* Change color on hover/mouse-over */
.navbar a:hover {
  background-color: #ddd; /* Grey background color */
  color: black; /* Black text color */
}

/* Use Media Query to add a breakpoint at 800px: */
@media screen and (max-width:700px) {
  .row {
    flex-direction: column;}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

header h2 {
    width: 1000px;
    /* clear: both; */
    font-family: 'Lora', serif;
    font-size: 72px;
    line-height: 80px;
    color: #2b2b2b;
    padding: 20px 0 20px 25px;
}
header h2 span {
    color: #828282;
}

/* Ensure proper sizing */
* {
  box-sizing: border-box;
}

/* Style for the paragraph elements */
p {
    font-family: 'Lora', serif;
    font-size: 14px;
    line-height: 20px;
    color: #2b2b2b
    padding: 20px 0 20px 25px;
}


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

/* Style for the footer */
.footer {
  padding: 20px; /* Some padding */
  text-align: center; /* Center text*/
  background: #ddd; /* Grey background */
}