/* Add the Google Fonts you want, remove the ones you don't.

███████  ██████  ███    ██ ████████ ███████
██      ██    ██ ████   ██    ██    ██
█████   ██    ██ ██ ██  ██    ██    ███████
██      ██    ██ ██  ██ ██    ██         ██
██       ██████  ██   ████    ██    ███████

*/

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
@import url("make-something-fly.css");
@import url("scroll-to-top.css");
/*

X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap

███    ███  ██████  ██████  ██ ██      ███████     ███████ ██ ██████  ███████ ████████
████  ████ ██    ██ ██   ██ ██ ██      ██          ██      ██ ██   ██ ██         ██
██ ████ ██ ██    ██ ██████  ██ ██      █████       █████   ██ ██████  ███████    ██
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██      ██ ██   ██      ██    ██
██      ██  ██████  ██████  ██ ███████ ███████     ██      ██ ██   ██ ███████    ██

*/

/* Add Border Box and Smooth Scroll */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  cursor: url("pencil-cursor.png"), auto !important;
}

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

/* Use variable for to easily change your theme's colour scheme and typography.

██    ██  █████  ██████  ██  █████  ██████  ██      ███████ ███████
██    ██ ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██      ██
██    ██ ███████ ██████  ██ ███████ ██████  ██      █████   ███████
 ██  ██  ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██           ██
  ████   ██   ██ ██   ██ ██ ██   ██ ██████  ███████ ███████ ███████

*/

:root {
  --primary-text-color: black;
  --accent-color: #555;
  --hyperlink-color: black;
  --hyperlink-alternate-color: rgb(255, 255, 255);
  --overlay-color: #E4F57C;
  --hover-color: #0C5F70;
  --body-typeface: "Rethink Sans", sans-serif;
  --heading-typeface: "Rethink Sans", sans-serif;
  --background-color: #FFFAF6;
  --alt-background-color: #FFF5ED;
  --text-selection-background-color: #FFF;
  --base-color: #e4f57c;
  --btn-color: #10ADCD;
  --color-1: #ff0b71;
  --color-2: #6197d7;
  --color-3: #92d0b6;
  --color-4: #a8cc15;
  --color-5: #fe36ea;
  --color-6: #ffcd1e;
  --color-7: #4a28d2;
  --color-8: #fa1d1d;
  --color-9: #64e8a1;
}

body {
  font-family: var(--body-typeface);
  font-weight: 400;
  color: var(--primary-text-color);
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 300px;
}

::selection {
  background: #E4F57C;
}

/* Making all images responsive */
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  /* Removes the gap/space in inline elements for text descenders. */
  object-fit: contain;
  /* This is optional. Also try cover or leave out entirely. */
}

svg {
  max-width: 100%;
}


/* Global & Mobile Typography

████████ ██    ██ ██████   ██████   ██████  ██████   █████  ██████  ██   ██ ██    ██
   ██     ██  ██  ██   ██ ██    ██ ██       ██   ██ ██   ██ ██   ██ ██   ██  ██  ██
   ██      ████   ██████  ██    ██ ██   ███ ██████  ███████ ██████  ███████   ████
   ██       ██    ██      ██    ██ ██    ██ ██   ██ ██   ██ ██      ██   ██    ██
   ██       ██    ██       ██████   ██████  ██   ██ ██   ██ ██      ██   ██    ██

*/

h1 {
  font-size: 2.8rem;
  font-family: var(--heading-typeface);
  font-weight: 400;
  line-height: 110%;
}

h2 {
  font-size: 2.25rem;
  font-family: var(--heading-typeface);
  font-weight: 500;
}

h3 {
  font-family: var(--heading-typeface);
  font-size: 2rem;
  font-weight: 400;
  line-height: 110%;
}

h4 {
  font-family: var(--heading-typeface);
  font-weight: 500;
  font-size: 1.2rem;
  text-transform: uppercase;
}

h5 {
  font-family: var(--heading-typeface);
  font-weight: 600;
  font-size: 1.2rem;
}


p {
  font-size: 1.2rem;
  line-height: 1.3;
}

/* Hyperlink Styles */
a {
  text-decoration: none;
  color: var(--hyperlink-color);
}

*/ .navigation-arrow {
  color: var(--alt-background-color);
}

.navigation-arrow:link {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  color: transparent;
}

.navigation-arrow:active,
.navigation-arrow:hover {
  color: var(--hover-color);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: transparent;
}

.custom-navigation {
  color: black;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

.custom-navigation:hover {
  background: url(heading-background.svg);
  background-size: 15%;
  background-repeat: no-repeat;
  background-position: center center;
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

/* Color Styles */

.color-1 {
  color: var(--color-1);
}

.color-2 {
  color: var(--color-2);
}

.color-3 {
  color: var(--color-3);
}

.color-4 {
  color: var(--color-4);
}

.color-5 {
  color: var(--color-5);
}

.color-6 {
  color: var(--color-6);
}

.color-7 {
  color: var(--color-7);
}

.color-8 {
  color: var(--color-8);
}

.color-9 {
  color: var(--color-9);
}

/* Work Page Layout

██     ██  ██████  ██████  ██   ██     ██████   █████   ██████  ███████
██     ██ ██    ██ ██   ██ ██  ██      ██   ██ ██   ██ ██       ██
██  █  ██ ██    ██ ██████  █████       ██████  ███████ ██   ███ █████
██ ███ ██ ██    ██ ██   ██ ██  ██      ██      ██   ██ ██    ██ ██
 ███ ███   ██████  ██   ██ ██   ██     ██      ██   ██  ██████  ███████

*/

.work-wrapper {
  flex: 1;
}

.intro {
  background-color: var(--alt-background-color);
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.intro-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
  text-align: left;
}

.intro-flex-container div {
  flex: 1;
  background-color: var(--background-color);
  margin: 0 1rem;
  padding: 2rem;
  border-radius: 2rem;
}

#intro-star {
  position: relative;
  top: 1.5rem;
  width: 3.5rem;
}

/* Define the spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.intro-box-1:active #intro-star,
.intro-box-1:hover #intro-star {
  animation: spin 3s linear infinite;
  -webkit-animation: spin 3s linear infinite;
}

/* Padding around work grid and project page */
.portfolio,
.project-wrapper {
  margin: 1rem 0.5rem;
  padding: 0.5rem;
  text-align: center;
}

/* Defining the work page grid */
.grid {
  display: flex;
  gap: 4rem 1rem;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: 2rem auto;
}

/* 1 column on mobile resolutions */
.grid>* {
  flex: 1 100%;
}

.project-preview-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  /* Required to contain overlay size */
}

.overlay {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.75s ease;
  -webkit-transition: 0.75s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.clipped-1 .solid {
  background-color: var(--color-5);
}

.clipped-2 .solid {
  background-color: var(--base-color);
}

.clipped-3 .solid {
  background-color: var(--color-3);
}

.clipped-4 .solid {
  background-color: var(--hover-color);
}

.clipped-5 .solid {
  background-color: var(--color-6);
}

.clipped-6 .solid {
  background-color: var(--color-2);
}

.clipped-1:hover .solid,
.clipped-2:hover .solid,
.clipped-3:hover .solid,
.clipped-4:hover .solid,
.clipped-5:hover .solid,
.clipped-6:hover .solid {
  opacity: 0.9;
}

.svg-shape {
  width: 0;
  height: 0;
}

.project-name-preview {
  text-align: center;
  margin: 1rem auto;
}

.view-work-btn {
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: space-between;
  width: 10.5rem;
  background-color: var(--btn-color);
  color: var(--alt-background-color);
  padding: 0 1rem;
  border-radius: 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

.view-work-btn:active,
.view-work-btn:hover {
  width: 11rem;
}

.clipped-1,
.clipped-2,
.clipped-3,
.clipped-4,
.clipped-5,
.clipped-6 {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
}

.overlay-wrapper-1 {
  background: url(../assets/thumbnails/schollar-thumbnail.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  clip-path: url(#thickhourglass);
}

.overlay-wrapper-2 {
  background: url(../assets/thumbnails/hale-packaging-thumbnail.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  clip-path: url(#pacmanghost);
}

.overlay-wrapper-3 {
  background: url(../assets/thumbnails/amirira-and-ena-illustration-thumbnail.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  clip-path: url(#upsidedownnarch);
}

.overlay-wrapper-4 {
  background: url(../assets/thumbnails/nearme-thumbnail.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  clip-path: url(#arrowshape);
}

.overlay-wrapper-5 {
  background: url(../assets/thumbnails/avant-garbage-thumbnail.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  clip-path: url(#leftscallopedsquare);
}

.overlay-wrapper-6 {
  background: url(../assets/thumbnails/himo-web-design-thumbnail.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  clip-path: url(#roundedsquare);
}

/* Holding Page Styles */

.holding-page-text {
  text-align: center;
  padding: 10% 15% 0 15%;
}

/* Header & Navigation

██   ██ ███████  █████  ██████
██   ██ ██      ██   ██ ██   ██
███████ █████   ███████ ██    ██
██   ██ ██      ██   ██ ██   ██
██   ██ ███████ ██   ██ ██████

*/

.branding-navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0rem 1rem 0rem 1rem;
  align-items: center;
}

header {
  position: sticky;
  top: 0px;
  background-color: var(--background-color);
  z-index: 1;
  padding-bottom: 1rem;
}

.header-flex-container {
  height: 5rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  gap: 1rem;
}

.logo-link {
  width: 4rem;
}

#logo-star {
  display: none;
  position: absolute;
  top: 2.5rem;
  left: 5rem;
  height: 0;
  width: 0;
  z-index: -1;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  overflow: visible;
}

/* .logo:active #logo-star {
  top: -0.5rem;
  left: 0;
  height: 6rem;
  width: 6rem;
} */

.logo-name {
  font-size: 1.1rem;
}

.nav-links {
  width: 100vw;
  background-color: var(--alt-background-color);
  overflow: hidden;
  transition: height 1s;
  -webkit-transition: height 1s;
}

.menu-open {
  height: 100vh;
}

.menu-closed {
  height: 0;
}

.nav-item {
  color: black;
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 500;
  padding: 2rem;
  background-image: url("/assets/svg/star-5.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0%;
  transition: background-size 0.5s;
  -webkit-transition: background-size 0.5s;
}

.nav-item:active {
  text-decoration: underline;
  background-size: 40%;
}

.contact-btn {
  background-color: var(--btn-color);
  color: var(--alt-background-color);
  padding: 0.5rem 1rem;
  margin: auto;
  width: 13rem;
  border-radius: 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

.contact-btn:active,
.contact-btn:hover {
  width: 13.5rem;
}

.nav-container .contact-btn {
  background-color: var(--btn-color);
  color: var(--alt-background-color);
  width: 14rem;
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

.nav-container .contact-btn:active {
  width: 14.5rem;
}

.right-arrow {
  font-size: 2.5rem;
}

.nav-container .contact-btn .right-arrow {
  font-size: 2.75rem;
}

#hmbgr-menu {
  position: absolute;
  top: 2.25rem;
  right: 2rem;
  font-size: 1.5rem;
}


/* Global Footer

███████  ██████   ██████  ████████ ███████ ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
█████   ██    ██ ██    ██    ██    █████   ██████
██      ██    ██ ██    ██    ██    ██      ██   ██
██       ██████   ██████     ██    ███████ ██   ██

*/

.footer-bar-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  text-align: center;
  padding: 4rem 3rem;
  background-color: var(--base-color);
  margin: 1rem 0 3rem 0;
}

.footer-bar-1 h1 {
  font-size: 3rem;
}

.footer-bar-1 .contact-btn {
  padding: 0.5rem;
  width: 50vw;
  min-width: 13rem;
  font-size: 1.5rem;
  border-radius: 3rem;
  justify-content: space-around;
}

.footer-bar-1 .contact-btn:active {
  width: 60vw;
  min-width: 13.5rem;
}

.footer-bar-1 .contact-btn .right-arrow {
  font-size: 2.5rem;
}

.footer-bar-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 2rem 2rem;
  background-color: var(--alt-background-color);
  gap: 1rem;
  border-radius: 1rem;
  margin: 0.5rem 0.5rem 2rem 0.5rem;
}

.footer-bar-2 .logo-link {
  width: 5rem;
}

.footer-bar-2 .logo-name {
  font-size: 1.3rem;
}

.socials-list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 1rem;
}

.social-item {
  width: 3rem;
}

.svg-social {
  width: 2rem;
}

.svg-mail {
  width: 2.5rem;
}

.svg-linkedin {
  position: relative;
  top: -0.1rem;
}

.copyright {
  text-align: center;
  font-family: var(--heading-typeface);
  margin: 2rem auto;
  font-size: 1rem;
}

.copyright:active,
.copyright:hover {
  text-decoration: underline;
}

/* Project Page

██████  ██████   ██████       ██ ███████  ██████ ████████     ██████   █████   ██████  ███████
██   ██ ██   ██ ██    ██      ██ ██      ██         ██        ██   ██ ██   ██ ██       ██
██████  ██████  ██    ██      ██ █████   ██         ██        ██████  ███████ ██   ███ █████
██      ██   ██ ██    ██ ██   ██ ██      ██         ██        ██      ██   ██ ██    ██ ██
██      ██   ██  ██████   █████  ███████  ██████    ██        ██      ██   ██  ██████  ███████

*/

.project-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* .project-aside {} */

/* .project-navigation {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: flex-end;
} */

/* .arrow {} */

.chevron {
  font-size: 3rem;
}

.project-image {
  font-size: 12rem;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

/* Main Project Image Area */

.project-info {
  width: 100%;
}

.project-title {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.project-description {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.project-navigation {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.project-details {
  width: 100%;
}

/*
=== ABOUT page ===
*/

.about-bio-section {
  display: flex;
  flex-direction: column;
  background-color: var(--alt-background-color);
  padding: 3rem;
  margin: 1rem 2rem;
  border-radius: 2rem;
  gap: 2rem;
}

.about-bio-section h3,
.about-experience-card h5 {
  font-style: italic;
}

.about-experience-section {
  display: flex;
  flex-direction: column;
}

.about-experience-card {
  display: flex;
  flex-direction: column;
  background-color: var(--alt-background-color);
  padding: 3rem;
  margin: 1rem 2rem;
  border-radius: 2rem;
  gap: 1.5rem;
}

.about-experience-card-stamps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 1.5rem;
}

.about-image {
  max-width: 13rem;
}

.svg-star-blue {
  position: relative;
  top: 0.35rem;
}

.exp-icon {
  position: relative;
  top: -0.2rem;
  width: 1.5rem;
}

/* Playground 


      :::::::::  :::            :::   :::   :::  ::::::::  :::::::::   ::::::::  :::    ::: ::::    ::: ::::::::: 
     :+:    :+: :+:          :+: :+: :+:   :+: :+:    :+: :+:    :+: :+:    :+: :+:    :+: :+:+:   :+: :+:    :+: 
    +:+    +:+ +:+         +:+   +:+ +:+ +:+  +:+        +:+    +:+ +:+    +:+ +:+    +:+ :+:+:+  +:+ +:+    +:+  
   +#++:++#+  +#+        +#++:++#++: +#++:   :#:        +#++:++#:  +#+    +:+ +#+    +:+ +#+ +:+ +#+ +#+    +:+   
  +#+        +#+        +#+     +#+  +#+    +#+   +#+# +#+    +#+ +#+    +#+ +#+    +#+ +#+  +#+#+# +#+    +#+    
 #+#        #+#        #+#     #+#  #+#    #+#    #+# #+#    #+# #+#    #+# #+#    #+# #+#   #+#+# #+#    #+#     
###        ########## ###     ###  ###     ########  ###    ###  ########   ########  ###    #### #########       


*/

.playground-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.draggable {
  position: absolute;
  width: 150px;
  cursor: grab;
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
}

.lightbox .caption {
  color: white;
  margin-top: 30px;
  text-align: center;
}

/*

 ██████  ███    ███ ███████ ██████  ██  █████
██    ██ ████  ████ ██      ██   ██ ██ ██   ██
██ ██ ██ ██ ████ ██ █████   ██   ██ ██ ███████
██ ██ ██ ██  ██  ██ ██      ██   ██ ██ ██   ██
 █ ████  ██      ██ ███████ ██████  ██ ██   ██


*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* body {
  } */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* body {
  } */

  h3 {
    font-size: 1.5rem;
  }

  .project-name-preview {
    font-size: 1.5rem;
  }

  .intro {
    padding-top: 3rem;
  }

  .intro-flex-container {
    flex-direction: row;
  }

  #intro-star {
    width: 4rem;
    top: 0.5rem;
  }

  .intro-flex-container div {
    border-radius: 3rem;
  }

  .nav-item:active {
    background-size: 25%;
  }
 
  /* 3 columns on tablet & desktop resolutions */
  .grid>* {
    flex: 1 30%;
    max-width: 30%;
  }

  .footer-bar-1 {
    border-radius: 1rem;
  }

  .footer-bar-1 h1 {
    font-size: 2.5rem;
  }

  .footer-bar-1 .contact-btn {
    padding: 0.5rem 1rem;
    width: 13rem;
  }

  .footer-bar-1 .contact-btn:active,
  .footer-bar-1 .contact-btn:hover {
    width: 13.5rem;
  }

  .footer-bar-1 .contact-btn .right-arrow {
    font-size: 2.5rem;
  }

  .footer-bar-1,
  .footer-bar-2 {
    flex-direction: row;
    margin: 0.5rem 3rem 2rem 3rem;
    padding: 3rem 2rem;
  }

  .footer-bar-2 {
    justify-content: space-between;
    align-items: center;
  }

  .footer-bar-2 .logo {
    padding: 0;
  }

  .about-experience-section {
    flex-direction: row;
    margin: 0 1rem;
    gap: 1rem;
  }

  .about-experience-card {
    margin: 1rem;
    flex: 1;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* body {
  } */

  .work-wrapper {
    width: 100vw;
    max-width: 2000px;
    margin: auto;
  }

  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 2.75rem;
  }

  h3 {
    font-size: 2.5rem;
  }

  span b {
    font-size: 1rem;
  }

  .header-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
  }

  .logo {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 16rem;
    padding-left: 2rem;
  }

  .logo-link {
    width: 5rem;
  }

  #logo-star {
    display: inline;
  }

  .logo:hover #logo-star {
    top: -1.25rem;
    left: 0.75rem;
    height: 8rem;
    width: 8rem;
  }

  .logo-name {
    font-size: 1.25rem;
  }

  .nav-links {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 5rem;
    width: 25rem;
    margin: auto 3rem;
    font-weight: 600;
    background-color: var(--background-color);
  }

  .nav-item {
    color: #000;
    text-transform: capitalize;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .nav-item:hover {
    text-decoration: underline;
    background-size: 75%;
  }

  .nav-item:active {
    background-size: 75%;
  }

  .nav-container .contact-btn {
    background-color: var(--base-color);
    color: black;
    width: 13rem;
    font-size: 1.5rem;
  }

  .nav-container .contact-btn .right-arrow {
    font-size: 2.5rem;
  }

  .nav-container .contact-btn:hover {
    width: 13.5rem;
  }

  #hmbgr-menu {
    display: none;
  }

  .intro {
    padding-top: 5rem;
  }

  #intro-star {
    width: 5rem;
    top: 1.25rem;
  }

  .intro-flex-container div {
    padding: 4rem 5rem 5rem 5rem;
    border-radius: 6rem;
  }

  .work-page-grid-item {
    margin: 1rem;
  }

  .project-name-preview {
    font-size: 2rem;
  }

  header,
  footer {
    width: 100vw;
    max-width: 2000px;
    margin: auto;
  }

  .footer-bar-1,
  .footer-bar-2 {
    margin: 0.5rem 3rem 2rem 3rem;
    padding: 3rem 2rem;
  }

  .footer-bar-2 .logo {
    width: 13rem;
  }

  .socials-list {
    gap: 1rem;
  }

  /* Padding around work grid and project page */
  .portfolio,
  .project-wrapper {
    padding: 2rem;
  }

  .project-aside {
    margin-bottom: 5rem;
  }

  .project-navigation {
    position: absolute;
    top: 11rem;
    right: 2rem;
  }

  .chevron {
    font-size: 5rem;
  }

  .project-title {
    width: 80%;
    padding: auto 0;
    margin: auto;
  }

  .project-description {
    width: 70%;
    padding: auto 0;
    margin: 1rem auto;
  }

  .project-details {
    width: 100%;
  }

  .project-image {
    min-height: 100vh;
    padding: 0.5rem;
  }

  .about-main {
    width: 90vw;
    max-width: 1200px;
    margin: auto;
  }

  .about-experience-card-stamps {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}