/* ========================================================================== */
/* Normalize */
/* ========================================================================== */

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

body {
  line-height: 1.5; /* Accessible line height */
  -webkit-font-smoothing: antialiased; /* Improve text rendering */
}

body {
  margin: 0;
}

a:any-link {
  color: initial;
  text-decoration: none;
}

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

p {
  text-wrap: pretty;
  /* hyphens: auto; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  margin: 0;
}

/* ========================================================================== */
/* Fonts */
/* ========================================================================== */

.playfair-display-1 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: normal; /* normal is 400 */
  font-style: normal;
}

.roboto-1 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal; /* normal is 400 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* ========================================================================== */
/* Main styling */
/* ========================================================================== */

html {
  --padding-size-1: 64px;
  --padding-size-2: 48px;
  --padding-size-3: 32px;
  --padding-size-4: 16px;
  --padding-size-5: 8px;

  --palette-darkgray: rgb(29, 29, 29);
  --palette-stencil: #007c9b;
}

body {
  display: flex;
  justify-content: center;
  font-family: "Roboto", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display", serif;
}

h1 {
  font-size: 3rem;
}

.page-header h1 {
  text-shadow: 1px 1px 2px black;
}

h2 {
  margin: var(--padding-size-4) 0;
  font-size: 2rem;
}

h3 {
  margin: var(--padding-size-5) 0;
}

.darkgray-color {
  color: var(--palette-darkgray);
}

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

.icon {
  display: inline-block;
  width: 24px;
}

a:has(.icon):focus {
  outline: 1px dashed black;
  outline-offset: 2px;
}

.page-footer a:has(.icon):focus {
  outline: 1px dashed white;
}

.page-footer a {
  color: white;
  text-decoration: underline;
}

.page-footer a:hover {
  text-decoration: none;
}

.hidden-text-for-aria {
  display: none;
}

.icon.x {
  transform: scale(0.85);
}

.center-vertically {
  display: flex;
  align-items: center;
}

.left-horizontally {
  display: flex;
  justify-content: left;
}

.right-horizontally {
  display: flex;
  justify-content: right;
}

.gap-5 {
  gap: var(--padding-size-5);
}

.gap-4 {
  gap: var(--padding-size-4);
}

.gap-3 {
  gap: var(--padding-size-3);
}

.page-container {
  max-width: 1150px;
  display: flex;
  flex-flow: column nowrap;
}

.page-header {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: 400px;
  position: relative;
  padding: var(--padding-size-2);
  padding: var(--padding-size-1);
  --height-adjustment: 40px;
}

.page-header::before {
  content: "";
  position: absolute;
  width: 100%;
  background-color: var(--palette-stencil);
  transform: translateY(-40%) skewY(-11deg);
  min-height: calc(100% + var(--height-adjustment));
  z-index: -1;
}

.box-shadow {
  -webkit-box-shadow: 8px 8px 19px -3px rgba(0, 0, 0, 0.37);
  box-shadow: 8px 8px 19px -3px rgba(0, 0, 0, 0.37);
}

.portrait-container {
  position: relative;
}

.portrait-container img,
.portrait-container picture {
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
}

.portrait-container > h1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: white;
}

.about-me-container {
  align-self: center;
  background-color: white;
  padding: var(--padding-size-3) var(--padding-size-4);
}

.about-me-container h2,
.about-me-container p {
  animation: fade-in 2s;
  animation-timing-function: ease-in-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.about-me-container h2,
.page-footer h2 {
  margin-top: 0;
}

.my-work {
  margin-top: var(--padding-size-1);
  margin-bottom: var(--padding-size-1);
  padding: 0 var(--padding-size-2);
}

.project-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 0.33333fr));
  grid-auto-rows: 1fr;
  gap: var(--padding-size-3);
  justify-content: center;
}

.project-card {
  display: grid;
  grid-template-rows: 3fr 2fr;
  -webkit-box-shadow: 8px 8px 19px -3px rgba(0, 0, 0, 0.37);
  box-shadow: 8px 8px 19px -3px rgba(0, 0, 0, 0.37);
  transition: transform 0.5s;
  /* will-change: transform; */
}

.project-card:hover {
  transform: translateY(-12px);
}

.project-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.project-card-body {
  padding: var(--padding-size-5) var(--padding-size-4);
}

.project-card-body > p {
  margin: 0;
}

.page-footer {
  background-color: var(--palette-stencil);
  background-clip: border-box;
  color: white;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--padding-size-2);
  padding: var(--padding-size-2);
}

.page-footer p {
  margin: var(--padding-size-4) 0;
}

.page-footer .marginless {
  margin: 0;
}

.page-footer p:has(.email) {
  margin-top: var(--padding-size-5);
}

.page-footer address {
  font-style: normal;
}

.page-footer address .phone,
.page-footer address .email {
  vertical-align: middle;
}

.page-footer .icons-row {
  margin-top: var(--padding-size-3);
}

.page-footer .icons-row a {
  transform-origin: top left;
  transform: scale(1.3);
}

.contact-info span.phone,
.contact-info span.email {
  margin-right: 1ch;
}

.page-footer img,
.page-footer picture {
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
}

.page-header {
  padding-top: var(--padding-size-3);
}

.page-footer {
  padding-bottom: var(--padding-size-3);
}

.tablet {
  display: none;
}

main {
  isolation: isolate;
  z-index: 1;
}

.page-footer {
  isolation: isolate;
  z-index: 0;
}

/* both tablet and mobile */
@media (max-width: 1000px) {
  .project-cards-container {
    gap: var(--padding-size-3);
    row-gap: var(--padding-size-1);
  }
}

/* tablet */
@media (max-width: 1000px) and (min-width: 601px) {
  .tablet {
    display: revert;
  }

  .non-tablet {
    display: none;
  }

  .page-container {
    margin-top: 160px;
  }

  .about-me-container {
    position: relative;
  }

  .about-me-container h2 {
    text-align: center;
  }

  .page-header {
    position: relative;
    padding: 0 var(--padding-size-5);
  }

  .page-header::before {
    transform: translateY(calc(-100px - var(--height-adjustment) - 90px))
      skewY(-10deg);
  }

  .about-me-container .generic-container:has(h1) {
    position: absolute;
    min-width: calc(
      50% - 240px
    ); /* @todo use variable to have it dynamically match with the image */
    width: 50%;
    right: 0;
    top: -96px;
    display: flex;
    justify-content: center;
  }

  .about-me-container h1 {
    color: white;
    text-align: center;
    margin-bottom: -32px;
    top: -96px;
    overflow-wrap: revert;
  }

  .left-float {
    float: left;
    shape-outside: margin-box;
  }

  .about-me-container .left-float {
    width: 50%;
    min-width: 240px;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
    margin-right: var(--padding-size-4);
    transform-origin: bottom right;
    transform: scale(1.18);
  }

  .page-header {
    grid-template-columns: 1fr; /* Idk why display: block; doesn't just work */
    --height-adjustment: 90px;
  }

  .about-me-container {
    margin: 0 var(--padding-size-1);
    min-width: 430px;
  }

  .project-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .my-work {
    padding: 0 var(--padding-size-1);
  }

  .page-footer {
    grid-template-columns: 3fr 2fr;
    gap: var(--padding-size-4);
    padding-top: var(--padding-size-4);
    padding-left: var(--padding-size-4);
    padding-right: var(--padding-size-4);
  }
}

/* mobile */
@media (max-width: 600px) {
  .page-header {
    grid-template-columns: 1fr;
    padding: var(--padding-size-3);
  }

  .page-header h1 {
    overflow-wrap: break-word;
  }

  .page-header::before {
    transform: translateY(-70%) skewY(-20deg);
  }

  .about-me-container {
    box-shadow: none;
    -webkit-box-shadow: none;
    padding-bottom: 0;
  }

  .about-me-container h2 {
    text-align: center;
  }

  .about-me-container .icons-row {
    justify-content: center;
  }

  .my-work {
    padding: 0;
  }

  .my-work h2 {
    text-align: center;
  }

  .project-cards-container {
    justify-content: center;
  }

  .project-cards-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 0.33333fr));
  }

  .page-footer {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .contact-info {
    padding: var(--padding-size-3) var(--padding-size-3) 0;
  }

  .page-footer h2 {
    text-align: center;
  }

  .page-footer .icons-row {
    justify-content: center;
  }
}