html, body {
  font-size: 18px;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Zen Antique', serif;
  font-size: 1em;
}

h1 {font-size: 4em}
a {text-decoration: none;}

.header-logo {
  height: 8.5em;
  width: 9em;
  background-image: url("logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8em;
  float: left;
}
.header-title {
  float: left;
  font-size: 6em;
  color: #1B263B;
}
.header-container {
  width: max-content;
  overflow: auto;
  display: flex;
  margin: auto;
  align-items: center;
}
.subtitle-border {
  border-top: solid #415A77;
  position: relative;
  top: 2em;
}
.header-subtitle {
  text-align: center;
  background-color: #415A77;
  width: max-content;
  padding: 1em 2em;
  border-radius: 20em;
  margin: auto;
  border: solid #fff;
  position: relative;
  color: #fff;
  font-weight: bold;
  max-width: 80vw;
}
.main-nav {
  max-width: 80%;
  margin: auto;
  transition: top 0.2s;
  background-color: #fff;
}
.main-nav.sticky {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #fff;
  max-width: 100%;
}
.main-nav.sticky.menu-hide {top: -6em;}
.main-nav.sticky.menu-show {top: 0;}
.main-nav ul {
  list-style: none;
  display: flex;
  text-align: center;
  margin: 0;
  padding: 0;
}
.main-nav li {
  width: 25%;
  border: solid #778DA9 thin;
  border-bottom: 0;
  border-right: 0;
}
.main-nav li:last-child {border-right: solid #778DA9 thin;}
.main-nav a {
  text-decoration: none;
  font-size: 1.5em;
  color: #415A77;
  font-weight: bold;
  padding: 1em 0;
  display: block;
  transition: color 0.2s;
}
.main-nav a:hover {color: #1B263B;}
.mobile-menu-button {
  display: none;
  text-align: right;
  padding: 1em;
  font-size: 1.5em;
  color: #415A77;
  transition: color 0.2s;
  width: 100%;
}
.mobile-menu-button:hover {
  color: #1B263B;
  cursor: pointer;
}
.mobile-nav {
  position: absolute;
  left: -100%;
  font-size: 1.1em;
  z-index: 999;
  background-color: #fff;
  min-width: 50vw;
  transition: all 0.2s;
}
.mobile-nav ul {
  margin: 0;
  padding: 0;
}
.mobile-nav li {
  padding: 0.5em 1em;
  border: solid thin #415A77;
  border-top: 0;
}
.mobile-nav a {
  color: #415A77;
  transition: color 0.2s;
  width: 100%;
  height: 100%;
  display: block;
  overflow: auto;
}
.mobile-nav a:hover {
  color: #1B263B;
}

.about-me {
  width: 100%;
  display: block;
  overflow: auto;
}
.work, .about-me {overflow: hidden;}
.about-me h1 {
  text-align: center;
  margin-top: 25vh;
  background-color: rgba(13,27,42, 0.3);
}
.about-me .about-me-scroll-text {
  text-align: center;
  font-size: 2em;
  background-color: rgba(13,27,42, 0.3);
}
.about-me .about-me-scroll-icon {
  text-align: center;
  transform: translate(0, 0) rotate(-90deg);
  animation: MoveUpDown 1s linear infinite;
  top: 0;
  font-size: 3em;
  position: relative;
}
@keyframes MoveUpDown {
  0%, 100% {
    transform: translate(0, 0) rotate(-90deg);
  }
  50% {
    transform: translate(0, 16px) rotate(-90deg);
  }
}
.about-me-text {
  width: calc(50% - 2em);
  float: left;
  background: #0D1B2A;
  color: #fff;
  padding: 0 1em;
}

.about-me-text p {
  font-size: 2em;
  margin: 80vh 0;
}

.about-image-container, .work-image-container {
  width: 50%;
  float: left;
  height: 100vh;
  position: absolute;
  right: 0;
}
.about-me-image, .work-image {
  width: 50vw;
  float: left;
  height: 100vh;
  background-color: #ccc;
  background-size: cover;
  background-position: top center;
  transition: all 0.5s;
}
.work-image.work-image-4 {background-position: center bottom;}
.about-me-image-fixed, .work-image-fixed {
  position: fixed !important;
  top: 0;
  right: 0;
}

.hide {opacity: 0;}

.about-me-image-1 {z-index: 2}
.about-me-image-2 {z-index: 1;}
.work-image-1 {z-index: 4;}
.work-image-2 {
  z-index: 3;
  background-position: right top;
}
.work-image-3 {z-index: 2;}
.work-image-4 {z-index: 1;}

.education {
  width: 100%;
  display: block;
  overflow: auto;
  background-color: #778DA9;
  position: relative;
  z-index: 3;
  min-height: 100vh;
}
.education-title {
    display: flex;
    align-items: center;
    width: max-content;
    text-align: center;
    align-content: center;
    margin: 0 auto;
    max-width: fit-content;
}
.education-provider {
  text-align: center;
  background-color: #415A77;
  padding: 1em 2em;
  border-radius: 20em;
  margin: 1em;
  border: solid #fff;
  position: relative;
  color: #fff;
  font-weight: bold;
}
.education-date {
  text-align: center;
  color: #0D1B2A;
  font-weight: bold;
}
.education-date {
  text-align: center;
  color: #0D1B2A;
  font-weight: bold;
  padding: 0 1em;
  background-color: #E0E1DD;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.education-date-border {
  border-bottom: solid #0D1B2A;
  position: relative;
  top: -0.75em;
}
.education-container {
  max-width: 90%;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.education-tile {
    float: left;
    max-width: calc(50% - 8em);
    width: 100%;
    margin: 2em;
    background-color: #E0E1DD;
    padding: 2em;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 1em #333;
    flex: 1 0 50%;
}
/*.education-logo {
  background-color: #ccc;
  height: 4em;
  width: 4em;
  margin: 0 1em 0 0;
  padding: 0;
  float: left;
  border-radius: 10em;
  background-size: cover;
  background-position: center;
  border: solid #778DA9;
  box-shadow: 3px 3px #0D1B2A, -3px -3px #0D1B2A, -3px 3px #0D1B2A, 3px -3px #0D1B2A, 0 -4px #0D1B2A, -4px 0px #0D1B2A, 4px 0px #0D1B2A, 0px 4px #0D1B2A;
  flex: 0 0 auto;
}*/

.education-logo {
  background-color: #ccc;
  height: 4em;
  width: 4em;
  margin: 0 1em 0 0;
  padding: 0;
  float: left;
  border-radius: 10em;
  background-repeat: no-repeat;
  border: solid #778DA9;
  box-shadow: 3px 3px #0D1B2A, -3px -3px #0D1B2A, -3px 3px #0D1B2A, 3px -3px #0D1B2A, 0 -4px #0D1B2A, -4px 0px #0D1B2A, 4px 0px #0D1B2A, 0px 4px #0D1B2A;
  flex: 0 0 auto;
  background-size: 39em;
}

/*.education-logo-uws { background-image: url(images/webp/logo-uws.webp)}
.education-logo-reid-kerr {background-image: url(images/webp/logo-reid-kerr.webp)}
.education-logo-kelvin {background-image: url(images/webp/logo-kelvin.webp)}
.education-logo-napier {background-image: url(images/webp/logo-napier.webp)}*/

.education-logo-uws {
  background-image: url(images/webp/sprite.webp);
  background-position: 0 0;
}
.education-logo-reid-kerr {
  background-image: url(images/webp/sprite.webp);
  background-position: -9em 0;
}
.education-logo-kelvin {
  background-image: url(images/webp/sprite.webp);
  background-position: -4.8em -0.1em;
  background-size: 40em;
}
.education-logo-napier {
  background-image: url(images/webp/sprite.webp);
  background-position: -13.5em 0;
}

/*.no-webp .education-logo-uws {background-image: url(images/logo-uws.jpg)}
.no-webp .education-logo-reid-kerr {background-image: url(images/logo-reid-kerr.jpg)}
.no-webp .education-logo-kelvin {background-image: url(images/logo-kelvin.jpeg)}
.no-webp .education-logo-napier {background-image: url(images/logo-napier.jpg)}*/

.no-webp .education-logo-uws { background-image: url(images/sprite.png)}
.no-webp .education-logo-reid-kerr {background-image: url(images/sprite.png)}
.no-webp .education-logo-kelvin {background-image: url(images/sprite.png)}
.no-webp .education-logo-napier {background-image: url(images/sprite.png)}

.education h1 {
  text-align: center;
  color: #E0E1DD;
  font-size: 4em;
}
.education-note {
  width: 100%;
  margin: 2em auto 4em auto;
  background-color: #fafafa;
  padding: 2em;
  border-radius: 1em;
  text-align: center;
  background-color: #E0E1DD;
  box-shadow: 0.5em 0.5em 1em #333;
  max-width: 50em;
}
.no-webp .education-note-image {background-image: url(images/sprite.png);}
.education-note-image {
  width: 100%;
  /*background-image: url(images/webp/g.webp);*/
  background-image: url(images/webp/sprite.webp);
  background-size: 65em;
  max-width: 280px;
  height: 2em;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: -29.6em 0;
}
.work h1 {
  text-align: center;
  margin-top: 3em;
}
.work-item {margin: 80vh 0;}
.job-logo {
  width: 10em;
  height: 10em;
  display: block;
  overflow: auto;
  margin: 0 auto;
  border: solid #778DA9;
  border-radius: 100em;
  box-shadow: 3px 3px #E0E1DD, -3px -3px #E0E1DD, -3px 3px #E0E1DD, 3px -3px #E0E1DD, 0 -4px #E0E1DD, -4px 0px #E0E1DD, 4px 0px #E0E1DD, 0px 4px #E0E1DD;
}
/*.job-logo-kibble {background-image: url("images/webp/logo-kibble.webp");}
.job-logo-odeon {background-image: url("images/webp/logo-odeon.webp");}
.no-webp .job-logo-kibble {background-image: url("images/logo-kibble.png");}
.no-webp .job-logo-odeon {background-image: url("images/logo-odeon.png");}*/

.job-logo-kibble {
  background-image: url("images/webp/sprite.webp");
  background-position: -192em -0.2em;
  background-size: 71em;
}
.job-logo-odeon {
  background-image: url("images/webp/sprite.webp");
  background-position: -203em -0.2em;
  background-size: 71em;
}

.no-webp .job-logo-kibble {background-image: url("images/sprite.png");}
.no-webp .job-logo-odeon {background-image: url("images/sprite.png");}

.work-item h2 {
  font-size: 3em;
  text-align: center;
}
.work-item h3 {font-size: 3em;}
.job-title {
  background-color: #778DA9;
  text-align: center;
  width: max-content;
  padding: 1em;
  border-radius: 2em;
  margin: auto;
  max-width: calc(100% - 2em);
}
.work-date {
  text-align: center;
}
.work-text {
  width: calc(50% - 2em);
  float: left;
  background: #0D1B2A;
  color: #fff;
  padding: 0 1em;
}
.work-text p, .work-text li {font-size: 2em;}
.work li {margin: 2em 0;}


.skills {
  width: 100%;
  display: block;
  overflow: auto;
  position: relative;
  z-index: 5;
}

.skills h1 {
  padding-top: 0;
  margin-top: 0;
}

.skill {
  background-color: #415A77;
  padding: 1em;
  border-radius: 10em;
  margin: 1em;
  float: left;
  list-style: none;
  color: #fff;
}

.skills-container {
  background-color: #1B263B;
  overflow: auto;
  text-align: center;
  color: #fff;
  padding: 10em;
  min-height: 100vh;
}

.hobbies {
    width: 100%;
    display: block;
    overflow: auto;
    background-color: #778DA9;
    padding: 10em 0;
    position: relative;
    z-index: 5;
}
.hobbies h1 {
    text-align: center;
    color: #E0E1DD;
    font-size: 4em;
    padding-top: 0;
    margin-top: 0;
}
.hobby {
    width: calc(33.3% - 2em);
    float: left;
    text-align: center;
    background: #ccc;
    height: 30em;
    margin: 1em;
    background-position: center;
    background-size: 100% auto;
    transition: background-size 0.2s;
}
.hobby:hover {
  cursor: pointer;
  background-size: 110% auto;
}
.hobby-label {
    background-color: rgba(13, 27, 42, 0.5);
    position: relative;
    top: 50%;
    color: #fff;
} 
  .no-webp .hobby.hobby-tech-things {background-image: url(images/tech.jpg);}
  .no-webp .hobby.hobby-arty-things {background-image: url(images/arty-stuff.jpg);}
  .no-webp .hobby.hobby-ukulele {background-image: url(images/ukulele.jpg);}

  .hobby.hobby-tech-things {background-image: url(images/webp/tech.webp);}
  .hobby.hobby-arty-things {background-image: url(images/webp/arty-stuff.webp);}
  .hobby.hobby-ukulele {
    background-image: url(images/webp/ukulele.webp);
    background-position: bottom;
  }

.popup-overlay {
  visibility: hidden;
  position: absolute;
  background: #ffffff;
  border: solid #415A77;
  width: 50%;
  left: 25%;
  bottom: 0;
}

.active.popup-overlay {
  visibility: visible;
  width: 50vw;
  height: 70vh;
  z-index: 999;
  position: fixed;
  top: 15vh;
  left: 25vw;
  display: flex;
  align-items: center;
}

.popup-content {
  visibility: hidden;
}

.active .popup-content {
  visibility: visible;
  padding: 2em;
}
.popup-content h2 {
    text-align: center;
    color: #415A77;
}
.close {
  background-color: #415A77;
  color: #fff;
  font-family: "Zen Antique";
  font-size: 1em;
  border: none;
  padding: 0.5em 1em;
  border-radius: 100em;
  margin: 0 auto;
  float: right;
}
.close:hover {cursor: pointer;}
.contact {
  text-align: center;
  color: #0D1B2A;
  position: relative;
  background-color: #fff;
  overflow: auto;
  z-index: 5;
  padding-bottom: 4em;
}
.cv-link {
  background-color: #0D1B2A;
  padding: 1em;
  border-radius: 10em;
  margin: 1em auto;
  border: solid #778DA9;
  color: #fff;
  display: block;
  overflow: auto;
  width: fit-content;
  transition: all 0.2s;
}
.cv-link:hover {
  background-color: #778DA9;
  color: #0D1B2A;
}
.footer {
  color: #fff;
  background-color: #0D1B2A;
  padding: 1em;
  overflow: auto;
  display: block;
  position: relative;
  z-index: 5;
}
.footer-title-container {
  display: flex;
  align-items: center;
  font-size: ;
}
.footer-title {
  font-size: 5em;
}
.footer-quote {
  font-size: 1.2em;
}
.footer-title-quote, .footer-socials {
  float: left;
  width: calc(50% - 2em);
}
.footer-socials {
  width: max-content;
  float: right;
  margin-right: 2em;
}
.social-text {
  padding: 0 0.5em;
  display: flex;
  align-items: center;
}
.social-link {
  display: flex;
  align-items: center;
  padding: 1em;
}
.social-link .fab  {font-size: 2em;}
.social-text span {padding: 0 0.5em;}

a .social-link, a .social-link:visited {
  text-decoration: none;
  color: #778DA9;
  transition: color 0.2s;
}
a .social-link:hover {color: #fff;}
.footer-logo {
  height: 8.5em;
  width: 9em;
  background-image: url("logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8em;
  float: left;
}

/* Desktop Images */
@media screen and (min-width: 900px) {
  .about-me-image-1 {background-image: url("images/webp/me.webp");}
  .about-me-image-2 {background-image: url("images/webp/design-materials.webp");}
  .work-image-1 {background-image: url("images/webp/work.webp");}
  .work-image-2 {background-image: url("images/webp/kibs.webp");}
  .work-image-3 {background-image: url("images/webp/green-pr-award.webp");}
  .work-image-4 {background-image: url("images/webp/cinema.webp");}
  
  .no-webp .about-me-image-1 {background-image: url("images/me.jpg");}
  .no-webp .about-me-image-2 {background-image: url("images/design-materials.jpg");}
  
  .no-webp .work-image-1 {background-image: url("images/work.jpg");}
  .no-webp .work-image-2 {background-image: url("images/kibs.jpg");}
  .no-webp .work-image-3 {background-image: url("images/green-pr-award.jpg");}
  .no-webp .work-image-4 {background-image: url("images/cinema.jpg");}
}

@media screen and (max-width: 1800px) {
  .hobby {height: 20em;}
}

@media screen and (max-width: 1250px) {
  html, body {
    font-size: 16px;
  }
  .skills-container {padding: 5em 1em;}
  .hobby {height: 12em;}
  .footer-title-quote, .footer-socials {
    float: left;
    width: calc(100% - 2em);
    clear: both;
    overflow: auto;
  }
  .footer-logo {
    height: 3.5em;
    width: 3.5em;
    background-size: 3em;
  }
  .footer-title {font-size: 2em;}
  .social-links {
    width: fit-content;
    margin: 0 auto;
  }
  .social-links a {float: left;}
}

@media screen and (max-width: 900px) {
   
  .about-me-image-1 {background-image: url("images/mob/webp/me.webp");}
  .about-me-image-2 {background-image: url("images/mob/webp/design-materials.webp");}
  .work-image-1 {background-image: url("images/mob/webp/work.webp");}
  .work-image-2 {background-image: url("images/mob/webp/kibs.webp");}
  .work-image-3 {background-image: url("images/mob/webp/green-pr-award.webp");}
  .work-image-4 {background-image: url("images/mob/webp/cinema.webp");}
  
  .no-webp .about-me-image-1 {background-image: url("images/mob/me.jpg");}
  .no-webp .about-me-image-2 {background-image: url("images/mob/design-materials.jpg");}
  
  .no-webp .work-image-1 {background-image: url("images/mob/work.jpg");}
  .no-webp .work-image-2 {background-image: url("images/mob/kibs.jpg");}
  .no-webp .work-image-3 {background-image: url("images/mob/green-pr-award.jpg");}
  .no-webp .work-image-4 {background-image: url("images/mob/cinema.jpg");}
  html, body {
    font-size: 14px;
  }
  .header-logo {
      height: 5em;
      width: 5em;
      background-size: 4em;
  }
  .header-title {font-size: 3em;}
  .main-nav {display: none;}
  .main-nav-placeholder {
    display: flex;
    align-items: center;
  }
  .mobile-menu-button {
    display: block;
    transition: top 0.2s;
  }
  .mobile-menu-button.menu-hide.sticky {top: -6em;}
 .mobile-menu-button.sticky {
    position: fixed;
    top: 0;
    z-index: 999;
    width: calc(100% - 2em);
    background-color: #fff;
}
  .mobile-nav.sticky {
    position: fixed;
    top: 4.5em;
  }
  .mobile-nav.mobile-menu-show {left: 0;}
  .about-me-text, .work-text {
    width: calc(100% - 2em);
    float: left;
    background: none;
    color: #fff;
    padding: 0 1em;
    position: relative;
    z-index: 10;
  }
  .work-text {background-color: rgba(13, 27, 42, 0.5);}
  .about-me-text p {
    font-size: 1.2em;
    margin: 80vh 0;
    background-color: #0D1B2A;
    padding: 5vw;
  }
  .work-text li {font-size: 1.2em;}
  .work-item h3 {font-size: 2em;}
  .about-image-container, .work-image-container {
     width: 100%;
  }
  .about-me-image, .work-image {
    width: 100%;
    background-color: #ccc;
    background-size: cover;
    background-position: center center;
    transition: all 0.5s;
  }
  .about-me-image-1, .work-image-1 {
    position: absolute;
    background-position: top center;
  }
  .work-image.work-image-2 {background-position: center right;}
  
  .education-tile {
    max-width: calc(100% - 4em);
    margin: 2em 0;
  }
  .education-text {font-size: 1.2em;}
 .education-note {
    max-width: calc(75vw);
    font-size: 1.2em;
  }
  .education-note-image {
    background-size: 71em;
    background-position: -32.5em 0;
  }
  .skills-container {padding: 5em 0;}
  .skill-list {
      padding: 0 0.5em;
      margin: 0;
  }
  .skill {margin: 0.5em}
  .hobby {
    height: 20em;
    width: calc(100% - 2em)
  }
  .active.popup-overlay {
    width: 85vw;
    left: 5vw;
  }
}



/** Font Awesome **/

.fa{
  font-family:"Font Awesome 6 Free";
  font-family:var(--fa-style-family,"Font Awesome 6 Free") ;
font-weight:900;
font-weight:var(--fa-style,900)
}

.fa,.fa-brands,.fa-duotone,.fa-light,.fa-regular,.fa-solid,.fa-thin,.fab,.fad,.fal,.far,.fas,.fat{-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
display:inline-block;
display:var(--fa-display,inline-block);
font-style:normal;
font-variant:normal;
line-height:1;
text-rendering:auto;
}

.fa-bars:before,.fa-navicon:before{content:"\f0c9"
}

@font-face{font-family:"Font Awesome 6 Brands";
font-style:normal;
font-weight:400;
font-display:block;
src:url(webfonts/fa-brands-400.woff2) format("woff2"),url(webfonts/fa-brands-400.ttf) format("truetype")
}

.fa-brands,.fab{font-family:"Font Awesome 6 Brands";
font-weight:400
}

.fa-instagram-square:before{content:"\e055"
}

.fa-linkedin:before{content:"\f08c"
}

.fa-twitter-square:before{content:"\f081"
}

@font-face{font-family:"Font Awesome 6 Free";
font-style:normal;
font-weight:900;
font-display:block;
src:url(webfonts/fa-solid-900.woff2) format("woff2"),url(webfonts/fa-solid-900.ttf) format("truetype")
}

.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"
}

.fa-solid,.fas{font-weight:900
}