@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");
:root {
  --card-width: 230px;
  --card-height: 400px;
  --card-transition-duration: 800ms;
  --card-transition-easing: ease; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

/*body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.787);
  overflow: hidden; }*/
.projects{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.49);
  overflow: hidden; 
}
button {
  border: none;
  background: none;
  cursor: pointer; }
  button:focus {
    outline: none;
    border: none; }

.app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .app__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -5;
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    overflow: hidden; }
    .app__bg::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      z-index: 1;
      opacity: 0; }
    .app__bg__image {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0));
      width: 180%;
      height: 180%;
      transition: transform 1000ms ease, opacity 1000ms ease;
      overflow: hidden; }
      .app__bg__image img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .app__bg__image.current--image {
        opacity: 1;
        --image-translate-offset: 0; }
      .app__bg__image.previous--image, .app__bg__image.next--image {
        opacity: 0; }
      .app__bg__image.previous--image {
        --image-translate-offset: -25%; }
      .app__bg__image.next--image {
        --image-translate-offset: 25%; }

.cardList {
  position: absolute;
  width: calc(3 * var(--card-width));
  height: auto; }
  .cardList__btn {
    --btn-size: 35px;
    width: var(--btn-size);
    height: var(--btn-size);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100; }
    .cardList__btn.btn--left {
      left: 23%; }
    .cardList__btn.btn--right {
      right: 23%; }
    .cardList__btn .icon {
      width: 100%;
      height: 100%; }
      .cardList__btn .icon svg {
        width: 100%;
        height: 100%; }
  .cardList .cards__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px; }

.card {
  --card-translateY-offset: 100vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) scale(var(--card-scale-offset));
  display: inline-block;
  width: var(--card-width);
  height: var(--card-height);
  transition: transform var(--card-transition-duration) var(--card-transition-easing);
  user-select: none; }
  .card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.356);
    z-index: 1;
  
    transition: opacity var(--card-transition-duration) var(--card-transition-easing);
    opacity: calc(1 - var(--opacity)); }
  .card__image {
    position: relative;
    width: 100%;
    height: 100%; }
    .card__image img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .card.current--card {
    --current-card-rotation-offset: 0;
    --card-translateX-offset: 0;
    --card-rotation-offset: var(--current-card-rotation-offset);
    --card-scale-offset: 1.2;
    --opacity: 0.8; }
  .card.previous--card {
    --card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
    --card-rotation-offset: 25deg;
  opacity: 0.5; }
  .card.next--card {
    --card-translateX-offset: calc(var(--card-width) * 1.1);
    --card-rotation-offset: -25deg;
    opacity: 0.5; }
  .card.previous--card, .card.next--card {
    --card-scale-offset: 0.9;
    --opacity: 0.4; }

.infoList {
  position: absolute;
  width: calc(3 * var(--card-width));
  height: var(--card-height);
  pointer-events: none; }
  .infoList .info__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    perspective: 1000px;
    transform-style: preserve-3d; }

.info {
  margin-bottom: calc(var(--card-height) / 10);
  margin-left: calc(var(--card-width) / 1.2);
  transform: translateZ(2rem);
  transition: transform var(--card-transition-duration) var(--card-transition-easing); }
  .info .text {
    position: relative;
    font-family: "Montserrat";
    font-size: calc(var(--card-width) * var(--text-size-offset, 0.2));
    white-space: nowrap;
    color: #fff;
    width: fit-content; }
  .info .name,
  .info .location {
    text-transform: uppercase; }
  .info .location {
    font-weight: 800; }
  .info .location {
    --mg-left: 40px;
    --text-size-offset: 0.12;
    font-weight: 600;
    margin-left: var(--mg-left);
    margin-bottom: calc(var(--mg-left) / 2);
    padding-bottom: 0.8rem; }
    .info .location::before, .info .location::after {
      content: "";
      position: absolute;
      background: #fff;
      left: 0%;
      transform: translate(calc(-1 * var(--mg-left)), -50%); }
    .info .location::before {
      top: 50%;
      width: 20px;
      height: 5px; }
    .info .location::after {
      bottom: 0;
      width: 60px;
      height: 2px; }
  .info .description {
    --text-size-offset: 0.065;
    font-weight: 500; }
  .info.current--info {
    opacity: 1;
    display: block; }
  .info.previous--info, .info.next--info {
    opacity: 0;
    display: none; }

.loading__wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #155577;
  z-index: 200; }
  .loading__wrapper .loader--text {
    color: #fff;
    font-family: "Montserrat";
    font-weight: 500;
    margin-bottom: 1.4rem; }
  .loading__wrapper .loader {
    position: relative;
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25); }
    .loading__wrapper .loader span {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: red;
      transform: scaleX(0);
      transform-origin: left; }

@media (min-width: 800px) {
  :root {
    --card-width: 15.625em;
    --card-height: 25em;
   } 
   .info {
    margin-bottom: calc(var(--card-height) / 8);
    margin-left: calc(var(--card-width) / 1.5);
    transform: translateZ(2rem);
    transition: transform var(--card-transition-duration) var(--card-transition-easing); }
    .cardList__btn.btn--left {
      left: -5%; }
    .cardList__btn.btn--right {
      right: -5%; }
  }
  @media (min-width: 1200px) {
    :root {
      --card-width: 21.875em;
      --card-height: 35em;
     } }
/*@media (min-width: 600px) {
      :root {
        --card-width: 100px;
        --card-height: 160px; } }*/

.support {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex; }
  .support a {
    margin: 0 10px;
    color: #fff;
    font-size: 1.8rem;
    backface-visibility: hidden;
    transition: all 150ms ease; }
    .support a:hover {
      transform: scale(1.1); }

#all-projects{
  border-radius: 5%;
  position: absolute;
  right: 5%;
  bottom: 5%;
  padding: 10px;
  font-size: 1rem;
  background-color: #515f6e;
  color:white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  cursor: pointer;
}