.screenshot {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  height: 250px;
}

.projects {
  margin-top: 80px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.projects span {
  align-self: center;
  background-color: #28064f;
  height: 3px;
  width: 200px;
  transform: rotate(90deg);
}
.projects .sm-show {
  display: none;
}
.projects .project {
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: space-around;
  width: 85vw;
  height: 300px;
  gap: 10px;
  margin-top: 50px;
}
.projects .project .left {
  transition: 1s ease;
  margin-left: -1000px;
  visibility: hidden;
}
.projects .project .leftslide {
  margin-left: 0px;
  visibility: visible;
}
.projects .project .right {
  margin-right: -1000px;
  visibility: hidden;
  transition: 1s ease;
}
.projects .project .rightslide {
  margin-right: 0px;
  visibility: visible;
}
.projects .project .screenshot {
  z-index: 5;
}
.projects .project .screenshot a {
  position: absolute;
}
.projects .project .screenshot a .shutter {
  margin-top: 600px;
  background-color: rgba(32, 56, 101, 0.5);
  width: 444px;
  height: 250px;
  color: #CFA2FE;
  display: none;
  visibility: hidden;
}
.projects .project .screenshot a img {
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
}
.projects .project .screenshot:hover .shutter {
  transition: 1s ease;
  margin-top: -4px;
  display: flex;
  visibility: visible;
}
.projects .project div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 444px;
  height: 300px;
}
.projects .project div p {
  text-align: justify;
}
.projects .project .text {
  font-family: "Jost", sans-serif;
  width: 444px;
}
.projects .project .text .tech {
  display: flex;
  flex-direction: row;
  gap: 15px;
  flex-wrap: wrap;
  height: auto;
}
.projects .project .text .tech .techIcons {
  height: 80px;
  transition: 0.5s;
  z-index: 6;
}

@media (orientation: portrait) or (max-width: 900px) {
  section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .projects {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .projects .sm-show {
    display: flex;
    width: 60%;
    height: 3px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #28064f;
    transform: rotate(0deg);
  }
  .projects .project {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: auto;
    transition: 1s ease;
  }
  .projects .project .text {
    height: auto;
    display: flex;
    flex-direction: column;
    width: 90vw;
  }
  .projects .project .text .tech {
    margin-top: 20px;
    height: auto;
  }
  .projects .project .screenshot {
    position: relative;
  }
  .projects .project .screenshot .sm-resized {
    max-height: 30vh;
  }
  .projects .project .screenshot a {
    width: 100vw;
  }
  .projects .project .screenshot a .screenshot {
    width: 98vw;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .projects .project span {
    display: none;
  }
  .projects .project .left {
    height: auto;
    margin-left: -1000px;
    visibility: hidden;
  }
  .projects .project .leftslide {
    margin-left: 0px;
    visibility: visible;
  }
  .projects .project .right {
    margin-top: 20px;
    height: 400px;
    margin-right: -1000px;
    visibility: hidden;
  }
  .projects .project .rightslide {
    margin-right: 0px;
    visibility: visible;
  }
  .projects .sm-reversed {
    margin-top: 20px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 100vw;
    height: auto;
    transition: 1s ease;
  }
  .projects .sm-reversed .text {
    height: auto;
    display: flex;
    flex-direction: column;
    width: 90vw;
  }
  .projects .sm-reversed .text .tech {
    margin-top: 20px;
  }
  .projects .sm-reversed .screenshot {
    position: relative;
  }
  .projects .sm-reversed span {
    display: none;
  }
  .projects .sm-reversed .left {
    margin-top: 20px;
    height: 300px;
    margin-left: -1000px;
    visibility: hidden;
  }
  .projects .sm-reversed .leftslide {
    margin-left: 0px;
    visibility: visible;
  }
  .projects .sm-reversed .right {
    height: auto;
    margin-right: -1000px;
    visibility: hidden;
  }
  .projects .sm-reversed .rightslide {
    margin-right: 0px;
    visibility: visible;
  }
}/*# sourceMappingURL=curtain.css.map */