@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");
:root {
  --color-primary: hsl(215, 100%, 58%);
  --color-primary-dark: hsl(215, 100%, 48%);
  --color-primary-light: hsl(215, 95%, 63%);
  --color-secondary: hsl(183, 100%, 70%);
  --color-secondary-dark: hsl(183, 100%, 60%);
  --color-secondary-light: hsl(183, 95%, 78%);
  --color-accent: hsl(34, 100%, 44%);
  --color-accent-dark: hsl(34, 100%, 34%);
  --color-accent-light: hsl(34, 95%, 49%);
  --color-bg-lightest: hsl(220, 27.3%, 97.8%);
  --color-bg-lighter: hsl(222, 38.5%, 94.9%);
  --color-bg-light: hsl(224, 49.7%, 92%);
  --color-bg-medium: hsl(240, 20%, 91%);
  --color-bg-dark: hsl(240, 8%, 30%);
  --color-bg-darker: hsl(240, 12%, 20%);
  --color-bg-darkest: hsl(240, 16%, 10%);
  --color-white: hsl(220, 0%, 100%);
  --color-black: hsl(245, 53%, 17%);
  --color-font-heading: var(--color-black);
  --color-font-paragraph: hsl(240, 8%, 50%);
  --color-shadow-dark: hsla(240, 58%, 18%, 0.32);
  --color-shadow-light: hsla(240, 100%, 18%, 0.10);
  --color-shadow-medium: hsla(240, 100%, 18%, 0.21);
  --color-gradient-primary: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  --color-gradient-overlay-readability: linear-gradient(180deg, hsla(220, 27.3%, 97.8%, 0) 0%, hsla(220, 27.3%, 97.8%, 0.95) 80%);
  --content-min-width: 23.44rem;
  --content-max-width: 100rem;
  --border: 1px solid var(--color-bg-light);
  --border-radius: 0.25rem;
  --border-radius-sm: calc(var(--border-radius) / 2);
  --border-radius-lg: calc(var(--border-radius) * 2);
  --shadow-simple-sm: 0 0.25rem 0.5rem var(--color-shadow-light);
  --shadow-simple-md: 0 0.5rem 2rem var(--color-shadow-light);
  --shadow-centered-sm: 1rem 2rem 1rem -1.5rem var(--color-shadow-light), -1rem 2rem 1rem -1.5rem var(--color-shadow-light);
  --shadow-centered-md: 2rem 2.5rem 1.5rem -2rem var(--color-shadow-medium), -2rem 2.5rem 1.5rem -2rem var(--color-shadow-medium);
  --spacing-sm: 1rem;
  --spacing-xs: calc(var(--spacing-sm) / 2);
  --spacing-md: calc(var(--spacing-sm) * 2);
  --spacing-lg: calc(var(--spacing-sm) * 4);
  --spacing-section: calc(var(--spacing-sm) * 3);
  --spacing-nav-height: calc(var(--spacing-sm) * 3.5);
  --spacing-menu-height: calc(var(--spacing-nav-height) + var(--spacing-sm) * 15);
  --animation-hint: 0.2s cubic-bezier(.6,0,.3,1);
  --animation-smooth: 0.4s cubic-bezier(.6,0,.3,1);
  --animation-bounce: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --animation-ease-in: 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --animation-ease-in-out: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  --animation-ease-out: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  --animation-ease-out-back: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  --clip-path-origin-x: center;
  --clip-path-origin-y: center;
  background-color: var(--color-bg-lighter);
  color: var(--color-font-paragraph);
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  letter-spacing: 0.012rem;
  line-height: 1.75;
  margin: 0;
  padding: 0;
}
:root * {
  box-sizing: border-box;
}
:root *::selection {
  background: var(--color-primary);
}

h1, h2, h3, h4, h5 {
  color: var(--color-font-heading);
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 1.05rem;
}

p {
  margin-bottom: 1.15rem;
}

.eyebrow-headline {
  color: var(--color-primary);
}

h1 {
  font-size: clamp(2rem, 0.136rem + 3.88vw, 3.052rem);
  margin-top: 0;
}

h2 {
  font-size: clamp(1.8rem, 0.664rem + 2.368vw, 2.441rem);
}

h3 {
  font-size: clamp(1.6rem, 0.974rem + 1.3047vw, 1.953rem);
}

h4 {
  font-size: clamp(1.4rem, 1.111rem + 0.6021vw, 1.563rem);
}

h5 {
  font-size: clamp(1.2rem, 1.111em + 0.18473vw, 1.25rem);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--animation-ease-in-out);
}
a:hover {
  color: var(--color-accent-light);
}

img {
  display: block;
  height: auto;
  width: 100%;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  place-content: start center;
  padding: var(--spacing-md) var(--spacing-sm);
}

.personal-brand {
  padding: 0 0 var(--spacing-sm) 0;
}
.personal-brand svg {
  max-width: 15em;
  width: 100%;
}

.gallery__container {
  display: grid;
  gap: var(--spacing-sm);
  max-width: var(--content-max-width);
}
.gallery__container .gallery__image {
  border: var(--border);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}
.gallery__container .gallery__image img {
  transform: scale(1);
  transition: transform var(--animation-ease-in-out);
}

#lightbox {
  background: var(--color-bg-light);
  cursor: zoom-out;
  display: grid;
  height: 100vh;
  left: 0;
  overflow: hidden;
  padding: var(--spacing-sm);
  place-items: center;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 100;
}
#lightbox img {
  max-height: calc(100vh - var(--spacing-md));
  max-width: 1920px;
  object-fit: contain;
}

@supports (clip-path: circle(0px)) {
  #lightbox {
    clip-path: circle(0px at var(--clip-path-origin-x) var(--clip-path-origin-y));
    transition: clip-path var(--animation-ease-in-out);
  }
  #lightbox.lightbox--show {
    clip-path: circle(100% at center center);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
@media only screen and (min-width: 981px) {
  .gallery__container {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery__container .gallery__image:hover img {
    transform: scale(1.07);
  }
  .gallery__container .gallery__image .gallery__image-description {
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    opacity: 0;
    transform: translateX(var(--spacing-md)) translateY(calc(var(--spacing-sm) * -1)) scale(0.8);
  }
}