/* FONTS */
@font-face {
  font-family: "Alegreya SC";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/alegreyasc-bold-webfont.woff2") format("woff2"),
    url("../fonts/alegreyasc-bold-webfont.woff") format("woff");
}
@font-face {
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"),
    url("../fonts/sourcesanspro-regular-webfont.woff") format("woff");
}
@font-face {
  font-family: "Source Sans Pro";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/sourcesanspro-semibold-webfont.woff2") format("woff2"),
    url("../fonts/sourcesanspro-semibold-webfont.woff") format("woff");
}
@font-face {
  font-family: "Source Sans Pro";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sourcesanspro-bold-webfont.woff2") format("woff2"),
    url("../fonts/sourcesanspro-bold-webfont.woff") format("woff");
}

/* ROOT */
:root {
  --clr-white: hsl(0 0% 100%);
  --clr-neutral-100: hsl(0 0% 95%);
  --clr-neutral-200: hsl(0 0% 82.5%);
  --clr-neutral-300: hsl(0 0% 70%);
  --clr-neutral-400: hsl(0 0% 60%);
  --clr-neutral-500: hsl(0 0% 50%);
  --clr-neutral-600: hsl(0 0% 40%);
  --clr-neutral-700: hsl(0 0% 30%);
  --clr-neutral-800: hsl(0 0% 17.5%);
  --clr-neutral-900: hsl(0 0% 7.5%);
  --clr-accent-100: hsl(24 75% 95%);
  --clr-accent-200: hsl(24 75% 82.5%);
  --clr-accent-300: hsl(24 75% 70%);
  --clr-accent-400: hsl(24 75% 60%);
  --clr-accent-500: hsl(24 75% 50%);
  --clr-accent-600: hsl(24 75% 40%);
  --clr-accent-700: hsl(24 75% 30%);
  --clr-accent-800: hsl(24 75% 17.5%);
  --clr-accent-900: hsl(24 75% 7.5%);
  --clr-primary-100: hsl(216 75% 95%);
  --clr-primary-200: hsl(216 75% 82.5%);
  --clr-primary-300: hsl(216 75% 70%);
  --clr-primary-400: hsl(216 75% 60%);
  --clr-primary-500: hsl(216 75% 50%);
  --clr-primary-600: hsl(216 75% 40%);
  --clr-primary-700: hsl(216 75% 30%);
  --clr-primary-800: hsl(216 75% 17.5%);
  --clr-primary-900: hsl(216 75% 7.5%);

  --ff-sans: "Source Sans Pro", sans-serif;
  --ff-serif: "Alegreya SC", serif;

  --fs-900: 2.875rem;
  --fs-800: 2.0625rem;
  --fs-700: 1.75rem;
  --fs-650: 1.5rem;
  --fs-600: 1.125rem;
  --fs-500: 1.125rem;
  --fs-400: 1rem;

  @media (width > 45em) {
    --fs-900: 2.875rem;
    --fs-800: 2.625rem;
    --fs-700: 1.75rem;
    --fs-650: 1.5rem;
    --fs-600: 1.125rem;
    --fs-500: 1.125rem;
    --fs-400: 1rem;
  }

  @media (width > 65em) {
    --fs-900: 3.625rem;
    --fs-800: 2.75rem;
    --fs-700: 1.75rem;
    --fs-650: 1.625rem;
    --fs-600: 1.3125rem;
    --fs-500: 1.125rem;
    --fs-400: 1rem;
  }
}

/* RESET */

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* GENERAL */
:root {
  --body-font-family: var(--ff-sans);
  --body-font-size: var(--fs-400);
  --body-line-height: 1.5;

  --body-text-color: var(--clr-neutral-200);
  --body-background-color: var(--clr-primary-900);

  --header-font-family: var(--ff-serif);
  --header-color: var(--clr-accent-200);
  --header-line-height: 1.1;
  --header-font-weight: 700;
  --header-text-transform: uppercase;
  --header-letter-spacing: 0.15em;

  --container-max-width: 64rem;
  --container-min-margin-inline: 1rem;

  --section-padding-block: clamp(5rem, 10vh, 6rem);
  --section-header-content-margin-bottom: 3rem;
  --section-header-content-paragraph-padding: 0 2rem;
  --section-header-font-size: var(--fs-800);
  --section-header-content-paragraph-font-size: var(--fs-600);

  --flow-spacer: 1rem;

  --grid-gap: 1.5rem;

  --flex-group-gap: 1rem var(--grid-gap);

  --navigation-background-color: var(--clr-primary-200);
  --navigation-color: var(--clr-primary-700);

  --site-header-background-color: var(--navigation-background-color);
  --site-header-color: var(--navigation-color);
  --site-header-link-color-hover: var(--clr-primary-500);
  --site-header-padding: 1.625rem 0;
  --site-header-nav-items-block-gap: 1.25rem;
  --site-header-nav-items-inline-gap: 1rem;
  --site-header-font-family: var(--ff-serif);
  --site-header-font-size: var(--fs-400);
  --site-header-font-weight: 700;
  --site-header-letter-spacing: 0.16em;
  --site-header-text-transform: uppercase;
  --site-header-logo-font-size: var(--fs-650);
  --site-header-icons-nav-spacing-left: 1.25rem;
  --site-header-icon-size: 1.5rem;
  --site-header-mobile-border-color: var(--clr-primary-400);

  --about-header-font-size: var(--fs-900);
  --about-intro-font-size: var(--fs-600);
  --about-image-border-radius: 1rem;
  --about-image-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);

  --button-font-family: var(--body-font-family);
  --button-font-size: var(--fs-600);
  --button-text-transform: none;
  --button-font-weight: 700;
  --button-padding: 0.75em 2em;
  --button-border: 0;
  --button-border-radius: 0.5rem;
  --button-primary-background: var(--clr-primary-200);
  --button-primary-color: var(--clr-neutral-800);
  --button-accent-background: var(--clr-accent-200);
  --button-accent-color: var(--clr-neutral-800);
  --button-background-hover: var(--clr-primary-700);
  --button-color-hover: var(--clr-neutral-100);

  --card-spacing: 0.5rem;
  --card-body-padding: 2rem;
  --card-background: var(--clr-primary-900);
  --card-background-hover: var(--clr-primary-100);
  --card-font-family: var(--body-font-family);
  --card-color: var(--body-text-color);
  --card-color-hover: var(--clr-neutral-800);
  --card-line-height: 1.25;
  --card-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
  --card-border-radius: 0.5rem;
  --card-heading-gap: 0.875ch;
  --card-heading-font-family: var(--header-font-family);
  --card-heading-color: var(--clr-white);
  --card-heading-color-hover: var(--card-color-hover);
  --card-heading-line-height: 1;
  --card-heading-text-transform: uppercase;
  --card-heading-letter-spacing: 0.16em;
  --card-heading-font-weight: 700;
  --card-heading-font-size: var(--fs-600);
  --card-heading-icon-size: var(--fs-500);
  --card-heading-icon-color: var(--card-heading-color);
  --card-heading-icon-color-hover: var(--card-heading-color-hover);

  --portfolio-grid-min-size: 16rem;
  --portfolio-grid-gap: 1.5rem;

  --technologies-grid-min-size: 8rem;
  --technologies-grid-gap: 6.5rem 2rem;
  --technologies-icon-size: 3.125rem;
  --technologies-icon-color: var(--clr-white);

  --testimonials-grid-gap: 3rem 0rem;
  --testimonial-desktop-padding: 0rem 4.5rem;
  --testimonial-mobile-padding: 0rem 2rem;
  --testimonial-image-size: 8rem;
  --testimonial-image-border-radius: 50%;
  --testimonial-name-gap-top: 0.75rem;
  --testimonial-name-font-family: var(--header-font-family);
  --testimonial-name-font-size: var(--fs-600);
  --testimonial-name-color: var(--header-color);
  --testimonial-name-font-weight: 700;
  --testimonial-name-line-height: 1;
  --testimonial-title-gap-top: 0.25rem;
  --testimonial-title-font-size: var(--fs-400);
  --testimonial-title-color: var(--clr-neutral-300);
  --testimonial-title-line-height: 1;

  --testimonial-quote-gap-top: 1rem;
  --testimonial-quote-line-height: 1.6;
  --testimonial-quote-color: var(--body-text-color);

  --contact-grid-min-size: 16rem;
  --contact-grid-gap: var(--grid-gap) var(--grid-gap);

  --form-label-color: var(--body-text-color);
  --form-label-font-family: var(--body-font-family);
  --form-label-font-weight: 700;
  --form-label-font-size: var(--body-font-size);

  --form-input-font-size: var(--body-font-size);
  --form-input-font-weight: 500;
  --form-input-color: var(--body-text-color);
  --form-field-color: var(--clr-primary-800);
  --form-input-background-color: var(--form-field-color);
  --form-input-padding: 1rem;
  --form-input-border-default: 3px solid var(--form-field-color);
  --form-input-border-radius: 0.25rem;

  --form-placeholder-color: var(--clr-primary-600);
  --form-placeholder-font-weight: 500;
  --form-placeholder-font-family: var(--body-font-family);
  --form-placeholder-font-size: var(--body-font-size);

  --site-footer-background-color: var(--navigation-background-color);
  --site-footer-color: var(--navigation-color);
  --site-footer-icons-gap: 1.25rem;
  --site-footer-name-font-size: var(--fs-400);
  --site-footer-name-color: var(--clr-primary-700);
  --site-footer-name-font-family: var(--ff-serif);
  --site-footer-name-font-weight: 700;
  --site-footer-name-letter-spacing: 0.16em;
  --site-footer-name-text-transform: uppercase;
  --site-footer-link-color: var(--clr-primary-600);
  --site-footer-link-hover-color: var(--clr-primary-700);
  --site-footer-link-icon-size: 1.875rem;
}

body {
  font-size: var(--body-font-size);
  color: var(--body-text-color);
  background-color: var(--body-background-color);
  line-height: var(--body-line-height);
  font-family: var(--body-font-family);
  -webkit-font-smoothing: antialiased;
}

/* LAYOUT */

.container {
  --padding: var(--container-min-margin-inline);
  --max-width: var(--container-max-width);

  width: min(100% - var(--padding), var(--max-width));
  margin-inline: auto;
}

.container--narrow {
  --container-max-width: 40rem;
}

.container--mobile-full-width {
  @media (width <= 45em) {
    --container-max-width: 100%;
    --container-min-margin-inline: 0;
  }
}

.section {
  padding-block: var(--section-padding-block);
}

.even-columns {
  display: grid;
  gap: var(--grid-gap);

  @media (width > 45em) {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.even-columns--desktop-two-columns {
  @media (width > 45em) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr 1fr;
  }
}

.even-columns--mobile-reverse {
  @media (width <= 45em) {
    > div:first-child {
      order: 1;
    }
  }
}

.even-columns--place-center {
  place-items: center;
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer);
}

.flex-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flex-group-gap);
  width: fit-content;
}

.grid-auto-fit {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min-size), 100%), 1fr)
  );
}

.span-all {
  grid-column: 1 / -1;
}

/* COMPONENTS */

.site-header {
  background-color: var(--site-header-background-color);

  @media (width > 45em) {
    padding: var(--site-header-padding);
  }
}

.site-header__inner {
  display: grid;

  width: 100%;

  @media (width <= 45em) {
    text-align: center;
  }
  @media (width > 45em) {
    display: flex;
    align-items: center;
  }
}

.site-header__logo {
  display: block;
  text-decoration: none;
  color: var(--site-header-color);
  font-weight: var(--site-header-font-weight);
  font-family: var(--site-header-font-family);
  letter-spacing: var(--site-header-letter-spacing);
  text-transform: var(--site-header-text-transform);
  font-size: var(--site-header-logo-font-size);

  @media (width <= 45em) {
    width: 100%;
    padding: var(--site-header-nav-items-block-gap)
      var(--site-header-nav-items-inline-gap);
    display: grid;
    justify-content: center;
    border-bottom: 1px solid var(--site-header-mobile-border-color);
  }
}

.site-header__nav {
  @media (width <= 45em) {
    width: 100%;
  }
}

.site-header__nav--desktop-align-right {
  @media (width > 45em) {
    margin-left: auto;
  }
}

.site-header__nav--icons {
  @media (width > 45em) {
    padding-left: var(--site-header-icons-nav-spacing-left);
  }
}

.site-header__nav-items {
  @media (width <= 45em) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }
  @media (width < 25em) {
    grid-template-columns: 1fr;
  }
  @media (width > 45em) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-header-nav-items-inline-gap);
  }
}

.site-header__nav-items--icons {
  @media (width <= 45em) {
    grid-template-columns: 1fr 1fr;
  }
  @media (width < 25em) {
    grid-template-columns: 1fr;
  }
}

.site-header__nav-item {
  @media (width <= 45em) {
    width: 100%;
  }
}

.site-header__nav-item-link {
  display: block;
  text-decoration: none;
  color: var(--site-header-color);
  font-weight: var(--site-header-font-weight);
  font-family: var(--site-header-font-family);
  letter-spacing: var(--site-header-letter-spacing);
  text-transform: var(--site-header-text-transform);
  font-size: var(--site-header-font-size);

  @media (width <= 45em) {
    width: 100%;
    padding: var(--site-header-nav-items-block-gap)
      var(--site-header-nav-items-inline-gap);
    display: grid;
    justify-content: center;
    line-height: 1;
  }
}

.site-header__nav-item-link:hover {
  @media (width > 45em) {
    color: var(--site-header-link-color-hover);
  }
}

.site-header__nav-item--mobile-border-bottom {
  @media (width <= 45em) {
    border-bottom: 1px solid var(--site-header-mobile-border-color);
  }
}

.site-header__nav-item--mobile-border-right {
  @media (width <= 45em) and (width > 25em) {
    border-right: 1px solid var(--site-header-mobile-border-color);
  }
}

.site-header__nav-item-icon {
  fill: var(--site-header-color);
  width: var(--site-header-icon-size);
  height: var(--site-header-icon-size);
}

.site-header__nav-item:hover .site-header__nav-item-icon {
  @media (width > 45em) {
    fill: var(--site-header-link-color-hover);
  }
}

.button {
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  font-family: var(--button-font-family);
  text-transform: var(--button-text-transform);
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
}

.button[data-type="accent"] {
  background-color: var(--button-accent-background);
  color: var(--button-accent-color);
}

.button[data-type="accent"]:hover {
  @media (width > 45em) {
    background-color: var(--button-background-hover);
    color: var(--button-color-hover);
  }
}

.button[data-type="primary"] {
  background-color: var(--button-primary-background);
  color: var(--button-primary-color);
}

.button[data-type="primary"]:hover {
  @media (width > 45em) {
    background-color: var(--button-background-hover);
    color: var(--button-color-hover);
  }
}

.about__header {
  font-family: var(--header-font-family);
  font-size: var(--about-header-font-size);
  color: var(--header-color);
  line-height: var(--header-line-height);
  font-weight: var(--header-font-weight);
  text-transform: var(--header-text-transform);
  letter-spacing: var(--header-letter-spacing);
  text-wrap: balance;
}

.about__intro {
  font-size: var(--about-intro-font-size);
}

.about__image {
  border-radius: var(--about-image-border-radius);
  box-shadow: var(--about-image-box-shadow);
}

.section__header {
  font-family: var(--header-font-family);
  font-size: var(--section-header-font-size);
  color: var(--header-color);
  line-height: var(--header-line-height);
  font-weight: var(--header-font-weight);
  text-transform: var(--header-text-transform);
  letter-spacing: var(--header-letter-spacing);
}

.section__header-content {
  margin-bottom: var(--section-header-content-margin-bottom);
}

.section__header-content-paragraph {
  font-size: var(--section-header-content-paragraph-font-size);
  padding: var(--section-header-content-paragraph-padding);
}

.portfolio {
  --grid-gap: var(--portfolio-grid-gap);
  --grid-min-size: var(--portfolio-grid-min-size);
  align-items: stretch;
}

.portfolio__card {
  text-decoration: none;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--card-spacing);
  padding: var(--card-body-padding);
  background-color: var(--card-background);
  font-family: var(--card-font-family);
  color: var(--card-color);
  line-height: var(--card-line-height);
  box-shadow: var(--card-box-shadow);
  border-radius: var(--card-border-radius);
  height: 100%;
}

.portfolio__card:hover {
  @media (width > 45em) {
    background-color: var(--card-background-hover);
    color: var(--card-color-hover);
  }
}

.portfolio__card:hover .portfolio__card-heading {
  @media (width > 45em) {
    color: var(--card-heading-color-hover);
  }
}

.portfolio__card-heading {
  font-family: var(--card-heading-font-family);
  color: var(--card-heading-color);
  line-height: var(--card-heading-line-height);
  text-transform: var(--card-heading-text-transform);
  letter-spacing: var(--card-heading-letter-spacing);
  font-weight: var(--card-heading-font-weight);
  font-size: var(--card-heading-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--card-heading-gap);
}

.portfolio__card-heading-icon {
  width: var(--card-heading-icon-size);
  height: var(--card-heading-icon-size);
  fill: var(--card-heading-icon-color);
}

.portfolio__card:hover .portfolio__card-heading-icon {
  @media (width > 45em) {
    fill: var(--card-heading-icon-color-hover);
  }
}

.technologies {
  --grid-gap: var(--technologies-grid-gap);
  --grid-min-size: var(--technologies-grid-min-size);
  justify-items: center;
  grid-template-rows: var(--technologies-icon-size);
}

.technologies__icon {
  width: var(--technologies-icon-size);
  height: var(--technologies-icon-size);
  fill: var(--technologies-icon-color);
}

.technologies__link:hover .technologies__icon {
  @media (width > 45em) {
    fill: var(--clr-primary-300);
  }
}

.testimonials {
  --grid-gap: var(--testimonials-grid-gap);
}

.testimonial {
  display: grid;
  grid-template-rows: max-content auto auto 1fr;
  justify-items: center;
  padding: var(--testimonial-desktop-padding);

  @media (width <= 45em) {
    padding: var(--testimonial-mobile-padding);
  }
}

.testimonial__image {
  width: var(--testimonial-image-size);
  height: var(--testimonial-image-size);
  border-radius: var(--testimonial-image-border-radius);
  object-fit: cover;
}

.testimonial__name {
  font-family: var(--testimonial-name-font-family);
  font-size: var(--testimonial-name-font-size);
  color: var(--testimonial-name-color);
  font-weight: var(--testimonial-name-font-weight);
  line-height: var(--testimonial-name-line-height);
  margin: 0;
  margin-top: var(--testimonial-name-gap-top);
}

.testimonial__title {
  font-size: var(--testimonial-title-font-size);
  color: var(--testimonial-title-color);
  line-height: var(--testimonial-title-line-height);
  margin: 0;
  margin-top: var(--testimonial-title-gap-top);
}

.testimonial__quote {
  line-height: var(--testimonial-quote-line-height);
  color: var(--testimonial-quote-color);
  margin-top: var(--testimonial-quote-gap-top);
}

.contact {
  --grid-gap: var(--contact-grid-gap);
  --grid-min-size: var(--contact-grid-min-size);
}

.contact__field {
  display: grid;
}

.contact__label {
  text-align: left;
  color: var(--form-label-color);
  font-family: var(--form-label-font-family);
  font-weight: var(--form-label-font-weight);
  font-size: var(--form-label-font-size);
}

.contact__input,
.contact__textarea {
  font-size: var(--form-input-font-size);
  font-weight: var(--form-input-font-weight);
  color: var(--form-input-color);
  background-color: var(--form-input-background-color);
  padding: var(--form-input-padding);
  border: var(--form-input-border-default);
  border-radius: var(--form-input-border-radius);
}

.contact__textarea {
  resize: none;
}

.contact__input::placeholder,
.contact__textarea::placeholder {
  color: var(--form-placeholder-color);
  font-weight: var(--form-placeholder-font-weight);
  font-family: var(--form-placeholder-font-family);
  font-size: var(--form-placeholder-font-size);
}

.contact__button {
  grid-column: 1 / -1;
  @media (width > 45em) {
    justify-self: end;
    grid-column-end: -1;
  }
}

.site-footer {
  color: var(--site-footer-color);
  background-color: var(--site-footer-background-color);
}

.site-footer__name {
  color: var(--site-footer-name-color);
  font-size: var(--site-footer-name-font-size);
  font-weight: var(--site-footer-name-font-weight);
  font-family: var(--site-footer-name-font-family);
  text-transform: var(--site-footer-name-text-transform);
  letter-spacing: var(--site-footer-name-letter-spacing);
}

.site-footer__link {
  color: var(--site-footer-link-color);
  display: block;
  text-decoration: none;
}

.site-footer__link:hover {
  @media (width > 45em) {
    color: var(--site-footer-link-hover-color);
  }
}

.site-footer__icons {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--site-footer-icons-gap);
  margin-left: inherit auto;
  justify-content: center;
}

.site-footer__icons-icon {
  fill: var(--site-header-color);
  width: var(--site-footer-link-icon-size);
  height: var(--site-footer-link-icon-size);
}

.site-footer__icons .site-footer__link:hover .site-footer__icons-icon {
  @media (width > 45em) {
    fill: var(--site-header-link-color-hover);
  }
}

/* UTILITY */

.text-center {
  text-align: center;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.bg-primary-100 {
  background-color: var(--clr-primary-100);
}

.bg-primary-200 {
  background-color: var(--clr-primary-200);
}

.bg-primary-300 {
  background-color: var(--clr-primary-300);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
}

.bg-primary-700 {
  background-color: var(--clr-primary-700);
}

.bg-primary-800 {
  background-color: var(--clr-primary-800);
}

.bg-primary-900 {
  background-color: var(--clr-primary-900);
}