:root {
  --main-colour: var(--p-t_main-colour);
  --accent-colour: var(--p-t_accent-colour);
  --opacity-colour: var(--p-t_opacity-colour);
  --main-nav-arrow: var(--p-t_main-nav-arrow);
  --accent-nav-arrow: var(--p-t_accent-nav-arrow);
  --p-t_main-colour: #6662D9;
  --p-t_accent-colour: #72FCDB;
  --p-t_opacity-colour: #6763d9cc;
  --p-t_main-nav-arrow: url(/assets/images/nav-arrows/nav-arrow_p-t_main.svg);
  --p-t_accent-nav-arrow: url(/assets/images/nav-arrows/nav-arrow_p-t_accent.svg);
  --o-b_main-colour: #FFAB34;
  --o-b_accent-colour: #84297E;
  --o-b_opacity-colour: #ffab34cc;
  --o-b_main-nav-arrow: url(/assets/images/nav-arrows/nav-arrow_o-b_main.svg);
  --o-b_accent-nav-arrow: url(/assets/images/nav-arrows/nav-arrow_o-b_accent.svg);
  --b-ng_main-colour: #0697B5;
  --b-ng_accent-colour: #9EF204;
  --b-ng_opacity-colour: #0697b5cc;
  --b-ng_main-nav-arrow: url(/assets/images/nav-arrows/nav-arrow_b-ng_main.svg);
  --b-ng_accent-nav-arrow: url(/assets/images/nav-arrows/nav-arrow_b-ng_accent.svg); }

html {
  scroll-behavior: smooth; }

body {
  background-color: var(--main-colour);
  margin: 0;
  padding: 100px 0 0 0;
  position: relative;
  scroll-behavior: smooth; }
  body svg path, body svg circle, body svg rect {
    fill: var(--main-colour); }
  body > section {
    min-height: calc(100vh - 100px);
    padding: 100px 5em 0 5em;
    background-color: var(--main-colour); }
    body > section:nth-of-type(even) {
      background-color: var(--accent-colour); }
      body > section:nth-of-type(even) h1, body > section:nth-of-type(even) h2, body > section:nth-of-type(even) h3, body > section:nth-of-type(even) li, body > section:nth-of-type(even) p, body > section:nth-of-type(even) a {
        color: var(--main-colour); }
    body > section:last-of-type {
      height: calc(100vh - 5px); }

h1, h2, h3, li, p, a {
  color: var(--accent-colour);
  font-family: "Graphie", Arial, Helvetica, sans-serif;
  text-decoration: none;
  margin: 0; }

h1 {
  font-family: "Automate", Arial, Helvetica, sans-serif; }

ul {
  display: inline-block; }
  ul li {
    list-style: none; }

/* width */
::-webkit-scrollbar {
  width: 10px; }

/* Track */
::-webkit-scrollbar-track {
  background: var(--accent-colour); }

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--opacity-colour); }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--opacity-colour); }

header #flash-hello, header nav {
  display: grid;
  grid-template-columns: 45% auto;
  align-items: stretch;
  height: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100%;
  background-color: var(--main-colour); }
  header #flash-hello > section, header nav > section {
    padding: 0 2em;
    display: grid;
    align-items: center; }
    header #flash-hello > section svg, header nav > section svg {
      justify-self: end;
      height: 3em;
      width: 3em; }
    header #flash-hello > section p, header nav > section p {
      font-family: "Automate", Arial, Helvetica, sans-serif;
      font-weight: bold; }
    header #flash-hello > section:nth-of-type(even), header nav > section:nth-of-type(even) {
      background-color: var(--accent-colour); }
      header #flash-hello > section:nth-of-type(even) h3, header #flash-hello > section:nth-of-type(even) p, header nav > section:nth-of-type(even) h3, header nav > section:nth-of-type(even) p {
        color: var(--main-colour); }

header #flash-hello svg, header #flash-hello h3 {
  margin-top: 0;
  animation: flashHello 1s forwards 3s; }

header #flash-hello section > svg path {
  stroke: var(--accent-colour); }

header #flash-hello section#mobile-nav-icon {
  display: none;
  pointer-events: none; }
  header #flash-hello section#mobile-nav-icon svg {
    animation: none; }
    header #flash-hello section#mobile-nav-icon svg path {
      stroke: var(--main-colour); }

header nav {
  opacity: 0;
  pointer-events: none; }
  header nav p {
    position: relative; }
  header nav p.active::after {
    height: 1em;
    width: 1em;
    background-image: var(--accent-nav-arrow);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.5em;
    content: ''; }
  header nav section:last-of-type p.active:after {
    background-image: var(--main-nav-arrow); }
  header nav > section {
    grid-template-columns: 50% auto;
    justify-items: center; }
    header nav > section #colour-changing-options {
      justify-self: end; }
      header nav > section #colour-changing-options svg {
        padding: 0 0.5em;
        cursor: pointer; }
        header nav > section #colour-changing-options svg path {
          pointer-events: none; }
        header nav > section #colour-changing-options svg[data-scheme="p-t"] path[data-name="filling-bucket"] {
          fill: var(--p-t_main-colour); }
        header nav > section #colour-changing-options svg[data-scheme="p-t"] path[data-name="filling-drop"] {
          fill: var(--p-t_accent-colour); }
        header nav > section #colour-changing-options svg[data-scheme="p-t"] path[data-name="outline"] {
          fill: var(--main-colour); }
        header nav > section #colour-changing-options svg[data-scheme="o-b"] path[data-name="filling-bucket"] {
          fill: var(--o-b_main-colour); }
        header nav > section #colour-changing-options svg[data-scheme="o-b"] path[data-name="filling-drop"] {
          fill: var(--o-b_accent-colour); }
        header nav > section #colour-changing-options svg[data-scheme="o-b"] path[data-name="outline"] {
          fill: var(--main-colour); }
        header nav > section #colour-changing-options svg[data-scheme="b-ng"] path[data-name="filling-bucket"] {
          fill: var(--b-ng_main-colour); }
        header nav > section #colour-changing-options svg[data-scheme="b-ng"] path[data-name="filling-drop"] {
          fill: var(--b-ng_accent-colour); }
        header nav > section #colour-changing-options svg[data-scheme="b-ng"] path[data-name="outline"] {
          fill: var(--main-colour); }

@keyframes flashHello {
  50% {
    opacity: 0; }
  100% {
    margin-top: -300px; } }

#introduction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - 10em);
  height: calc(100vh - 100px); }
  #introduction h1 {
    align-self: center;
    padding: 1.5em 0; }
  #introduction svg.mobile-svg {
    display: none; }
  #introduction svg.desktop-svg {
    padding: 0 0 1.5em 0; }
    #introduction svg.desktop-svg .pull-request-icon {
      stroke: var(--accent-colour);
      stroke-miterlimit: 10;
      stroke-width: 7px; }
    #introduction svg.desktop-svg .pull-request-icon .circle, #introduction svg.desktop-svg .pull-request-icon .arrow-head {
      stroke: none;
      fill: var(--accent-colour); }
    #introduction svg.desktop-svg .merge-icon {
      stroke: var(--accent-colour);
      stroke-miterlimit: 10;
      stroke-width: 7px; }
    #introduction svg.desktop-svg .merge-icon .circle {
      stroke: none;
      fill: var(--accent-colour); }
    #introduction svg.desktop-svg .pull-request-icon .text, #introduction svg.desktop-svg .merge-icon .text {
      stroke: none; }
    #introduction svg.desktop-svg .travel {
      stroke: var(--accent-colour);
      stroke-miterlimit: 10;
      stroke-width: 7px; }
    #introduction svg.desktop-svg .travel path {
      fill: none; }
    #introduction svg.desktop-svg .commit path {
      stroke: none;
      fill: var(--accent-colour);
      opacity: 0; }
    #introduction svg.desktop-svg .text {
      font-family: "Automate", Arial, Helvetica, sans-serif;
      font-size: 14px;
      fill: var(--accent-colour);
      opacity: 0; }
    #introduction svg.desktop-svg .pull-request-icon .text {
      opacity: 1; }
    #introduction svg.desktop-svg .travel > path {
      stroke-dashoffset: 217px;
      stroke-dasharray: 217px;
      animation: draw 1.5s ease forwards;
      animation-delay: 0.5s; }
    #introduction svg.desktop-svg .travel.path-2 > path {
      animation-delay: 2s; }
    #introduction svg.desktop-svg .travel.path-3 > path {
      animation-delay: 4s; }
    #introduction svg.desktop-svg .travel.path-4 > path {
      animation-delay: 5.7s; }
    #introduction svg.desktop-svg .travel.path-5 > path {
      animation-delay: 7s; }
    #introduction svg.desktop-svg .commit text, #introduction svg.desktop-svg .commit path, #introduction svg.desktop-svg .merge-icon text, #introduction svg.desktop-svg .merge-icon path {
      animation: show 0.5s ease forwards;
      animation-delay: 1s; }
    #introduction svg.desktop-svg .commit.commit-1 > text, #introduction svg.desktop-svg .commit.commit-1 > path, #introduction svg.desktop-svg .merge-icon.commit-1 > text, #introduction svg.desktop-svg .merge-icon.commit-1 > path {
      animation-delay: 0.5s; }
    #introduction svg.desktop-svg .commit.commit-2 > text, #introduction svg.desktop-svg .commit.commit-2 > path, #introduction svg.desktop-svg .merge-icon.commit-2 > text, #introduction svg.desktop-svg .merge-icon.commit-2 > path {
      animation-delay: 1.5s; }
    #introduction svg.desktop-svg .commit.commit-3 > text, #introduction svg.desktop-svg .commit.commit-3 > path, #introduction svg.desktop-svg .merge-icon.commit-3 > text, #introduction svg.desktop-svg .merge-icon.commit-3 > path {
      animation-delay: 3.5s; }
    #introduction svg.desktop-svg .commit.commit-4 > text, #introduction svg.desktop-svg .commit.commit-4 > path, #introduction svg.desktop-svg .merge-icon.commit-4 > text, #introduction svg.desktop-svg .merge-icon.commit-4 > path {
      animation-delay: 5s; }
    #introduction svg.desktop-svg .commit.commit-5 > text, #introduction svg.desktop-svg .commit.commit-5 > path, #introduction svg.desktop-svg .merge-icon.commit-5 > text, #introduction svg.desktop-svg .merge-icon.commit-5 > path {
      animation-delay: 6.7s; }
    #introduction svg.desktop-svg .commit > text, #introduction svg.desktop-svg .merge-icon > text {
      animation-delay: 6.5s; }

@keyframes draw {
  to {
    stroke-dashoffset: 0; } }

@keyframes show {
  to {
    opacity: 1; } }

#work {
  display: grid;
  grid-template-columns: 2fr 5fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "heading heading tech"
 "highlight highlight tech"
 "highlight highlight tech"
 "highlight highlight tech"
 "tiles tiles tech";
  align-items: center;
  margin-top: 100vh;
  z-index: 1;
  position: relative; }
  #work ::-webkit-scrollbar-thumb {
    border-radius: 20px; }
  #work h1 {
    grid-area: heading;
    transition: opacity 1s;
    opacity: 0; }
  #work section {
    transition: opacity 1s;
    opacity: 0; }
  #work > section:nth-of-type(1) {
    grid-area: highlight;
    display: flex;
    padding-left: 2em;
    transition: opacity 0.5s; }
    #work > section:nth-of-type(1) .project-highlight-display {
      border-radius: 20px;
      overflow-y: scroll;
      overflow-x: hidden;
      width: 60%;
      height: 45vh;
      background: var(--main-colour);
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* Internet Explorer 10+ */
      position: relative; }
      #work > section:nth-of-type(1) .project-highlight-display::-webkit-scrollbar {
        width: 0;
        height: 0; }
      #work > section:nth-of-type(1) .project-highlight-display svg {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 20px;
        background: var(--accent-colour);
        padding: 0.5em;
        animation: scrollSVGAnimation 0.5s ease-in-out forwards paused;
        pointer-events: none;
        height: 3em;
        width: 3em; }
      #work > section:nth-of-type(1) .project-highlight-display img {
        width: 100%; }

@keyframes scrollSVGAnimation {
  to {
    bottom: -20px;
    opacity: 0; } }
    #work > section:nth-of-type(1) .project-highlight-information {
      display: flex;
      flex-direction: column;
      padding: 0 5em 0 2em;
      width: 40%;
      justify-content: space-between; }
      #work > section:nth-of-type(1) .project-highlight-information .tech-used {
        align-self: flex-end; }
        #work > section:nth-of-type(1) .project-highlight-information .tech-used svg {
          height: 1.5em;
          width: 1.5em;
          padding-left: 0.5em; }
      #work > section:nth-of-type(1) .project-highlight-information h2, #work > section:nth-of-type(1) .project-highlight-information p {
        text-align: right; }
      #work > section:nth-of-type(1) .project-highlight-information .project-links a {
        display: flex;
        align-items: center;
        padding-top: 1em; }
        #work > section:nth-of-type(1) .project-highlight-information .project-links a svg {
          height: 1.5em;
          width: 1.5em; }
        #work > section:nth-of-type(1) .project-highlight-information .project-links a p {
          padding-left: 1em;
          text-align: left; }
  #work > section:nth-of-type(2) {
    grid-area: tiles;
    display: flex;
    justify-content: flex-start;
    overflow-y: hidden;
    overflow-x: scroll;
    margin-left: 2em;
    margin-top: 1em;
    margin-bottom: 3em;
    margin-right: 4em; }
    #work > section:nth-of-type(2) .project-tiles {
      opacity: 1;
      display: flex;
      justify-content: flex-start; }
  #work aside {
    grid-area: tech;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 1s;
    opacity: 0; }
    #work aside svg {
      padding: 1em;
      width: 2.5em; }
  #work .project-tile {
    position: relative;
    height: 10em;
    width: 12em;
    margin-right: 5em;
    margin-bottom: 1em;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: opacity 0.5s; }
    #work .project-tile:last-child {
      margin-right: 0; }
    #work .project-tile img {
      width: 100%;
      pointer-events: none; }
    #work .project-tile .overlay {
      height: 100%;
      width: 100%;
      background: var(--opacity-colour);
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none; }
    #work .project-tile .tech-used {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-content: center;
      pointer-events: none;
      flex-wrap: wrap;
      justify-content: center; }
      #work .project-tile .tech-used svg {
        width: 2em;
        height: 2em;
        padding: 1em; }
        #work .project-tile .tech-used svg path {
          fill: var(--accent-colour); }

@keyframes fadeInOut {
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

#contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-top: 0;
  padding-bottom: 100px; }
  #contact h1 {
    align-self: flex-end;
    padding-bottom: 3em;
    transition: opacity 1s;
    opacity: 0; }
  #contact svg path, #contact svg circle {
    fill: var(--accent-colour); }
  #contact #info {
    transition: opacity 1s;
    opacity: 0;
    display: flex;
    justify-content: space-around; }
    #contact #info section {
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      #contact #info section a {
        display: flex;
        align-items: center; }
        #contact #info section a h3 {
          padding-left: 2em; }
    #contact #info aside {
      display: flex; }
      #contact #info aside #picture-of-me {
        position: relative; }
        #contact #info aside #picture-of-me svg {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
          #contact #info aside #picture-of-me svg:nth-of-type(1) {
            margin-left: -160px;
            margin-top: -35px; }
          #contact #info aside #picture-of-me svg:nth-of-type(2) {
            margin-left: -165px;
            margin-top: 10px; }
          #contact #info aside #picture-of-me svg:nth-of-type(3) {
            margin-top: 105px;
            margin-left: 154px; }
          #contact #info aside #picture-of-me svg:nth-of-type(4) {
            margin-top: 62px;
            margin-left: 168px; }
          #contact #info aside #picture-of-me svg:nth-of-type(5) {
            margin-top: -125px;
            margin-left: 88px; }
      #contact #info aside #extra-info {
        padding-top: 1em; }
        #contact #info aside #extra-info div {
          display: flex;
          align-items: center;
          padding-bottom: 2em; }
          #contact #info aside #extra-info div p {
            padding-left: 1em;
            cursor: default; }
          #contact #info aside #extra-info div:nth-of-type(2) {
            padding-left: 1em; }

footer {
  display: grid;
  grid-template-columns: 45% auto;
  align-items: stretch;
  min-height: 120px;
  position: relative;
  background-color: var(--main-colour); }
  footer > div {
    padding: 0 2em;
    display: flex;
    align-items: center; }
    footer > div p {
      font-weight: bold; }
    footer > div:nth-of-type(odd) {
      background-color: var(--accent-colour);
      justify-content: flex-end; }
      footer > div:nth-of-type(odd) h3 {
        color: var(--main-colour);
        padding-right: 3em; }
      footer > div:nth-of-type(odd) svg {
        height: 3em; }

@media (max-width: 1000px) {
  body section {
    padding-left: 1em;
    padding-right: 1em; }
  header #flash-hello {
    opacity: 1;
    grid-template-columns: 100px auto 100px; }
    header #flash-hello svg, header #flash-hello h3 {
      animation: none; }
    header #flash-hello section#mobile-nav-icon {
      display: flex;
      background-color: var(--accent-colour);
      pointer-events: all; }
      header #flash-hello section#mobile-nav-icon svg.menu {
        display: block; }
      header #flash-hello section#mobile-nav-icon svg.close {
        display: none; }
      header #flash-hello section#mobile-nav-icon.open svg.menu {
        display: none; }
      header #flash-hello section#mobile-nav-icon.open svg.close {
        display: block; }
      header #flash-hello section#mobile-nav-icon svg {
        cursor: pointer; }
  header nav {
    margin-top: 100px;
    grid-template-columns: auto;
    height: fit-content;
    width: 100%;
    right: 0;
    border-bottom: 5px solid var(--main-colour);
    pointer-events: none;
    opacity: 0; }
    header nav section:last-of-type p.active:after {
      background-image: var(--accent-nav-arrow); }
    header nav p.active::after {
      left: 0px;
      transform: translateY(50%) rotate(90deg);
      bottom: 50%; }
    header nav > section {
      grid-template-columns: auto;
      padding: 0; }
      header nav > section p {
        padding: 2em; }
      header nav > section #colour-changing-options {
        padding: 1em 0;
        width: 100%;
        text-align: center;
        background-color: var(--accent-colour); }
      header nav > section:nth-of-type(even) {
        background-color: var(--main-colour); }
        header nav > section:nth-of-type(even) p {
          color: var(--accent-colour); }
  #introduction {
    width: calc(100% - 2em);
    justify-content: center; }
    #introduction svg.desktop-svg {
      display: none; }
    #introduction svg.mobile-svg {
      display: inherit;
      padding: 0 0 1.5em 0; }
      #introduction svg.mobile-svg .pull-request-icon {
        stroke: var(--accent-colour);
        stroke-miterlimit: 10;
        stroke-width: 7px; }
      #introduction svg.mobile-svg .pull-request-icon .circle, #introduction svg.mobile-svg .pull-request-icon .arrow-head {
        stroke: none;
        fill: var(--accent-colour); }
      #introduction svg.mobile-svg .merge-icon {
        stroke: var(--accent-colour);
        stroke-miterlimit: 10;
        stroke-width: 7px; }
      #introduction svg.mobile-svg .merge-icon .circle {
        stroke: none;
        fill: var(--accent-colour); }
      #introduction svg.mobile-svg .pull-request-icon .text, #introduction svg.mobile-svg .merge-icon .text {
        stroke: none; }
      #introduction svg.mobile-svg .travel {
        stroke: var(--accent-colour);
        stroke-miterlimit: 10;
        stroke-width: 7px; }
      #introduction svg.mobile-svg .travel path {
        fill: none; }
      #introduction svg.mobile-svg .commit path {
        stroke: none;
        fill: var(--accent-colour);
        opacity: 0; }
      #introduction svg.mobile-svg .text {
        font-family: "Automate", Arial, Helvetica, sans-serif;
        font-size: 14px;
        fill: var(--accent-colour);
        opacity: 0; }
      #introduction svg.mobile-svg .pull-request-icon .text {
        opacity: 1; }
      #introduction svg.mobile-svg .travel > path {
        stroke-dashoffset: 38px;
        stroke-dasharray: 38px;
        animation: draw 1.5s ease forwards;
        animation-delay: 0.5s; }
      #introduction svg.mobile-svg .travel.path-2 > path {
        animation-delay: 2s; }
      #introduction svg.mobile-svg .travel.path-3 > path {
        animation-delay: 4s; }
      #introduction svg.mobile-svg .travel.path-4 > path {
        animation-delay: 5.7s; }
      #introduction svg.mobile-svg .travel.path-5 > path {
        animation-delay: 7s; }
      #introduction svg.mobile-svg .commit text, #introduction svg.mobile-svg .commit path, #introduction svg.mobile-svg .merge-icon text, #introduction svg.mobile-svg .merge-icon path {
        animation: show 0.5s ease forwards;
        animation-delay: 1s; }
      #introduction svg.mobile-svg .commit.commit-1 > text, #introduction svg.mobile-svg .commit.commit-1 > path, #introduction svg.mobile-svg .merge-icon.commit-1 > text, #introduction svg.mobile-svg .merge-icon.commit-1 > path {
        animation-delay: 0.5s; }
      #introduction svg.mobile-svg .commit.commit-2 > text, #introduction svg.mobile-svg .commit.commit-2 > path, #introduction svg.mobile-svg .merge-icon.commit-2 > text, #introduction svg.mobile-svg .merge-icon.commit-2 > path {
        animation-delay: 1.5s; }
      #introduction svg.mobile-svg .commit.commit-3 > text, #introduction svg.mobile-svg .commit.commit-3 > path, #introduction svg.mobile-svg .merge-icon.commit-3 > text, #introduction svg.mobile-svg .merge-icon.commit-3 > path {
        animation-delay: 3.5s; }
      #introduction svg.mobile-svg .commit.commit-4 > text, #introduction svg.mobile-svg .commit.commit-4 > path, #introduction svg.mobile-svg .merge-icon.commit-4 > text, #introduction svg.mobile-svg .merge-icon.commit-4 > path {
        animation-delay: 5s; }
      #introduction svg.mobile-svg .commit.commit-5 > text, #introduction svg.mobile-svg .commit.commit-5 > path, #introduction svg.mobile-svg .merge-icon.commit-5 > text, #introduction svg.mobile-svg .merge-icon.commit-5 > path {
        animation-delay: 6.7s; }
      #introduction svg.mobile-svg .commit > text, #introduction svg.mobile-svg .merge-icon > text {
        animation-delay: 6.5s; }
  #work {
    height: auto;
    width: calc(100% - 2em);
    grid-template-areas: "heading heading heading"
 "highlight highlight highlight"
 "highlight highlight highlight"
 "highlight highlight highlight"
 "tiles tiles tiles";
    grid-template-rows: 0.5fr 1fr 1fr 1fr;
    padding: 100px 1em;
    text-align: center; }
    #work aside {
      display: none; }
    #work > section:nth-of-type(1) {
      flex-direction: column;
      margin-bottom: 1em; }
      #work > section:nth-of-type(1) .project-highlight-display {
        width: 100%; }
      #work > section:nth-of-type(1) .project-highlight-information {
        padding: 2em 0 1em 0;
        width: 100%;
        align-items: flex-start; }
        #work > section:nth-of-type(1) .project-highlight-information .tech-used {
          align-self: flex-start;
          padding-bottom: 1em; }
        #work > section:nth-of-type(1) .project-highlight-information h2, #work > section:nth-of-type(1) .project-highlight-information p {
          text-align: left;
          padding-bottom: 1em; }
        #work > section:nth-of-type(1) .project-highlight-information .project-links a {
          align-items: flex-start; }
    #work > section:nth-of-type(2) {
      margin-left: 0;
      margin-right: 0; }
      #work > section:nth-of-type(2) .project-tiles {
        padding: 0; }
    #work .project-tile {
      margin-right: 2em; }
  #contact {
    height: auto;
    width: calc(100% - 2em);
    padding: 100px 1em; }
    #contact h1 {
      align-self: center;
      padding: 3em 0; }
    #contact #info {
      flex-direction: column; }
      #contact #info section a {
        padding-bottom: 2em; }
      #contact #info aside {
        flex-direction: column; }
        #contact #info aside #picture-of-me {
          text-align: center; }
        #contact #info aside #extra-info div {
          padding-left: 1em;
          justify-content: center; }
  footer > div:nth-of-type(odd) {
    flex-direction: column;
    padding: 1em 2em; }
    footer > div:nth-of-type(odd) h3 {
      padding-right: 0;
      padding-bottom: 1em; } }

@media (max-width: 449px) {
  header #flash-hello h3 {
    font-size: 0.8em; } }