/* Typography imported from Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Hepta+Slab|Staatliches&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap");
@import "bourbon";

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Styling Variables */
:root {
  --accent-color: #555;
  --body-typeface: "Nunito Sans", sans-serif;
  --main-heading: "Barlow Semi Condensed", sans-serif;
}

body {
  font-family: var(--body-typeface);
  color: rgb(221, 221, 221);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Making all images responsive */
img {
  max-width: 100%;
  height: auto;
  user-select: none;
}

/* Typography */

h1 {
  font-size: 4em;
  font-family: var(--main-heading);
  margin-bottom: 1rem;
  color: #111;
}

.hero-headline {
  color: white;
}

/* Hyperlink Styles */
a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: rgb(8, 189, 189);
}

.scroll-text {
  color: #14838a;
}

p {
  margin-bottom: 1em;
  color: rgb(53, 53, 53);
}

/* Work Page Layout */

.work-wrapper {
  flex: 1;
}

.portfolio {
  padding: 1rem;
}

li {
  list-style-type: none;
}

.hero-footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
}

.main-footer {
  height: 10vh;
  margin: 1rem 0 3rem 0;
  padding: 4rem 1rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

.footer-box p {
  margin-bottom: 0em;
}

.footer-box {
  margin: 1rem 0rem;
}

.main-footer .grow {
  transition: none;
  margin: 0 1rem;
}

.main-footer .grow:hover {
  transform: none;
  transform-origin: none;
}

.fa-lg {
  color: #111;
}

.fa-lg:hover {
  color: rgb(8, 189, 189);
}

.main-footer .mailto-message {
  top: 28px;
  left: 130px;
  transform: translate(-50%, -100%);
  position: absolute;
  display: none;
  width: auto;
  white-space: nowrap;
  font-size: 16px;
  background-color: black;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
}

.hero-header .hero-header-project {
  min-height: 10vh;
}

.hero-footer,
.hero-header,
.hero-header-project {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 1rem 2rem;
  text-align: center;
}

.hero {
  min-height: 100vh;
}

/* Hero top */

.branding-navigation {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: static;
  z-index: 1;
  margin: 0rem;
  filter: drop-shadow(0 0 0.3rem black);
}

.logo {
  width: 18rem;
  min-width: 15rem;
  margin: 20vh 0 3rem 0;
}

.icon {
  width: 4rem;
  min-width: 4rem;
}

.triangle {
  width: 0;
  height: 0;
  margin: 1rem;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgb(255, 255, 255);
}

.header-links {
  margin-top: 5vh;
  display: flex;
  min-width: 70vw;
  justify-content: space-between;
  flex-direction: row;
  font-size: 16pt;
}

.menu-item {
  padding: 0 1rem;
  align-items: center;
}

.award-link {
  color: rgb(0, 90, 94);
}

/* Hero bg */

.parallax.desktop {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image:
    url(./assets/header/staticcolour-tin-trinh--stars--parallax-image-illustration-hand.png),
    url(./assets/header/staticcolour-tin-trinh--stars--parallax-image-illustration-sparkle.png),
    url(./assets/header/staticcolour-tin-trinh--stars--parallax-image-illustration-figure.png),
    url(./assets/header/staticcolour-tin-trinh--stars--parallax-image-illustration-stars.png),
    url(./assets/header/staticcolour-tin-trinh--stars--parallax-image-illustration-background.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 95%, 85%, 80%, 110%, cover;
}

.parallax {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(./assets/header/staticcolour-tin-trinh--stars--parallax-image-illustration-mobile.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 1)
  );
  opacity: 0.5;
}

.footer-navigation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 30px;
}

/* Social media buttons */

.social-media-menu {
  display: flex;
  justify-content: center;
  margin: 0 0 2rem 2rem;
}

.grow {
  transition: all 0.05s;
  margin: 0 4rem 0rem 0rem;
}

.grow:hover {
  transform: scale(1.1);
  transform-origin: center;
}

.ds {
  filter: drop-shadow(0 0 0.3rem black);
}

.mailto-link {
  position: relative;
  padding: 8px 0;
}

.mailto-message {
  top: 20px;
  left: 150px;
  transform: translate(-50%, -100%);
  position: absolute;
  display: none;
  width: auto;
  white-space: nowrap;
  font-size: 16px;
  background-color: black;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
}

.mailto-link:hover .mailto-message,
.mailto-link:focus .mailto-message,
.mailto-link:focus-within .mailto-message {
  display: block;
}

/* Masonry grid */

.wrapper {
  margin: auto;
  padding: 0.25em;
  max-width: 90vw;
}

.masonry {
  column-gap: 1rem;
  column-fill: balance;
}

.text {
  color: white;
  font-size: 1.25em;
  padding: 0.5em;
}

/* Masonry item */
.masonry .brick {
  position: relative;
  margin-bottom: 1rem;
  display: inline-flex; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 3;
  }
}

.home-gallery {
  cursor: zoom-in;
  overflow: hidden;
}

.home-gallery img {
  transition: 0.2s ease-in-out;
}

.home-gallery img:hover {
  filter: grayscale(50%) brightness(0.75);
  transition: 0.2s ease-in-out;
}

/* The Modal (background) */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The Close Button */
.close {
  color: rgb(255, 255, 255);
  z-index: 2;
  position: absolute;
  top: 20px;
  right: 50px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
  height: 100%;
  width: 100%;
}

.modalimg {
  position: relative;
  object-fit: contain;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 100%;
  width: auto;
  padding: 15px 20px;
  margin-top: -50px;
  color: rgb(255, 255, 255);
  font-size: 30px;
  transition: 0.3s ease;
  /* border-radius: 50%; */
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 50%;
}

/* On hover, add a black background color with a little bit see-through */
/* .prev:hover,
.next:hover {
  background-color: rgba(255,255,255, 0.8);
} */

/* !!!!!!!!!!!!!!!!! Project Page */

/* project header */

.hero-header-project {
  background-color: #111;
}

.hero-header-project .branding-navigation {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: static;
  z-index: 1;
  margin: 1rem 0;
}

.hero-header-project .logo {
  width: 15rem;
  min-width: 13rem;
  margin: 2rem 0 1rem;
}

.hero-header-project .icon {
  width: 3rem;
  min-width: 3rem;
}

.hero-header-project .header-links {
  margin-top: 2vh;
  display: flex;
  min-width: 70vw;
  justify-content: space-between;
  flex-direction: row;
  font-size: 16pt;
}

.hero-header-project .menu-item {
  padding: 0 1rem;
  align-items: center;
}

/* project content */

.project-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  background: rgb(255, 255, 255);
  padding: 0rem;
  align-content: center;
}

.project-aside {
  width: 80vw;
  min-height: 30vh;
  position: relative;
  margin: auto;
  top: 0vh;
  color: white;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  justify-content: center;
}

.project-aside h1 {
  font-size: 3rem;
}

.project-aside p {
  padding: 0 0.5rem;
}

.project-navigation {
  display: flex;
  flex-direction: row;
  padding: 3rem 0 0 0;
  justify-content: space-between;
}

.project-desc {
  margin: auto;
}

.project-desc h1 {
  text-transform: uppercase;

  line-height: normal;
  margin: 0 0 2rem 0;
}

.arrow {
  padding: 0rem 1rem;
}

.project-details {
  width: 100%;
  min-height: 80vh;
  margin: auto;
  padding: 0;
}

.project-details img {
  display: block;
  width: 100%;
  margin: 1rem auto;
}

.extra-space {
  height: 1rem;
}

.extra-space-2 {
  height: 5rem;
}

.project-container {
  position: relative;
}

.project-image {
  display: block;
  width: 100%;
  height: auto;
}

.project-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.2s ease;
  background-color: rgba(0, 0, 0, 0.6);
}

.project-container:hover .project-overlay {
  opacity: 1;
}

.project-text {
  color: white;
  font-size: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

/*??????????? portfolio page*/

.page-title {
  position: relative;
  text-align: center;
  margin-bottom: 5rem;
}

.feedback-txt {
  position: relative;
  margin: auto;
  font-size: 12pt;
  color: #fff;
}

.feedback-btn {
  position: relative;
  display: flex;
  width: 150px;
  height: 40px;
  background-color: #009491;
  margin: 0 1rem 4rem auto;
}

.feedback-btn:before,
.feedback-btn:after {
  content: " ";
  position: absolute;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.feedback-btn:before {
  left: 100%;
  border-left: 20px solid #009491;
}

.projects-btn {
  position: relative;
  display: flex;
  width: 150px;
  height: 40px;
  background-color: #009491;
  margin: 0 auto 4rem 1rem;
}

.projects-btn:before,
.projects-btn:after {
  content: " ";
  position: absolute;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.projects-btn:after {
  right: 100%;
  border-right: 20px solid #009491;
}

.back-to-projects {
  position: relative;
  display: flex;
  width: 150px;
  height: 40px;
  background-color: #009491;
  margin: 0 auto 3rem 0;
}

.back-to-projects:before,
.back-to-projects:after {
  content: " ";
  position: absolute;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.back-to-projects:after {
  right: 100%;
  border-right: 20px solid #009491;
}

.back-to-projects-txt {
  position: relative;
  margin: 0.5rem auto;
  font-size: 12pt;
  color: #fff;
}

.projects {
  padding: 1rem;
  position: relative;
}

.projects img {
  transition: 0.2s ease-in-out;
}

.projects-box {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.projects-text:hover {
  opacity: 0.5;
  background-color: black;
}

.text {
  color: white;
  font-size: 1.25em;
  padding: 0.5em;
}

.projects .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1fr));
  grid-gap: 1rem;
  /* Magical, media-query-less responsiveness is achieved using the repeat() function and the auto placement keywords. To achieve wrapping, we can use the auto-fit. If you're using auto-fit, the content will stretch to fill the entire row width.  Specify a minimum width for the columns, using the minmax() function. The 1fr is what tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space.  */
}

hr {
  color: #c7c7c7;
  border: 1px solid;
}

/* @@@@@@@@@@@@@@@@@ About me */

.about {
  padding: 1rem;
  min-height: 85vh;
}

.about-me {
  padding: 1rem;
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 80vw;
  margin: 2rem auto;
}

.self-portrait {
  width: 80vw;
  margin: auto;
}

.self-portrait p {
  text-align: center;
  margin: 1rem;
}

.about-txt {
  width: 75vw;
  font-size: 14pt;
  line-height: 2rem;
  display: flex;
  flex-direction: column;
  margin: 5rem auto;
}

.page-not-found {
  background-color: rgb(255, 255, 255);
}

.error-page {
  margin: auto;
  text-align: center;
  padding: 2rem;
}

.error-page h1 {
  font-size: 86pt;
  font-weight: bold;
  color: #009491;
}

.error-page h2 {
  font-size: 20pt;
  color: rgb(10, 10, 10);
  margin-bottom: 1rem;
}

.error-page p {
  line-height: 1.25rem;
}

/* Large devices (ipad, 710px and up) */
@media only screen and (min-width: 710px) {
  .projects .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    grid-gap: 1rem;
    /* Magical, media-query-less responsiveness is achieved using the repeat() function and the auto placement keywords. To achieve wrapping, we can use the auto-fit. If you're using auto-fit, the content will stretch to fill the entire row width.  Specify a minimum width for the columns, using the minmax() function. The 1fr is what tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space.  */
  }

  .projects {
    padding: 3rem;
  }

  .feedback-txt {
    position: relative;
    margin: auto;

    color: #fff;
  }

  .feedback-btn {
    position: relative;
    display: flex;

    background-color: #009491;
    margin: 0 0 2rem auto;
  }

  .feedback-btn:before,
  .feedback-btn:after {
    content: " ";
    position: absolute;
  }

  .feedback-btn:before {
    left: 100%;
  }

  .projects-btn {
    position: relative;
    display: flex;

    background-color: #009491;
    margin: 0 auto 2rem 0;
  }

  .projects-btn:before,
  .projects-btn:after {
    content: " ";
    position: absolute;
  }

  .projects-btn:after {
    right: 100%;
  }

  /* @@@@@@@@@@@@@@@@@ About me */

  .about {
    padding: 1rem;
    min-height: 85vh;
  }

  .about-me {
    padding: 2rem;
  }

  .about-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 80vw;
    margin: 2rem auto;
  }

  .self-portrait {
    width: 60vw;
    margin: auto;
  }

  .self-portrait p {
    text-align: center;
    margin: 1rem;
  }

  .about-txt {
    width: 75vw;
    font-size: 14pt;
    line-height: 2rem;
    display: flex;
    flex-direction: column;
    margin: 5rem auto;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 105%;
    width: auto;
    padding: 20px 25px;
    margin-top: -50px;
    color: rgb(255, 255, 255);
    font-size: 30px;
    transition: 0.3s ease;
    border-radius: 50%;
    user-select: none;
    -webkit-user-select: none;
  }

  .triangle {
    display: none;
  }

  .portfolio {
    padding: 3rem;
  }

  .branding-navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: static;
    z-index: 1;
    margin: 1rem 0 0 0;
  }

  .logo {
    width: 15rem;
    min-width: 13rem;
    margin: 0.25rem 0 0 100px;
  }

  .icon {
    width: 3rem;
    min-width: 3rem;
    margin-right: auto;
  }

  .header-links {
    margin-left: auto;
    margin-top: 0vh;
    min-width: 0vw;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    font-size: 16pt;
    position: static;
  }

  .menu-item {
    justify-content: space-between;
    padding: 0 1rem;
    align-items: center;
    margin: 0 1rem;
  }

  .hero-header-project .branding-navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: static;
    z-index: 1;
    margin: 1rem 0 0 0;
  }

  .hero-header-project .logo {
    width: 15rem;
    min-width: 13rem;
    margin: 0.25rem 0 0 100px;
  }

  .hero-header-project .icon {
    width: 3rem;
    min-width: 3rem;
    margin-right: auto;
  }

  .hero-header-project .header-links {
    margin-left: auto;
    margin-top: 0vh;
    min-width: 0vw;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    font-size: 16pt;
    position: static;
  }

  .footer-navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 0;
  }

  .social-media-menu {
    display: flex;
    justify-content: center;
    margin: 0 0 2rem 2rem;
  }

  .parallax {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url(./assets/header/staticcolour-tin-trinh--stars--parallax-image-illustration-tablet.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  #color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1)
    );
    opacity: 0.6;
  }

  .main-footer {
    height: 5vh;
    margin: auto;
    padding: 0rem 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .footer-box p {
    margin-bottom: 0em;
  }

  .main-footer .grow {
    transition: none;
    margin: 0 2rem 0rem 0rem;
  }

  .main-footer .grow:hover {
    transform: none;
    transform-origin: none;
  }

  .fa-lg {
    color: #111;
  }

  .fa-lg:hover {
    color: rgb(8, 189, 189);
  }

  .main-footer .mailto-message {
    top: 28px;
    left: 130px;
    transform: translate(-50%, -100%);
    position: absolute;
    display: none;
    width: auto;
    white-space: nowrap;
    font-size: 16px;
    background-color: black;
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
  }

  .project-aside {
    padding: 1em 0;
  }

  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
    .back-to-projects-txt {
      position: relative;
      margin: 0.6rem auto;
      font-size: 14pt;
      color: #fff;
    }

    .back-to-projects {
      position: relative;
      display: flex;
      width: 200px;
      height: 50px;
      background-color: #009491;
      margin: 0 auto 3 0;
    }

    .back-to-projects:before,
    .back-to-projects:after {
      content: " ";
      position: absolute;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
    }

    .back-to-projects:after {
      right: 100%;
      border-right: 25px solid #009491;
    }

    .feedback-txt {
      position: relative;
      margin: auto;
      font-size: 14pt;
      color: #fff;
    }

    .feedback-btn {
      position: relative;
      display: flex;
      width: 200px;
      height: 50px;
      background-color: #009491;
      margin: 0 0 0 auto;
    }

    .feedback-btn:before,
    .feedback-btn:after {
      content: " ";
      position: absolute;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
    }

    .feedback-btn:before {
      left: 100%;
      border-left: 25px solid #009491;
    }

    .projects-btn:before,
    .projects-btn:after {
      content: " ";
      position: absolute;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
    }

    .projects-btn:after {
      right: 100%;
      border-right: 25px solid #009491;
    }

    .projects-btn {
      position: relative;
      display: flex;
      width: 200px;
      height: 50px;
      background-color: #009491;
      margin: 0 auto 0 0;
    }

    .about {
      padding: 1rem;
      min-height: 85vh;
    }

    .about-me {
      padding: 2rem;
    }

    .about-content {
      display: flex;
      flex-direction: row;
      width: 70vw;
      margin: 2rem auto;
    }

    .self-portrait {
      width: 20vw;
      min-width: 400px;
      margin: 2rem 1rem 0 auto;
    }

    .self-portrait p {
      text-align: center;
      margin: 1rem;
    }

    .about-txt {
      width: 25vw;
      font-size: 12pt;
      line-height: 2rem;
      display: flex;
      flex-direction: column;
      margin-right: auto;
      margin-left: 1rem;
      margin: 5rem auto 0 2rem;
    }

    .projects {
      padding: 5rem;
    }

    .portfolio {
      padding: 5rem;
    }

    .hero-footer,
    .hero-header,
    .hero-header-project {
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 2rem 4rem;
      text-align: center;
    }

    .branding-navigation {
      display: flex;
      justify-content: center;
      align-items: center;
      position: static;
      z-index: 1;
      margin: 1rem 0 0 0;
    }

    .logo {
      width: 18rem;
      margin-left: 160px;
    }

    .icon {
      width: 3rem;
      margin-right: auto;
    }

    .header-links {
      margin-left: auto;
      display: flex;
      flex-direction: row;
      font-size: 14pt;
    }

    .menu-item {
      justify-content: space-between;
      padding: 0 2rem;
      align-items: center;
    }

    /* Hero bg */

    .footer-navigation {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    /* Social media buttons */

    .social-media-menu {
      display: flex;
      justify-content: center;
      margin: 0 0 2rem 2rem;
    }

    .grow {
      transition: all 0.05s;
      margin: 0 4rem 0rem 0rem;
    }

    .grow:hover {
      transform: scale(1.1);
      transform-origin: center;
    }

    .mailto-link {
      position: relative;
      padding: 8px 0;
    }

    .mailto-message {
      top: 20px;
      left: 150px;
      transform: translate(-50%, -100%);
      position: absolute;
      display: none;
      width: auto;
      white-space: nowrap;
      font-size: 16px;
      background-color: black;
      color: white;
      padding: 2px 6px;
      border-radius: 2px;
    }

    .mailto-link:hover .mailto-message,
    .mailto-link:focus .mailto-message,
    .mailto-link:focus-within .mailto-message {
      display: block;
    }

    .project-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 0;
      background: rgb(255, 255, 255);
      padding: 1rem;
    }

    .project-aside {
      width: 25vw;
      height: 40vh;
      margin: 0;
      position: -webkit-sticky;
      position: sticky;
      top: 0vh;
      color: white;
      padding: 4em;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .project-navigation {
      display: flex;
      flex-direction: row;
      position: relative;
      bottom: 0;
      padding: 3rem 0 0 0;
    }

    .project-details {
      width: 72vw;
      min-height: 100vh;
      padding: 1em;
      margin: 0;
    }

    .project-details img {
      display: block;
      margin: 1rem auto;
    }

    .project-desc {
      margin: 0 0;
    }

    /* ddddd */
  }

  /* Extra large devices (large laptops and desktops, 1200px and up)  */
  @media only screen and (min-width: 1200px) {
    .branding-navigation {
      display: flex;
      justify-content: center;
      align-items: center;
      position: static;
      z-index: 1;
      margin: 1rem 0 0 0;
    }

    .menu-item {
      justify-content: space-between;
      padding: 0 2rem;
      align-items: center;
    }

    /*@@@@@@@ */

    .about {
      padding: 1rem;
      min-height: 85vh;
    }

    .about-me {
      padding: 2rem;
    }

    .about-content {
      display: flex;
      width: 70vw;
      margin: 2rem auto;
    }

    .self-portrait {
      width: 20vw;
      min-width: 400px;
      margin: 2rem 1rem 0 auto;
    }

    .self-portrait p {
      text-align: center;
      margin: 1rem;
    }

    .about-txt {
      width: 25vw;
      font-size: 14pt;
      line-height: 2rem;
      display: flex;
      flex-direction: column;
      margin-right: auto;
      margin-left: 1rem;
      margin: 2rem auto 0 2rem;
    }

    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 4rem;
      margin-top: -50px;
      font-size: 30px;
      transition: 0.3s ease;
      user-select: none;
      -webkit-user-select: none;
    }
  }

  /* for parallax other aspect ratios */

  /*(992px and up) */
  @media only screen and (min-width: 991px) {
    .parallax.desktop {
      max-height: 595px;
    }
  }
  /*(1200px and up) */
  @media only screen and (min-width: 1200px) {
    .parallax.desktop {
      max-height: 720px;
    }
  }
  /*(1600px and up) */
  @media only screen and (min-width: 1600px) {
    .parallax.desktop {
      max-height: 950px;
    }
  }
  /*(1980px and up) */
  @media only screen and (min-width: 1980px) {
    .parallax.desktop {
      max-height: 1226px;
    }
    .project-desc {
      font-size: 12.5pt;
      margin: 0 0;
    }
  }
  /*(2000px and up) */
  @media only screen and (min-width: 2000px) {
    .parallax.desktop {
      max-height: none;
    }
  }
}