/* COLORS */
/* VARIABLES */
/* BORDER */
/* DYNAMIC SPACING */
/* HEADER HEIGHT */
/* SECTION WIDTH */
/* ASSETS SIZE */
/* IMAGE SIZES */
/* Media Queries */
/* TYPOGRAPHY */
/* GLOBAL STYLING */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.1s ease;
}

html,
body {
  height: 100%;
  font-family: Raleway, sans-serif;
  color: var(--color--text--primary);
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}
@media (min-width: 768px) {
  html,
  body {
    height: auto;
  }
}

body {
  background-color: var(--color--background);
}

main {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 3.125rem;
  padding: 0 1.5625rem;
  max-width: 46.875rem;
  margin: auto;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 5.75rem);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  scroll-margin: 5.75rem 0;
}
section#home, section#project {
  scroll-snap-align: start;
}

.section__header {
  text-align: justify;
  font-family: "Oleo Script", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--color--text--primary);
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color--background);
  padding: 0.3125rem 0;
  width: 100%;
}

.badges {
  display: flex;
  gap: 0.3125rem;
}
.badges__stack {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  gap: 0.625rem;
  border-radius: 1.875rem;
  color: #0c0a09;
  background: rgb(208.2, 213.4, 223.8);
  text-align: justify;
  font-size: 1rem;
  font-weight: 400;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color--accents);
  text-decoration: none;
  font-size: 2rem;
  min-width: 3.125rem;
  min-height: 3.125rem;
  border-radius: 0.625rem;
  border: none;
}
.button.material-symbols-outlined {
  font-size: 2rem;
}
@media (min-width: 768px) {
  .button.material-symbols-outlined {
    font-size: 1.5rem;
  }
}
.button:hover {
  flex-shrink: 0;
  transform: scale(1.1);
  background: var(--color--highlights);
}
@media (min-width: 768px) {
  .button {
    color: var(--color--accents);
    width: 3.125rem;
    height: 3.125rem;
  }
  .button:hover {
    transform: scale(1.1);
    border-radius: 0.625rem;
  }
}

.technology {
  display: flex;
  flex-direction: row;
  padding: 0.625rem 0;
  gap: 1.25rem;
}
.technology__image {
  max-width: 1.5625rem;
}

/* HEADER STYLING */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color--background);
}
.header__navigation {
  display: none;
}
@media (min-width: 768px) {
  .header__navigation {
    display: flex;
    height: 5.75rem;
    justify-content: center;
    align-items: center;
    gap: 3.125rem;
  }
}
.header__branding {
  display: flex;
  padding: 1.5625rem;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color--background);
}
@media (min-width: 768px) {
  .header__branding {
    display: none;
  }
}
.header__title {
  text-align: justify;
  font-family: "Oleo Script", sans-serif;
  font-size: 3rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
  }
}

.footer {
  display: flex;
  justify-content: center;
  background-color: var(--color--background);
  padding: 1.5625rem;
}
.footer__text {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color--text--primary);
}

/* LANDING INTRODUCTION STYLING */
.landing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.125rem;
  flex: 1 0 0;
  align-self: stretch;
}
.landing__socials {
  display: flex;
  gap: 3.125rem;
}
.landing__content, .landing__description {
  display: flex;
  padding: 1.25rem;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  justify-content: space-evenly;
}
.landing__description {
  justify-content: center;
  gap: 1.25rem;
}
.landing__image {
  align-self: stretch;
}
@media (min-width: 768px) {
  .landing__image {
    padding: 0 7.8125rem;
  }
}
.landing__text--normal {
  align-self: stretch;
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .landing__text--normal {
    font-size: 2rem;
  }
}
.landing__text--bold {
  text-align: center;
  font-family: "Oleo Script", sans-serif;
  font-size: 2rem;
  font-weight: 400;
}
@media (min-width: 768px) {
  .landing__text--bold {
    font-size: 3rem;
  }
}

/* INTRODUCTION STYLING */
.introduction {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}
.introduction__content, .introduction__description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}
.introduction__description {
  display: inline;
  text-align: justify;
  font-size: 1rem;
  font-weight: 400;
  white-space: normal;
}
@media (min-width: 768px) {
  .introduction__content {
    flex-direction: row;
  }
}
.introduction__image {
  display: none;
}
@media (min-width: 768px) {
  .introduction__image {
    display: flex;
    max-height: 15rem;
  }
}

/* SKILLS STYLING */
.skills {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}
.skills__content, .skills__card, .skills__icon {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.skills__content {
  gap: 1.25rem;
}
.skills__card {
  padding: 0.625rem;
  align-items: flex-start;
  gap: 0.3125rem;
  border-radius: 0.625rem;
  background: var(--color--highlights);
}
.skills__icon {
  gap: 0.3125rem;
}
.skills__title, .skills__description {
  align-self: stretch;
  font-size: 1rem;
  line-height: normal;
}
.skills__title {
  font-weight: 700;
}
.skills__description {
  color: var(--color--text--secondary);
  font-weight: 400;
}

/* WORK HISTORY STYLING */
.work-history {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}
.work-history__content {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.work-history__item, .work-history__sub-job {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}
.work-history__logo, .work-history__sub-job-logo {
  display: flex;
  align-items: center;
  width: 3.125rem;
  height: 3.125rem;
}
.work-history__sub-jobs {
  display: none;
}
@media (min-width: 768px) {
  .work-history__sub-jobs {
    display: flex;
    gap: 1.25rem;
    min-height: 0;
    padding: 0.625rem 0;
  }
}
.work-history__sub-jobs-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1 0 0;
}
.work-history__title, .work-history__sub-job-title {
  align-self: stretch;
  font-size: 1rem;
  font-weight: 700;
}
.work-history__period, .work-history__sub-job-period {
  color: var(--color--text--secondary);
  font-size: 1rem;
  font-weight: 400;
}
.work-history__description {
  text-align: justify;
  font-size: 1rem;
  font-weight: 400;
  max-height: 5rem;
  overflow: hidden;
  position: relative;
  /* Fade effect */
}
.work-history__description:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: linear-gradient(to top, var(--color--background), rgba(255, 255, 255, 0));
}
@media (min-width: 768px) {
  .work-history__description {
    max-height: none;
    overflow: visible;
  }
  .work-history__description:after {
    display: none;
  }
}
.work-history__toggle {
  display: none;
}
.work-history__toggle-label {
  display: flex;
  padding: 0.3125rem 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.875rem;
  color: #0c0a09;
  background: rgb(208.2, 213.4, 223.8);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  margin-top: 0.3125rem;
}
.work-history__toggle-label:before {
  content: "Read More";
}
.work-history__toggle-label:hover {
  background-color: rgb(208.2, 213.4, 223.8);
}
.work-history__toggle-label:active {
  transform: scale(0.95);
}
@media (min-width: 768px) {
  .work-history__toggle-label {
    display: none;
  }
}
.work-history__toggle:checked ~ .work-history__description {
  max-height: none;
}
.work-history__toggle:checked ~ .work-history__description:after {
  display: none;
}
.work-history__toggle:checked ~ .work-history__toggle-label:before {
  content: "Read Less";
}

/* PROJECTS STYLING */
.project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
}
.project__badges {
  margin-top: auto;
}
.project__content, .project__thumbnail {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.project__item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.625rem;
  border-radius: 0.625rem;
}
@media (min-width: 768px) {
  .project__item {
    flex-direction: row;
  }
}
@media (min-width: 1024px) {
  .project__item {
    filter: grayscale(100%);
  }
  .project__item:hover {
    background-color: var(--color--highlights);
    filter: grayscale(0%);
  }
}
.project__thumbnail {
  max-width: 100%;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .project__thumbnail {
    max-width: 40%;
  }
}
.project__title, .project__description {
  align-self: stretch;
  font-size: 1rem;
}
.project__title {
  font-weight: 700;
}
.project__description {
  text-align: justify;
  font-weight: 400;
}

.toggle-more {
  display: none;
}

/* Initially hide more projects */
.more-projects {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  flex-shrink: 0;
  align-self: stretch;
}

.toggle-more:checked ~ .more-projects {
  display: flex;
}

.toggle-label {
  display: flex;
  padding: 0.3125rem 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.875rem;
  background: rgb(208.2, 213.4, 223.8);
  text-align: justify;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  margin-top: 0.3125rem;
  color: #0c0a09;
}
.toggle-label:hover {
  background-color: rgb(179.4, 187.8, 204.6);
}
.toggle-label:before {
  content: "Show More";
}
.toggle-label:active {
  transform: scale(0.95);
}

.toggle-more:checked ~ .toggle-label:before {
  content: "Show Less";
}

:root {
  --color--background: #fafaf9;
  --color--highlights: #edeff3;
  --color--accents: #878891;
  --color--text--primary: #0c0a09;
  --color--text--secondary: #818283;
}

body.dark-theme {
  --color--background: #1d1d1d;
  --color--highlights: #343434;
  --color--accents: #878891;
  --color--text--primary: #a9a9a9;
  --color--text--secondary: #818283;
}/*# sourceMappingURL=style.css.map */