*, *:before, *:after {
  box-sizing: border-box;
}

body {
  padding: 20px 40px 80px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-80/tiny_grid.png);
  font-family: 'Merriweather Sans', sans-serif;
  color: ghostwhite;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.Dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

// General widget styles
.Widget {
  margin: 10px;
  box-shadow: 1px 1px 5px #333;
  text-align: center; // Catch all for text
}

.Widget-header {
  padding: 10px 20px;
}

.Widget-headline {
  margin: 0;
}

// Individual widget styling
.NotesWidget {
  display: flex;
  flex-direction: column;
  width: 200px;  
  background: white;
  font-size: 1.2em;
  color: #717A8D;
}

.NotesWidget .Widget-header {
  // Split the height...
  flex: 1;
  display: flex;
  flex-direction: column;
  
  // Give us ample spacing between everything
  justify-content: space-around;
  
  // Put everything on the same line for good measure
  align-items: center;
}

.NotesWidget .Widget-controls {
  display: flex;
  align-items: center;
  // Reasonable spacing between
  // items using the box width
  justify-content: space-around;
  width: 100%;
}

.NotesWidget .Widget-body {
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 100px;
  padding: 0 0 10px;
  background: ghostwhite;
}

.NotesWidget img {
  height: 40px;
}

/*
 * Events Widget
 */
.EventsWidget {
  // Stack all the content. Ever wonder why
  // flexbox defaults to horizontal? Us too.
  display: flex;
  flex-direction: column;
  
  background: #239ED9;
}

.EventsWidget .Widget-header {
  // Use less space than body and
  // perfectly center the content
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.EventsWidget .Widget-body {
  // Should take up most of the 
  // widget space and give plenty
  // of spacing between elements
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 20px 10px;
  background: #2180AC;
}

.EventsWidget img {
  height: 30px;
}

.EventsWidget .Widget-controls {
  display: flex;
  
  // On the same line, spaced apart
  align-items: center;
  justify-content: space-between;
}

.EventsWidget-count {
  // inline-flex lets you easily 
  // center things inline. display: flex
  // works here too, but less reusable.
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  width: 30px;
  height: 30px;
  
  border-radius: 50%;
  background: white;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #239ED9;
}

/*
 * Color Forecast Widget
 */
.ColorForecastWidget {
  // Stack everything, nothing fancy
  display: flex;
  flex-direction: column;
  
  padding: 0;
  background: ghostwhite;
  color: #717A8D;
}

.ColorForecastWidget .Widget-header {
  // Take up as much space as allowed
  flex: 1;
  
  // Same centering trick we used elsewhere
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 0;
}

.ColorForecastWidget .Widget-body {
  flex: 2;
  
  margin: 0;
  padding: 0;
}

.ColorForecastWidget li {
  padding: 1em 0;
  list-style: none; // GTFO
}

/*
 * Commute Widget
 */

// This one is neat because if you remove display: flex;
// it still works. Easy media query!
.CommuteWidget {
  display: flex;
  background: #E67053;
}

.CommuteWidget-graphic {
  width: 120px;
}

.CommuteWidget .Widget-header {
  display: flex;
  
  // Align to the bottom,
  // but horizontally centered
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px 0;
}

.CommuteWidget .Widget-body {
  display: flex;
  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  padding: 10px 20px;
  background: lighten(#E67053,5%);
}

.CommuteWidget .Widget-subHeadline {
  margin: 1em 0 0;
  font-weight: normal;
}

.CommuteWidget .Widget-data {
  margin: .5em 0;
}

/*
 * Weather Widget
 */
.WeatherWidget {
  display: flex;
  flex-direction: column;
  width: 300px;
  background: #5CC8E5;
}

.WeatherWidget .Widget-header {
  position: relative;
  
  // You can use text-align: right, but flexbox
  // gives you more control with varied content
  display: flex;
  justify-content: flex-end;
  
  overflow: hidden; // Eat the icon
  padding: 10px;
}

.WeatherWidget .Widget-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.WeatherWidget-primaryIcon {
  position: absolute;
  top: -50px;
  left: -50px;
  height: 120px;
  width: 120px;
  z-index: 0;
  opacity: .4;
}

.WeatherWidget .Widget-headline {
  font-size: 3em;
  z-index: 1;
}

.WeatherWidget .Widget-body {
  flex: 1; // Take up all available space
  background: darken(#5CC8E5, 8%);
  padding: 20px;
  font-weight: 300;
}

/*
 * Calendar Widget
 */
.CalendarWidget {
  background: #2699D0;
  overflow-x: auto;
}

.CalendarWidget .Widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.CalendarWidget img {
  height: 30px;
}

.CalendarWidget .Widget-headline {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.CalendarWidget .Widget-body {
  background: #2180AC;
}

.CalendarWidget-dayHeaders td {
  color: #A1E0F5;
}

.CalendarWidget td {
  padding: 6px 8px;
}

/*
 * Message Widget
 */
.MessageWidget {
  display: flex;
  flex-direction: column;
  background: #ECEDF0;
  color: #717A8D;
}

.MessageWidget .Widget-header {
  flex: 1;
  display: flex;
  // Again, center everything and use
  // reasonable spacing
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 10px 20px;
}

.MessageWidget-graphic {
  width: 60px;
}

.MessageWidget .Widget-subHeadline {
  font-weight: 300;
}

.MessageWidget .Widget-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
  background: #E67053;
}

.MessageWidget .Widget-body img {
  height: 30px;
}

.Color-1 {
  background: #D4F4E8;
}

.Color-2 {
  background: #FF95A2;
}

.Color-3 {
  background: #ED8161;
  color: white;
}

.Color-4 {
  background: #68A691;
  color: white;
}

@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:300,400,700);