.overlay {
  --transition: 0.4s;
  position: fixed;
  top: 0;
  left: 0;
  translate: 100%;
  transition: translate 0s var(--transition);

  .overlay-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--dark) 30%, transparent);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--transition) ease;
  }

  .overlay-box {
    background: var(--deep-dark);
    border-radius: 12px;
    box-shadow: 0 0 5px var(--deep-dark);
    translate: 100%;
    transition: translate 0.6s ease;
  }

  &:is(.open) {
    translate: 0;
    transition: translate 0s 0s;

    .overlay-background {
      opacity: 1;
    }

    .overlay-box {
      translate: 0;
    }
  }
}

.header-wrapper {
  display: grid;
  grid-template-columns: 0.4fr 1fr 0.4fr;
  grid-template-areas: 'back-link header open-all-project';
  place-items: center;
  gap: 10px;

  .back-link {
    grid-area: back-link;
    justify-self: start;
  }

  #header {
    grid-area: header;
  }

  .open-all-project {
    grid-area: open-all-project;
    justify-self: end;
  }
}

main {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  grid-template-rows: max-content 1fr;
  grid-template-areas:
    'resume resume'
    'fixed-column scrollable-column';
  place-items: center;
  gap: 20px 30px;

  .resume {
    grid-area: resume;
  }

  .fixed-column {
    grid-area: fixed-column;
  }

  .scrollable-column {
    grid-area: scrollable-column;
    border-left: solid 1px var(--orange);
    padding: 10px 0 0 10px;

    h2 {
      margin-top: 15px;
    }
  }
}

.resume {
  font-style: italic;
}

.slider-wrapper {
  .slider {
    aspect-ratio: 16 / 9;

    .image {
      object-fit: contain !important;
    }
  }

  .open-in-full {
    display: block;
  }

  .close-in-full {
    display: none;
  }

  &:is(.full-screen) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    .open-in-full {
      display: none;
    }

    .close-in-full {
      display: block;
    }
  }
}

button.toggle-in-full {
  padding: 10px;
  border-radius: 50%;
}

.context-image {
  width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.technologies-wrapper {
  flex-wrap: wrap;

  .image {
    width: 50px;
  }
}

.technology-item {
  .technology-name {
    order: 2;
  }

  .technology-logo {
    order: 1;
  }
}

@media (max-width: 799px) {
  .header-wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'back-link open-all-project'
      'header header';
  }

  #container {
    overflow-y: auto !important;
    height: max-content;
  }

  main {
    grid-template-columns: 1fr;
    grid-template-areas:
      'resume'
      'fixed-column'
      'scrollable-column';
  }

  .fixed-column {
    width: min(500px, 100%);
  }

  .slider-wrapper {
    width: min(500px, 100%);
  }

  .scrollable-column {
    height: max-content;
    overflow: hidden;
  }
}