/**
 * TODO: Exercise 5.2: give real quality to the style of the app:
 *       - Use a good combination of colours (color.adobe.com can help):
 *         * Apply a gradient to the main background
 *         * Improve the article style applying a white semi-transparent
 *           background, rounded borders and a little shadow.
 *       - Improve the style of the image so that any size image can perfectly
 *         fit without appearing wrong/cut/with white spaces...
 *       - Use custom fonts, one for the title and one for the rest of the app
 *       - Actually center the title
 *       - Use SVG icons for the header buttons.
 *       - Add a media query to modify the design when shown in landscape
 *       - Set 1 line ellipsis style to the description of the article so that
 *         the layout is the same independent of the text size.
 *       - Set the price and button area to the bottom in both orientation modes.
 */

/* Normalizing rules */
body {
  margin: 0px;
}

/* Setting these 100% heights are vital so that the scroll area
   can know its size; otherwise all the page will scroll down like
   a normal web site */
html, body {
  height: 100%;
}

.vertical-layout {
  display: flex;
  flex-direction: column; /* main axis direction (default: row) */
}

.horizontal-layout {
  display: flex;
  flex-direction: row; /* main axis direction (default: row) */
  justify-content: space-between; /* main axis distribution */
}

header {
  height: 44px; /* Common guidelines: iOS => 44px; Android => 56px */
  align-items: center; /* flex property for cross axis alignment */
  padding-left: 8px;
  padding-right: 8px;
  background-color: crimson;
  color: white;
}

main {
  flex: 1;
  overflow-y: auto;
  background-color: tomato;
  padding: 8px;
}

article {
  background-color: white;
  margin-bottom: 8px;
}

article:last-child {
  margin-bottom: 0px;
}

article > img {
  height: 200px;
  width: 300px;
}

article > footer {
  padding: 8px;
}

.button {
  border: 1px solid black;
  border-radius: 6px;
  padding: 3px;
}

header .button {
  border: 1px solid white;
}

article .button {
  border: 1px solid crimson;
  color: crimson;
}