@charset "UTF-8";
/* ************************************************************
   Fonts: import external css on "export"
   ************************************************************ */
/**
 * @license
 * MyFonts Webfont Build ID 4470152, 2022-03-10T00:04:31-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Frank-Bold by Great Scott
 * URL: https://www.myfonts.com/fonts/great-scott/gs-frank/bold/
 * 
 * 
 * 
 * © 2022 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/443588");
@import url("https://fonts.googleapis.com/css2?family=Raleway");
@font-face {
  font-family: "Frank-Bold";
  src: url("../fonts/FrankBold/font.woff2") format("woff2"), url("../fonts/FrankBold/font.woff") format("woff");
}
/* ************************************************************
   Globals
   ************************************************************ */
:root {
  /* Colors */
  --color_1: #0da1b5; /* dark teal */
  --color_2: #00c8af; /* teal */
  --color_3: #d5f7f2; /* light teal */
  --color_4: rgba(213, 247, 242, 1); /* light teal w/ alpha */
  --color_5: #1b75bb; /* blue */
  --color_6: #333333; /* dark gray */
  --color_7: #ff861e; /* orange */
  --color_8: #f92848; /* red */
  /* #fc5733 red orange*/
  --black: #000000;
  --black_alpha: rgba(0, 0, 0, 0.9);
  --white: #FFFFFF;
  --white_alpha: rgba(255, 255, 255, 0.96);
  /* Font families */
  --font_fam_1: "Frank-Bold";
  --font_fam_2: "Raleway", "HelveticaLight", "Helvetica Light", Helvetica, Arial, sans-serif;
  /* Borders & Shapes */
  --radius: 6px;
  --circle: 50%;
  /* Effects */
  --animation: 1.0s;
  --transition: .5s ease; /* <property> <duration> <timing-function> <delay> */
  --shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 6px 20px 0 rgba(0, 0, 0, 0.06); */ /* offset-x | offset-y | blur-radius | spread-radius | color */
}

/* ************************************************************
   HTML Tags
   ************************************************************ */
html {
  /*background-image: url("../img/ui/background.svg"), linear-gradient(to bottom, var(--white), rgba(213, 247, 242, .75));  to bottom or 180deg 
  background-position: center top, center 800px;
  background-repeat: no-repeat, no-repeat;
  background-size: 2300px 800px, cover;*/
  background-image: url("../img/ui/background.svg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 2300px 800px;
  background-color: var(--white);
  color: var(--color_6);
  font-family: var(--font_fam_2);
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  white-space: nowrap;
}

body {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  margin-bottom: 60px;
  padding: 0px;
  padding-top: 80px;
  white-space: normal;
}

a {
  transition: color var(--transition);
  text-decoration: none;
}

a, a:link, a:visited {
  color: var(--color_1);
}

a:hover, a:active, a.active {
  color: var(--color_7);
}

/*a img, a:link img, a:visited img { border: 1px solid var(--color_1); }
  a:active img, a:hover img, a.active img { border: 1px solid var(--color_2); }*/
p {
  margin-top: 15px;
  margin-bottom: 40px;
}

ul {
  list-style-type: none; /* Remove bullets */
  margin: 0px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 0px;
}

ul:last-of-type {
  margin-bottom: 10px;
}

li {
  font-size: 16px;
  text-indent: -20px;
  margin-bottom: 2px;
  padding: 2px 8px;
  padding-left: 22px;
}

li::before {
  content: "ø";
  color: var(--color_1);
  padding-right: 10px;
}

.sub-ul {
  margin-top: 6px;
}

.sub-ul li {
  padding-left: 10px;
}

.sub-ul li::before {
  color: var(--color_7);
}

h1 {
  position: sticky;
  top: 20px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: header_icon_fade_in;
  animation-duration: 2s;
  animation-delay: 6s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  font-family: var(--font_fam_1);
  font-size: 52px;
  line-height: 60px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 92px;
  padding: 0px;
  /*margin-top: 20px;
  margin-bottom: 82px;*/
  opacity: 0;
}

@keyframes header_icon_fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
h2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font_fam_1);
  font-size: 30px;
  color: var(--color_1);
  background-color: var(--color_4);
  border: 0.5px solid var(--color_1);
  border-left: 10px solid var(--color_7);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  margin-top: 80px;
  margin-bottom: 0px;
  padding-left: 20px;
  padding-right: 20px;
  width: fit-content;
  height: 60px;
}

h3 {
  font-size: 24px;
  color: var(--color_1);
  margin-top: 15px;
  margin-bottom: 0px;
}

/*h3 span.lowercase { font-size: 20px; }*/
h4 {
  font-family: var(--font_fam_1);
  font-size: 16px;
  text-align: right;
  color: var(--color_7);
  margin: 0px;
}

h5 {
  font-size: 14px;
  font-weight: bold;
  color: var(--color_2);
  margin: 0px;
  margin-top: 4px;
  margin-bottom: 2px;
}

h6 {
  font-size: 12px;
  letter-spacing: normal;
  color: var(--color_2);
  margin: 0px;
  /*margin-top: 4px;
  margin-bottom: 5px;*/
}

header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  padding: 0px;
  perspective: 10em; /* distance */ /* This is important! for 3d effects */
}

nav {
  position: sticky;
  top: 100px;
  z-index: 3;
  animation-name: nav_fade_in;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: flex;
  flex-direction: column;
  /*align-items: space-between;*/
  margin: 0px;
  margin-top: 40px;
  padding: 0px;
  opacity: 0;
  transition: max-width var(--transition);
}

nav #nav_btn {
  line-height: 36px;
  cursor: pointer;
}

nav #nav_opts {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 3;
  animation-name: nav_fade_in;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  margin: auto;
  /*margin-bottom: 20px;
  padding-bottom: 0px;*/
  /*opacity: 0;*/
}

@keyframes nav_fade_in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
nav a, nav a:link, nav a:visited, nav button {
  z-index: 1;
  position: relative;
  background-color: var(--color_1);
  background-image: linear-gradient(to bottom, var(--color_2), var(--color_1), var(--color_5)); /* to bottom or 180deg */
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--white);
  font-family: var(--font_fam_1);
  font-size: 22px;
  line-height: 40px;
  letter-spacing: 2px;
  text-align: center;
  border: 0.5px solid var(--white);
  border-radius: var(--radius);
  width: 120px;
  height: 40px;
  box-shadow: var(--shadow);
  transition: opacity var(--transition);
}

nav a::before, nav button::before {
  z-index: -1;
  position: absolute;
  content: "";
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: var(--color_7);
  background-image: linear-gradient(to bottom, var(--color_7), var(--color_7), var(--color_8));
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--white);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity var(--transition);
}

nav a:hover::before, nav button:hover::before {
  opacity: 1;
}

nav a.active {
  background-color: var(--color_7);
  background-image: linear-gradient(to bottom, var(--color_7), var(--color_7), var(--color_8));
  color: var(--color_6);
  border: 0.5px solid var(--color_6);
  box-shadow: none;
}

nav #about_btn {
  /*width: 185px;*/
  width: 24%;
}

nav #experience_btn {
  /*width: 185px;*/
  width: 24%;
}

/*nav #skills_btn {
  width: 125px;
}*/
nav #portfolio_btn {
  /*width: 175px;*/
  width: 24%;
}

nav #contact_btn {
  /*width: 150px;*/
  width: 24%;
}

nav #nav_btn {
  display: none;
}

main {
  position: relative;
  width: 90%;
  margin: auto;
}

section {
  /*background-color: var(--color_4);*/
  border-bottom: 0.5px solid var(--color_2);
  border-radius: var(--radius);
  padding: 10px;
  padding-top: 8px;
  margin-bottom: 160px;
}

section p:last-of-type {
  margin-bottom: 10px;
}

footer {
  /*position: relative;*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*font-family: var(--font_fam_1);*/
  font-size: 16px;
  margin-bottom: 40px;
}

footer div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

object, svg {
  margin: 0px;
  padding: 0px;
}

noscript div {
  padding: 100px;
}

/* ************************************************************
   #ID
   ************************************************************ */
#page_top_fader {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); /* to bottom or 180deg */
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  height: 250px;
  pointer-events: none;
}

#header_icon {
  width: 166px;
  height: 134px;
}

#resume_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  width: fit-content;
  margin: auto;
  background-color: transparent;
  border: none;
}

#resume_container #download_resume {
  width: 195px;
  height: 163px;
}

#about, #experience, #portfolio, #contact {
  scroll-margin-top: 250px;
}

#portfolio {
  margin-top: 200px;
}

#validation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* NOSCRIPT: js disabled or not supported
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*#contact p noscript {
  color: #333333;
}
footer span noscript {
  color: #333333;
}*/
/* ************************************************************
   .Classes
   ************************************************************ */
.sr_only {
  position: absolute !important;
  margin: 0px;
  padding: 0px;
  width: 1px;
  height: 1px;
  border: 0px;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /* maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /* modern browsers, clip-path works inwards from each corner */
  overflow: hidden;
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

.hello {
  font-size: 28px;
  font-weight: bold;
  color: var(--color_1);
  line-height: 40px;
  width: fit-content;
  margin: auto;
  padding-bottom: 30px;
  /*padding-top: 100px;*/
}

.company {
  display: flex;
  flex-direction: row;
  border-bottom: 0px solid var(--color_2);
  margin-top: 15px;
  margin-bottom: 50px;
}

.company.last {
  margin-bottom: 0px;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-right: 0.5px solid var(--color_2);
  min-width: 180px;
  height: fit-content;
  margin-right: 16px;
  padding-top: 0px;
  padding-right: 16px;
}

.description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.description h3 {
  margin-top: 0px;
  padding-top: 0px;
}

.description p {
  margin-top: 3px;
}

.education p:first-of-type {
  padding-bottom: 40px;
}

/*.skills ul {
  margin-bottom: 0px;
}*/
.contact p {
  text-align: center;
  margin-bottom: 6px;
}

.contact p.hello {
  padding-top: 20px;
  padding-bottom: 0px;
}

.return_to_top {
  font-size: 44px;
}

/* ************************************************************
   @ Media
   ************************************************************ */
@media only screen and (max-width: 800px) {
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 26px;
  }
  /*h3 {
    font-size: 24px;
  }
  h4 {
    line-height: 40px;
  }

  h5 {
    line-height: 20px;
  }

  h6 {
    line-height: 20px;
  }*/
  nav {
    flex-direction: column;
    align-items: center;
  }
  nav #nav_btn {
    display: block;
    width: 120px;
  }
  nav #nav_opts {
    top: 42px;
    flex-direction: column;
    align-items: center;
  }
  nav #nav_opts a:hover {
    color: var(--color_7);
  }
  nav #nav_opts a.active:hover {
    color: var(--color_6);
  }
  nav #about_btn, nav #about_btn:link, nav #about_btn:visited,
  nav #experience_btn, nav #experience_btn:link, nav #experience_btn:visited,
  nav #portfolio_btn, nav #portfolio_btn:link, nav #portfolio_btn:visited,
  nav #contact_btn, nav #contact_btn:link, nav #contact_btn:visited {
    background-color: var(--color_6);
    background-image: none;
    color: var(--white);
    border: none;
    border-radius: 0px;
    /*border-radius: var(--radius);*/
    width: 200px;
    box-shadow: none;
  }
  nav #about_btn, nav #about_btn:link, nav #about_btn:visited {
    padding-top: 6px;
    border-top-right-radius: var(--radius);
    border-top-left-radius: var(--radius);
  }
  nav #contact_btn, nav #contact_btn:link, nav #contact_btn:visited {
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    padding-bottom: 6px;
  }
  nav #about_btn::before,
  nav #experience_btn::before,
  nav #portfolio_btn::before,
  nav #contact_btn::before {
    color: var(--color_7);
    background-color: transparent;
    background-image: none;
    border-radius: 0px;
  }
  nav #about_btn.active,
  nav #experience_btn.active,
  nav #portfolio_btn.active,
  nav #contact_btn.active {
    background-color: var(--color_7);
    background-image: linear-gradient(to bottom, var(--color_7), var(--color_7), var(--color_8));
    color: var(--color_6);
    border: 0px solid var(--color_6);
    box-shadow: none;
  }
  .hello {
    font-size: 25px;
  }
  .company {
    flex-direction: column;
    align-items: center;
    border-bottom: 0.5px solid var(--color_2);
  }
  .info {
    align-items: flex-start;
    border-right: 0px solid var(--color_2);
    width: 100%;
    margin-right: auto;
    margin-bottom: 30px;
    /*padding-right: auto;*/
  }
}
/* ************************************************************
   Note about css animation:
   ************************************************************ */
/* see: https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover 

Creating a reversed animation is kind of overkill to a simple problem. What you need is:

animation-direction: reverse
However, this won't work on its own because animation spec forgot to add a way to restart the animation, so here is how you do it with the help of JS

let item = document.querySelector('.item')

// play normal
item.addEventListener('mouseover', () => {
  item.classList.add('active')
})

// play in reverse
item.addEventListener('mouseout', () => {
  item.style.opacity = 0 // avoid showing the init style while switching the 'active' class

  item.classList.add('in-active')
  item.classList.remove('active')

  // force dom update
  setTimeout(() => {
    item.classList.add('active')
    item.style.opacity = ''
  }, 5)

  item.addEventListener('animationend', onanimationend)
})

function onanimationend() {
  item.classList.remove('active', 'in-active')
  item.removeEventListener('animationend', onanimationend)
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

div {
  background: black;
  padding: 1rem;
  display: inline-block;
}

.item {
  - because span cant be animated
  display: block;
  color: yellow;
  font-size: 2rem;
}

.item.active {
  animation: spin 1s forwards;
  animation-timing-function: ease-in-out;
}

.item.in-active {
  animation-direction: reverse;
}
<div>
  <span class="item">ABC</span>
</div>
*/