/*================ PROJECTS - SECTION ================*/

.projects-section {
  background-color: var(--secondary-color);
  height: calc(100vh - var(--header-height));
  min-height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.projects-overlay-text {
  font-size: 4vw;
  color: var(--background-color);
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
}

.project-arrow-left {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 30px;
  cursor: pointer;
  position: absolute;
  left: 8%;
  z-index: 15;
  transition: background-color 0.15s, opacity 0.15s;
}

.project-arrow-right {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 30px;
  cursor: pointer;
  position: absolute;
  right: 8%;
  z-index: 15;
  transition: background-color 0.15s, opacity 0.15s;
}

.project-arrow-left:hover,
.project-arrow-right:hover {
  background-color: var(--primary-color);
}

.project-arrow-left:active,
.project-arrow-right:active {
  opacity: 0.7;
}

.projects-container {
  width: 75%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.project-main-element {
  background-color: white;
  width: 20%;
  height: calc(90% - var(--project-element-padding) * 2);
  min-width: 250px;
  min-height: 350px;
  padding: var(--project-element-padding);
  margin: 0 var(--project-element-horizontal-margin);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: -5px 5px 8px rgba(0, 0, 0, 0.4);
  z-index: 14;
  transition: transform 0.15s, height 0.15s;
}

.project-side-element {
  background-color: white;
  width: 20%;
  height: calc(80% - var(--project-element-padding) * 2);
  min-width: 250px;
  min-height: 350px;
  padding: var(--project-element-padding);
  margin: 0 var(--project-element-horizontal-margin);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: -5px 5px 8px rgba(0, 0, 0, 0.4);
  z-index: 13;
  transition: transform 0.15s, height 0.15s;
}

.project-border-element {
  background-color: white;
  width: 20%;
  height: calc(70% - var(--project-element-padding) * 2);
  min-width: 250px;
  min-height: 350px;
  padding: var(--project-element-padding);
  margin: 0 var(--project-element-horizontal-margin);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: -5px 5px 8px rgba(0, 0, 0, 0.4);
  z-index: 12;
  transition: transform 0.15s, height 0.15s;
}

.project-element-upper-section {
  flex: 0.5;
  width: 100%;
  height: calc(25% - var(--project-spacing-line-vertical-margin));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.project-title {
  font-size: 22px;
  font-weight: 700;
}

.project-timespan {
  font-size: 18px;
  font-weight: 500;
  color: var(--primary-color);
}

.project-links {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.project-youtube-image {
  height: 20px;
}

.project-website-image {
  height: 20px;
}

.project-github-image {
  height: 18px;
}

.project-spacing-line {
  flex: none;
  width: 70%;
  border: 1px solid var(--primary-color);
  margin: var(--project-spacing-line-vertical-margin) 0;
}

.project-element-lower-section {
  flex: 1.5;
  width: 100%;
  height: calc(75% - (var(--project-spacing-line-vertical-margin) + 1px));
}

.project-description {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.js-project-left-offscreen-element,
.js-project-right-offscreen-element {
  z-index: 11;
}

.animToLeft-OffscreenToBorder {
  animation: animToLeft-OffscreenToBorder 1s linear forwards;
}

.animToRight-OffscreenToBorder {
  animation: animToRight-OffscreenToBorder 1s linear forwards;
}

@keyframes animToLeft-OffscreenToBorder {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc(100% + var(--project-element-horizontal-margin) * 2)
    );
  }
}

@keyframes animToRight-OffscreenToBorder {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc((100% + var(--project-element-horizontal-margin) * 2) * (-1))
    );
  }
}

.animToLeft-BorderToSide {
  animation: animToLeft-BorderToSide 1s linear forwards;
}

.animToRight-BorderToSide {
  animation: animToRight-BorderToSide 1s linear forwards;
}

@keyframes animToLeft-BorderToSide {
  from {
    transform: translateX(0);
    height: calc(70% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc(100% + var(--project-element-horizontal-margin) * 2)
    );
    height: calc(80% - var(--project-element-padding) * 2);
  }
}

@keyframes animToRight-BorderToSide {
  from {
    transform: translateX(0);
    height: calc(70% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc((100% + var(--project-element-horizontal-margin) * 2) * (-1))
    );
    height: calc(80% - var(--project-element-padding) * 2);
  }
}

.animToLeft-SideToMain {
  animation: animToLeft-SideToMain 1s linear forwards;
}

.animToRight-SideToMain {
  animation: animToRight-SideToMain 1s linear forwards;
}

@keyframes animToLeft-SideToMain {
  from {
    transform: translateX(0);
    height: calc(80% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc(100% + var(--project-element-horizontal-margin) * 2)
    );
    height: calc(90% - var(--project-element-padding) * 2);
  }
}

@keyframes animToRight-SideToMain {
  from {
    transform: translateX(0);
    height: calc(80% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc((100% + var(--project-element-horizontal-margin) * 2) * (-1))
    );
    height: calc(90% - var(--project-element-padding) * 2);
  }
}

.animToLeft-MainToSide {
  animation: animToLeft-MainToSide 1s linear forwards;
}

.animToRight-MainToSide {
  animation: animToRight-MainToSide 1s linear forwards;
}

@keyframes animToLeft-MainToSide {
  from {
    transform: translateX(0);
    height: calc(90% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc(100% + var(--project-element-horizontal-margin) * 2)
    );
    height: calc(80% - var(--project-element-padding) * 2);
  }
}

@keyframes animToRight-MainToSide {
  from {
    transform: translateX(0);
    height: calc(90% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc((100% + var(--project-element-horizontal-margin) * 2) * (-1))
    );
    height: calc(80% - var(--project-element-padding) * 2);
  }
}

.animToLeft-SideToBorder {
  animation: animToLeft-SideToBorder 1s linear forwards;
}

.animToRight-SideToBorder {
  animation: animToRight-SideToBorder 1s linear forwards;
}

@keyframes animToLeft-SideToBorder {
  from {
    transform: translateX(0);
    height: calc(80% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc(100% + var(--project-element-horizontal-margin) * 2)
    );
    height: calc(70% - var(--project-element-padding) * 2);
  }
}

@keyframes animToRight-SideToBorder {
  from {
    transform: translateX(0);
    height: calc(80% - var(--project-element-padding) * 2);
  }

  to {
    transform: translateX(
      calc((100% + var(--project-element-horizontal-margin) * 2) * (-1))
    );
    height: calc(70% - var(--project-element-padding) * 2);
  }
}

.animToLeft-BorderToOffscreen {
  animation: animToLeft-BorderToOffscreen 1s linear forwards;
}

.animToRight-BorderToOffscreen {
  animation: animToRight-BorderToOffscreen 1s linear forwards;
}

@keyframes animToLeft-BorderToOffscreen {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc(100% + var(--project-element-horizontal-margin) * 2)
    );
  }
}

@keyframes animToRight-BorderToOffscreen {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc((100% + var(--project-element-horizontal-margin) * 2) * (-1))
    );
  }
}

@media (max-width: 767px) {
  .project-arrow-left {
    left: 0;
  }

  .project-arrow-right {
    right: 0;
  }

  .projects-container {
    width: 90%;
  }
}

@media (max-width: 1024px) {
  .projects-overlay-text {
    display: none;
  }
}

@media (min-width: 1921px) {
  .projects-section {
    min-height: calc(100vh - var(--header-height));
  }

  .project-main-element,
  .project-side-element,
  .project-border-element {
    min-width: 20%;
  }

  .project-title {
    font-size: 1vw;
  }

  .project-timespan {
    font-size: 0.8vw;
  }

  .project-description {
    font-size: 0.6vw;
  }
}

@media (min-width: 2560px) {
  .project-arrow-left,
  .project-arrow-right {
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 45px;
  }

  .project-youtube-image {
    height: 30px;
  }

  .project-website-image {
    height: 30px;
  }

  .project-github-image {
    height: 24px;
  }
}

@media (min-width: 3840px) {
  .project-arrow-left,
  .project-arrow-right {
    width: 80px;
    height: 80px;
    padding: 20px;
    border-radius: 60px;
  }

  .project-youtube-image {
    height: 40px;
  }

  .project-website-image {
    height: 40px;
  }

  .project-github-image {
    height: 32px;
  }
}