/*
  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/Safari/Edge.
    Definitely not going to work in IE.
*/

/*
  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: #120a06;
  --color-cream: #f0e9da;
  --color-dark-brown: #1a0f0a;
  --color-dark-orange: #864c00;
  --color-mid-brown: #7a4a2a;
  --color-orange: #d88f2e;
  --color-white: #f5f5f2;

  /* solarized theme colours */
  --solarized-base0: #839496;
  --solarized-base01: #586e75;
  --solarized-base03: #002b36;
  --solarized-base3: #fdf6e3;
  --solarized-cyan: #2aa198;
  --solarized-magenta: #d33682;
  --solarized-orange: #cb4b16;
  --solarized-violet: #6c71c4;
  --solarized-yellow: #b58900;

  /* zenburn theme colours */
  --zenburn-dark-grey: #3f3f3f;
  --zenburn-dark-pink: #cc9393;
  --zenburn-mid: #5e5754;
  --zenburn-light-tan: #dcdccc;
  --zenburn-pink: #dca3a3;
  --zenburn-tan: #f0dfaf;

  /* dracula theme colours */
  --dracula-background: #282a36;
  --dracula-current-line: #44475a;
  --dracula-foreground: #f8f8f2;
  --dracula-comment: #6272a4;
  --dracula-cyan: #8be9fd;
  --dracula-light: #f4f3ff;
  --dracula-orange: #ffb86c;
  --dracula-pink: #ff79c6;
  --dracula-purple: #bd93f9;
  --dracula-red: #ff5555;
  --dracula-yellow: #f1fa8c;

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

  --background-color-dark: var(--color-dark-brown);
  --background-color-light: var(--color-cream);
  --background-color-mid: var(--color-mid-brown);
  --font-color-dark: var(--color-dark-brown);
  --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);
  --background-color-mid: var(--solarized-base01);
  --font-color-dark: var(--solarized-base01);
  --font-color-light: var(--solarized-base3);
  --font-color-link-dark: var(--solarized-magenta);
  --font-color-link-light: var(--solarized-cyan);
  --highlight-color: var(--solarized-yellow);

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

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

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

.theme-dracula {
  --background-color-dark: var(--dracula-background);
  --background-color-light: var(--dracula-light);
  --background-color-mid: var(--dracula-current-line);
  --font-color-dark: var(--dracula-background);
  --font-color-light: var(--dracula-foreground);
  --font-color-link-dark: var(--dracula-background);
  --font-color-link-light: var(--dracula-cyan);
  --highlight-color: var(--dracula-purple);

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

/******************/
/* 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(--highlight-color);
  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: 290px;
}

.contact .location {
  align-items: flex-start;
  color: var(--font-color-link-light);
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

.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 {
  display: inline-block;
  margin: 10px 0;
}

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

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

.main-area {
  display: grid;
  grid-template-columns: 500px 700px;
  grid-template-rows: 400px minmax(200px, calc(100% - 740px)) 340px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 1200px;
}

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

.main-area > .contact,
.main-area > .interests {
  background-color: var(--background-color-dark);
  color: var(--font-color-light);
}

.main-area > .about {
  background-color: var(--background-color-light);
  color: var(--font-color-dark);
}

.main-area > .experience {
  background-color: var(--background-color-mid);
  color: var(--font-color-light);
}

.main-area > .contact {
  grid-column: 1;
  grid-row: 1;
}

.main-area > .about {
  grid-column: 1;
  grid-row: 2;
}

.main-area > .experience {
  grid-column: 2;
  grid-row: 1 / 4;
}

.main-area > .interests {
  grid-column: 1;
  grid-row: 3;
}

.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;
  grid-column: auto;
  grid-row: auto;
  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 {
  grid-column: auto;
  grid-row: auto;
  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;
  }

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

@page {
  margin: 30px;
}

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-dark-brown);
    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 {
    background-color: white;
    color: var(--color-black);
  }

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