/*
 * Melissa Hovik
 * 09.28.18
 *
 * CSS for my AboutMe page! It's a work-in-progress, need to factor out some redundant
 * styles :)
 */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');

html {
  margin: 0 0;
  font-family: 'Lato', Ubuntu, Arial, sans-serif;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
}

main, body > header {
  width: 70%;
  margin: auto auto;
}

body > header {
  width: 100%;
  background-color: #fff;
  margin-bottom: 0;
}

body > header h1, body > header nav {
  width: 70%;
  margin: auto auto;
}

section ul {
  margin: 0;
}

nav ul {
  margin-top: 10px;
}

h1 {
  font-family: 'Montserrat', Ubuntu, Arial, sans-serif;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 5px;
}

header hr {
  border-bottom: 5px solid #333;
}

main {
  margin-bottom: 100px;
}

#introduction {
  display: flex;
  flex-direction: row;
  align-items: start;
}

#profile {
  height: 160px;
  margin-left: 20px;
  margin-bottom: 20px;
  border-radius: 50%;
}

.column-container {
  display: flex;
  justify-content: space-between;
}

#learner-info .column:first-child {
  width: 60%;
}

#learner-info .column:nth-child(2) {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.column img {
  width: 60%;
  margin-bottom: 10px;
}

nav ul {
  display: flex;
  list-style-type: none;
  padding-left: 0;
  width: 100%;
  font-size: 16pt;
}

nav li {
  margin-right: 20px;
  cursor: pointer;
}

nav li.selected {
  font-weight: bold;
}

section {
  margin-bottom: 20px;
}

article header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

article header img {
  width: 60px;
  margin-right: 5px;
}

article header .images {
  align-self: flex-start;
}

h2 {
  font-size: 2em;
  margin: 0 10px 0 0;
}

.row {
  display: flex;
  height: 250px;
  justify-content: space-between;
}

.row img {
  height: 100%;
}

footer {
  width: 100%;
  margin-right: auto;
  background-color: #e3e3e3;
  text-align: center;
  height: 40px;
  position: fixed;
  bottom: 0;
}

footer p {
  vertical-align: middle;
  line-height: 40px;
  margin: 0;
}

h3 {
  margin-top: 0;
  background-color: #e3e3e3;
  padding: 5px;
  border-radius: 2px;
  width: 100%;
}

#crossword {
  width: 160px;
  height: 160px;
  margin: 20px auto;
  display: flex;
  border: 5px solid black;
  flex-direction: column;
}

.cw-row, #website-row {
  display: flex;
  flex: 1 1 0;
}

p.caption {
  text-align: center;
  font-weight: bold;
}

.filled-tile {
  background-color: black;
}

.cw-row div {
  flex: 1 0 auto;
  border: 2pt solid black;
}

.favorites.row > div, #xkcd-container {
  width: 33%;
  padding: 10px;
  text-align: center;
}

#crossword-container {
  padding-top: 10px;
}

#crossword-container .caption {
  margin-top: 35px;
}

#website-row > div:nth-child(odd)  {
  width: 30%;
}

#xkcd-container {
  width: 40%;
  text-align: center;
}

.row > div > div {
  height: 210px;
  text-align: center;
}

.row.smaller-images {
  height: 210px;
}

#xkcd {
  text-align: center;
  max-width: 100%;
  overflow: auto;
}

.tools.row > div {
  width: 33%;
  text-align: center;
  height: 180px;
}