/*
  NOTE: normally I'd minify/uglify all resources, but since this is partly a code
        exercise, I've left it all as is for easy reading
*/

/*
  CSS tested in Chrome/Firefox/Edge.
  (yes this indicates I'm developing this on a Windows machine, don't hate me
  for it, normally I'd use a Mac for web development)
  Definitely not going to work in IE.
  Safari? Too lazy to break out the laptop to test.
  Lazy programmers are good programmers right?
*/

/*
  Don't do this, web fonts are the worst.
  So slow.
  But it's nice to have some font options occasionally.
*/
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Russo+One|Source+Code+Pro');

body {
  background-color: var(--color-black);
  font-family: 'Source Code Pro', monospace;
  font-size: 14px;
  height: 100vh;
  margin: 0;
  padding: 0;
  width: 100vw;

  /******************/
  /* colour palette */
  /******************/

  /* base theme colours */
  --color-black: #121010;
  --color-cream: #f0e9da;
  --color-dark-green: #181b0d;
  --color-dark-orange: #864c00;
  --color-green: #27403d;
  --color-light-green: #48725c;
  --color-orange: #d88f2e;
  --color-white: #f5f5f2;

  /* solarized theme colours */
  --solarized-base0: #808080;
  --solarized-base03: #1c1c1c;
  --solarized-base3: #ffffd7;
  --solarized-magenta: #af005f;
  --solarized-orange: #e0975d;
  --solarized-violet: #5f5faf;
  --solarized-yellow: #af8700;

  /* zenburn theme colours */
  --zenburn-dark-green: #35473e;
  --zenburn-dark-grey: #3f3f3f;
  --zenburn-dark-pink: #cc9393;
  --zenburn-green: #709080;
  --zenburn-light-tan: #dcdccc;
  --zenburn-pink: #dca3a3;
  --zenburn-tan: #f0dfaf;

  /*******************/
  /* property styles */
  /*******************/

  --background-color-dark: var(--color-dark-green);
  --background-color-light: var(--color-cream);
  --font-color-dark: var(--color-dark-green);
  --font-color-light: var(--color-cream);
  --font-color-link-dark: var(--color-black);
  --font-color-link-light: var(--color-cream);
  --highlight-color: var(--color-orange);

  /* ctip variable overrides */
  --ctip-focus: 0px 0px 0px 1px var(--color-orange);
}

.theme-solarized {
  --background-color-dark: var(--solarized-base03);
  --background-color-light: var(--solarized-base3);
  --font-color-dark: var(--solarized-base0);
  --font-color-light: var(--solarized-base0);
  --font-color-link-dark: var(--solarized-magenta);
  --font-color-link-light: var(--solarized-magenta);
  --highlight-color: var(--solarized-orange);

  /* ctip variable overrides */
  --ctip-focus: 0px 0px 0px 1px var(--solarized-orange);
}

.theme-zenburn {
  --background-color-dark: var(--zenburn-dark-grey);
  --background-color-light: var(--zenburn-light-tan);
  --font-color-dark: var(--zenburn-dark-grey);
  --font-color-light: var(--zenburn-light-tan);
  --font-color-link-dark: var(--zenburn-dark-green);
  --font-color-link-light: var(--zenburn-tan);
  --highlight-color: var(--zenburn-pink);

  /* ctip variable overrides */
  --ctip-focus: 0px 0px 0px 1px var(--zenburn-pink);
}

/******************/
/* General Styles */
/******************/

* {
  box-sizing: border-box;
}

a {
  color: var(--font-color-link-light);
  padding: 4px;
  text-decoration: none;
  transition:
    background-color 200ms linear,
    color 200ms linear;
}

a:hover {
  background-color: var(--highlight-color);
  color: var(--font-color-link-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Russo One', 'Helvetica', 'Arial', sans-serif;
  font-weight: 100;
  margin: 0;
}

h2 {
  border-bottom: 1px solid var(--highlight-color);
  text-align: right;
  width: 100%;
}

h4 {
  color: var(--color-green);
  font-weight: lighter;
  margin-top: 15px;
}

h4 span {
  font-family: 'Source Code Pro', monospace;
  padding-left: 8px;
}

i {
  position: relative;
  top: 1px;
}

/***************************/
/* Section specific styles */
/***************************/

/* contact / header section */

.contact h1 {
  display: inline-block;
  font-family: 'Alex Brush', cursive;
  font-size: 58px;
  height: 55px;
  margin-bottom: 40px;
  text-align: center;
  width: 100%;
}

.contact .reference-text {
  margin-bottom: 30px;
  text-align: center;
}

.contact .section-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 55px);
}

.contact li {
  margin-bottom: 20px;
}

.contact ul {
  display: block;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 200px;
}

.theme-picker {
  z-index: 2;
}

.panel-container {
  cursor: pointer;
  left: 15px;
  padding: 4px;
  position: absolute;
  transition:
    background-color 200ms linear,
    color 200ms linear;
}

.page-settings {
  top: 15px;
}

.page-info {
  top: 45px;
}

.panel-container:hover {
  background-color: var(--highlight-color);
  color: var(--font-color-dark);
}

.panel-container .panel {
  background-color: #252525;
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.4);
  color: var(--font-color-light);
  font-size: 12px;
  height: 0;
  opacity: 0;
  overflow-y: hidden;
  padding: 15px;
  position: absolute;
  right: -210px;
  top: 2px;
  transform-origin: top left;
  transition: height 300ms ease-out;
  width: 200px;
  z-index: 1;
}

.panel-container.page-info .panel {
  right: -310px;
  width: 300px;
}

.panel-container.show .panel {
  height: 300px;
  opacity: 1;
}

.panel-container .panel h5 {
  font-size: 13px;
  margin: 0 auto 15px;
  text-align: center;
}

.panel-container .panel label {
  display: inline-block;
  margin-bottom: 5px;
}

/* experience section */
.experience .experience-details {
  margin-top: 15px;
}

.experience h3 {
  font-size: 14px;
  line-height: 22px;
}

.experience p {
  margin-left: 15px;
}

/* interests section */

.interests a {
  color: var(--font-color-link-dark);
  display: inline-block;
  margin: 10px 0;
}

.interests li {
  line-height: 1.2em;
}

/* print version of skill section */
.skills-print {
  display: none;
}

/***************/
/* Grid Styles */
/***************/

.main-area {
  display: grid;
  grid-template-columns: 600px 600px;
  grid-template-rows: 335px minmax(300px, calc(100% - 535px)) 200px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 1200px;
}

.main-area > header,
.main-area > section {
  padding: 15px;
  position: relative;
}

.main-area > header,
.main-area > section:nth-child(4),
.main-area > section:nth-child(5),
.main-area > section:nth-child(6) {
  background-color: var(--background-color-dark);
  color: var(--font-color-light);
}

.main-area > section:nth-child(2),
.main-area > section:nth-child(3),
.main-area > section:nth-child(7) {
  background-color: var(--background-color-light);
  color: var(--font-color-dark);
}

.main-area > section h2 {
  display: inline-block;
  height: 30px;
}

.main-area > section li {
  margin-bottom: 10px;
}

.main-area .section-content {
  height: calc(100% - 30px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 15px;
  width: 100%;
}

/******************************/
/* Toggle section size styles */
/******************************/

.main-area > section.fill-grid {
  background-color: var(--background-color-light);
  color: var(--font-color-dark);
  font-size: 1.3em;
  height: calc(100% - 150px);
  left: 0;
  position: absolute;
  top: 150px;
  width: 100%;
  z-index: 1;
}

.main-area > section.fill-grid a {
  color: var(--font-color-link-dark);
}

.main-area > header.fill-grid {
  height: 150px;
  left: 0;
  padding: 15px 30px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.main-area > header.fill-grid h1 {
  font-size: 30px;
  height: auto;
  margin-bottom: 20px;
}

.main-area > header.fill-grid ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.main-area > header.fill-grid .section-content {
  display: block;
}

.main-area > header.fill-grid .reference-text {
  margin: 0;
}

.main-area > section.fill-grid .section-content {
  padding: 0 50px;
}

.toggle-fill-grid {
  cursor: pointer;
  left: 15px;
  padding: 4px;
  position: absolute;
  top: 15px;
  transition:
    background-color 200ms linear,
    color 200ms linear;
}

.toggle-fill-grid:hover {
  background-color: var(--highlight-color);
  color: var(--font-color-dark);
}

.toggle-fill-grid .ion-md-contract {
  display: none;
}

.fill-grid .toggle-fill-grid .ion-md-contract {
  display: inline;
}

.fill-grid .toggle-fill-grid .ion-md-expand {
  display: none;
}

/* change view on smaller width displays or for print */

@media print, (max-width: 1200px) {
  body {
    height: auto;
  }

  .main-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }

  .main-area > header,
  .main-area > section {
    padding: 15px 30px;
  }

  .main-area .section-content {
    height: auto;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
  }

  .toggle-fill-grid {
    display: none;
  }

  /* change order of sections at this breakpoint */

  .skills {
    order: 4;
  }

  .experience {
    order: 3;
  }

  .education {
    order: 5;
  }

  .interests {
    order: 6;
  }

  .contact h1 {
    font-size: 38px;
    height: auto;
  }

  .main-area .section-content.skills-chart-container {
    height: 300px;
  }
}

@page {
  margin: 30px;
}

@media print {
  a,
  body {
    color: var(--color-black);
    font-size: 12px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-dark-green);
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  .contact h1 {
    margin-bottom: 20px;
  }

  .contact li {
    margin-bottom: 15px;
  }

  .contact .reference-text {
    margin: 0;
  }

  /* display flex and grid do not work well in print media */
  .main-area {
    display: block;
  }

  .main-area > header,
  .main-area > section:nth-child(2),
  .main-area > section:nth-child(3),
  .main-area > section:nth-child(4),
  .main-area > section:nth-child(5),
  .main-area > section:nth-child(6),
  .main-area > section:nth-child(7) {
    background-color: white;
    color: var(--color-black);
  }

  .skills-print {
    page-break-after: always;
  }

  .main-area .skills {
    display: none;
  }

  .main-area .skills-print {
    display: block;
  }

  .main-area .skills-print .section-content {
    padding: 30px;
  }

  .main-area .skills-print table,
  .main-area .skills-print tr {
    width: 100%;
  }

  .main-area .skills-print td {
    padding-bottom: 10px;
  }

  .main-area .skills-print tr td:first-child {
    font-weight: bold;
    max-width: 100px;
  }

  .main-area .skills-print tfoot {
    font-weight: bold;
  }

  .main-area .skills-print tfoot tr td:nth-child(3) {
    text-align: center;
  }

  .main-area .skills-print tfoot tr td:last-child {
    text-align: right;
  }

  .panel-container,
  .panel-container .panel {
    display: none;
  }
}