/* =========================
   FONTS
========================= */

@font-face {
  font-family: 'Switzer-Light';
  src: url('../fonts/Switzer-Light.woff2') format('woff2'),
       url('../fonts/Switzer-Light.woff') format('woff'),
       url('../fonts/Switzer-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer-Regular';
  src: url('../fonts/Switzer-Regular.woff2') format('woff2'),
       url('../fonts/Switzer-Regular.woff') format('woff'),
       url('../fonts/Switzer-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer-Medium';
  src: url('../fonts/Switzer-Medium.woff2') format('woff2'),
       url('../fonts/Switzer-Medium.woff') format('woff'),
       url('../fonts/Switzer-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer-MediumItalic';
  src: url('../fonts/Switzer-MediumItalic.woff2') format('woff2'),
       url('../fonts/Switzer-MediumItalic.woff') format('woff'),
       url('../fonts/Switzer-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Switzer-Bold';
  src: url('../fonts/Switzer-Bold.woff2') format('woff2'),
       url('../fonts/Switzer-Bold.woff') format('woff'),
       url('../fonts/Switzer-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gambarino-Regular';
  src: url('../fonts/Gambarino-Regular.woff2') format('woff2'),
       url('../fonts/Gambarino-Regular.woff') format('woff'),
       url('../fonts/Gambarino-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   RESET
========================= */

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

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

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

ol, ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

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

svg {
  max-width: 100%;
  display: inline-block;
}

button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 0;
}

input, select, textarea {
  color: inherit;
  letter-spacing: inherit;
}

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

.hidden {
  display: none;
}

/* =========================
   VARIABLES
========================= */

:root {
  /* Colors */
  --color-white: #FCFFFF;
  --color-black: #050300;
  --color-muted: rgba(0, 0, 0, 0.7);
  --color-header-bg: rgba(252, 255, 255, 0.5);

  /* Typography */
  --font-light: "Switzer-Light", sans-serif;
  --font-regular: "Switzer-Regular", sans-serif;
  --font-medium: "Switzer-Medium", sans-serif;
  --font-medium-italic: "Switzer-MediumItalic", sans-serif;
  --font-bold: "Switzer-Bold", sans-serif;
  --font-serif: "Gambarino-Regular", serif;

  /* Font sizes */
  --text-12: 0.75rem;      /* 12px */
  --text-16: 1rem;         /* 16px */
  --text-24: 1.5rem;       /* 24px */
  --text-32: 2rem;         /* 32px */
  --text-40: 2.5rem;       /* 40px */
  --text-48: 3rem;         /* 48px */

  /* Spacing */
  --space-6: 0.375rem;     /* 6px */
  --space-8: 0.5rem;       /* 8px */
  --space-18: 1.125rem;    /* 18px */
  --space-21: 1.3125rem;   /* 21px */
  --space-24: 1.5rem;      /* 24px */
  --space-32: 2rem;        /* 32px */
  --space-36: 2.25rem;     /* 36px */
  --space-42: 2.625rem;    /* 42px */
  --space-64: 4rem;        /* 64px */

  /* Effects */
  --blur-header: 0.75rem;
}

/* =========================
   BASE
========================= */

body {
  font-family: var(--font-regular);
  background-color: var(--color-white);
  color: var(--color-black);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding: var(--space-64) var(--space-21) var(--space-21);
}

/* =========================
   TYPOGRAPHY
========================= */

h2,
h3 {
  font-family: var(--font-bold);
  font-size: var(--text-24);
}

.hero_copy {
  font-family: var(--font-regular);
  font-size: var(--text-32);
}

.hero_copy__em{
  font-family: var(--font-medium-italic)
}


/* =========================
   HEADER
========================= */

.site_header {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;

  backdrop-filter: blur(var(--blur-header));
  -webkit-backdrop-filter: blur(var(--blur-header));
  background-color: var(--color-header-bg);

  padding: var(--space-18) var(--space-21);
}

.site_header__content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: auto;
  justify-content: space-between;
}

.site_header__menu{
  display: flex;
  flex-direction: row;
  gap: var(--space-32);
}

.site_header__menu_item {
  font-family: var(--font-serif);
  font-size: var(--text-16);
}

/* =========================
   FOOTER
========================= */

.site_footer {
  background-color: var(--color-black);
  color: var(--color-white);

  margin: var(--space-21) var(--space-21);
  padding: var(--space-32) var(--space-21);

  display: flex;
  flex-direction: column;
  gap: var(--space-42);
}

.site_footer__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--space-42);
}

.site_footer__content_mail_copy {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  align-items: center;
}

.site_footer__cta {
  font-family: var(--font-bold);
  font-size: var(--text-48);
}

.footer_arrow {
  width: 3.9375rem; /* 63px */
  height: auto;
}

.footer_separador {
  height: 0.1875rem; /* 3px */
  background-color: var(--color-white);
  border: none;
}

.site_footer__content_social_item_link {
  font-family: var(--font-light);
  font-size: var(--text-16);
}

.site_footer__content_menu_item_link {
  font-family: var(--font-serif);
  font-size: var(--text-16);
}

.site_footer__copyright{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.site_footer__copyright_link_img {
    height: 1.375rem;
  }

.site_footer__copyright_small {
  font-family: var(--font-light);
  font-size: var(--text-12);
}

/* =========================
   PROJECTS
========================= */

.projects {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
  align-items: flex-end;
}

.projects__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.projects__title_content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-21);
}

.separador {
  height: 0.0625rem; /* 1px */
  background-color: var(--color-black);
  border: none;
}

.arrow {
  width: 2rem;  /* 32px */
  height: 2rem;
}

.projects__landing {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.projects__landing_project {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.projects__landing_project_link{
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.projects__landing_project_tags {
  font-family: var(--font-serif);
  font-size: var(--text-16);
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
}

/* =========================
   SERVICES
========================= */

.services {
  display: flex;
  flex-direction: column;
  gap: var(--space-36);
}

.services__title {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.services__title_content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-21);
}

.services__list_item {
  font-family: var(--font-serif);
  font-size: var(--text-40);
}

/* =========================
   TABLET MEDIAQUERY
========================= */

@media (min-width: 48rem) {

  /* ================= MAIN ================= */

  main {
    gap: 5rem; /* 80px */
    padding: 2rem; /* 32px */
  }

  /* ================= TYPO ================= */

  h2,
  h3 {
    font-size: 1.875rem; /* 30px */
  }

  .hero_copy {
    font-size: 2.5rem; /* 40px */
    width: 70%;
  }

  /* ================= PROJECTS ================= */

  .projects {
    gap: 3rem; /* 48px */
  }

  .arrow {
    width: 2.5rem; /* 40px */
    height: 2.5rem;
  }

  .projects__landing {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem; /* 24px */
  }

  .projects__landing_project {
    width: calc(50% - 0.75rem);
  }

  .projects__landing_project_tags {
    font-size: 1.125rem; /* 18px */
  }

  /* ================= SERVICES ================= */

  .services__list_item {
    font-size: 2.75rem; /* 44px */
  }

  /* ================= FOOTER ================= */

  .site_footer {
    margin: 2rem;
    padding: 3rem 2rem;
    gap: 3rem;
  }

  .site_footer__cta {
    font-size: 4.5rem; /* 72px */
  }

  .footer_arrow {
    width: 6rem;
  }

  .site_footer__copyright_link {
    height: 2rem;
  }

  .site_footer__copyright_small {
    font-size: 0.875rem; /* 14px */
  }
}


/* =========================
   DESKTOP MEDIAQUERY
========================= */

@media (min-width: 75rem) {

  /* ================= HEADER ================= */

  .site_header {
    padding: var(--space-18) 3rem; /* 48px horizontal */
  }

  .site_header__menu_item {
    font-size: 1.5rem; /* 24px */
  }

  /* ================= MAIN ================= */

  main {
    gap: 8rem; /* 128px */
    padding: 3rem; /* 48px all sides */
  }

  /* ================= TYPO ================= */

  h2,
  h3 {
    font-size: 2.25rem; /* 36px */
  }

  .hero_copy {
    font-size: 3rem; /* 48px */
    width: 50%;
  }

  /* ================= PROJECTS ================= */

  .projects {
    gap: 4rem; /* 64px */
  }

  .arrow {
    width: 3rem; /* 48px */
    height: 3rem;
  }

  .separador {
    height: 0.09375rem; /* 1.5px */
  }

  .projects__landing {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem; /* 24px */
  }

  .projects__landing_project {
    width: calc(50% - 0.75rem);
    gap: 0.75rem; /* 12px */
  }

  .projects__landing_project_tags {
    font-size: 1.25rem; /* 20px */
  }

  /* ================= SERVICES ================= */

  .services__list_item {
    font-size: 3rem; /* 48px */
  }

  /* ================= FOOTER ================= */

  .site_footer {
    margin: 3rem; /* 48px */
    padding: 4rem 2.625rem; /* 64px vertical / 42px horizontal */
    gap: 4rem; /* 64px */
  }

  .site_footer__cta {
    font-size: 8rem; /* 128px */
  }

  .footer_arrow {
    width: 10.5rem; /* 168px */
  }

  .footer_separador {
    height: 0.1875rem; /* 3px */
  }

  .site_footer__content_social_item {
    font-size: 1.5rem; /* 24px */
  }

  .site_footer__content_menu_item {
    font-size: 1.5rem; /* 24px */
  }

  .site_footer__copyright_link_img {
    height: 2.25rem; /* 54px */
  }

  .site_footer__copyright_small {
    font-size: 1rem; /* 16px */
  }
}