@charset "UTF-8";
.detail-page-body {
  background-color: #222;
  padding-block: 40px;
}

.container--link {
  margin-bottom: 20px;
}
@media (max-width: 576px) {
  .container--link {
    padding-left: 20px;
  }
}
.container--project {
  display: grid;
  grid-template-rows: auto;
}
.container--project__left-side {
  padding-right: 20px;
}
.container--project__right-side {
  overflow: hidden;
}
.container--project__right-side img {
  width: 100%;
}
@media (max-width: 576px) {
  .container--project {
    padding-inline: 20px;
  }
}
@media (max-width: 768px) {
  .container--project {
    grid-template-columns: auto;
  }
}
@media (min-width: 768px) {
  .container--project {
    grid-template-columns: 1fr 2fr;
  }
}

.project-title {
  margin: 0px;
  font-weight: 400;
  font-size: 3em;
  color: #ccc;
}

.heading {
  color: #ccc;
}
.heading--left-side {
  margin-block: 20px 0px;
}
.heading--right-side {
  margin-block: 20px 10px;
}
.heading--app-feature {
  font-weight: 300;
  font-style: italic;
  margin: 0px;
}

.project-role {
  margin: 0px;
  color: #999;
}

.list-technology {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.list-technology__item {
  color: #999;
}
@media (max-width: 768px) {
  .list-technology {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  .list-technology__item {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

.thumbnail-carousel {
  position: relative;
}
.thumbnail-carousel__list-thumbnail {
  position: relative;
  margin-bottom: 5px;
  width: 100%;
  padding-top: 75%;
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 992px) {
  .thumbnail-carousel__list-thumbnail {
    padding-top: 50%;
  }
}
.thumbnail-carousel__list-thumbnail__item {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transition: 0.5s;
  overflow: hidden;
}
.thumbnail-carousel__list-thumbnail__item__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: 0%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: 100%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: 200%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: 300%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: 400%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: 500%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: 600%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 700%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-1 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 800%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -100%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: 0%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: 100%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: 200%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: 300%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: 400%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: 500%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 600%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-2 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 700%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -200%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: -100%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: 0%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: 100%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: 200%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: 300%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: 400%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 500%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-3 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 600%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -300%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: -200%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: -100%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: 0%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: 100%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: 200%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: 300%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 400%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-4 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 500%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -400%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: -300%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: -200%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: -100%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: 0%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: 100%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: 200%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 300%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-5 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 400%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -500%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: -400%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: -300%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: -200%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: -100%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: 0%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: 100%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 200%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-6 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 300%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -600%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: -500%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: -400%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: -300%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: -200%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: -100%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: 0%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 100%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-7 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 200%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -700%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: -600%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: -500%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: -400%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: -300%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: -200%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: -100%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: 0%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-8 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 100%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(1) {
  left: -800%;
  background-color: hsl(40deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(2) {
  left: -700%;
  background-color: hsl(80deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(3) {
  left: -600%;
  background-color: hsl(120deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(4) {
  left: -500%;
  background-color: hsl(160deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(5) {
  left: -400%;
  background-color: hsl(200deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(6) {
  left: -300%;
  background-color: hsl(240deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(7) {
  left: -200%;
  background-color: hsl(280deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(8) {
  left: -100%;
  background-color: hsl(320deg, 80%, 80%);
}
.thumbnail-carousel__list-thumbnail--active-9 > .thumbnail-carousel__list-thumbnail__item:nth-child(9) {
  left: 0%;
  background-color: hsl(0deg, 80%, 80%);
}
.thumbnail-carousel__controls {
  display: flex;
  margin: 0px;
  padding: 0px;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  list-style: none;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.thumbnail-carousel__controls__item {
  margin: 0px;
  padding: 0px;
}
.thumbnail-carousel__controls__item__button {
  padding: 5px;
  border: none;
  border-radius: 100px;
  transform: translateY(-20%);
  box-shadow: 0px 2px 2px 0 black;
  background-color: white;
}
.thumbnail-carousel__controls__item__button--active {
  background-color: #7FFFD4;
}
.thumbnail-carousel__controls__item__button:hover {
  filter: brightness(80%);
}
.thumbnail-carousel__controls__item__button:active {
  transform: translateY(0%);
  box-shadow: 0px 0px 0 0 transparent;
}
.thumbnail-carousel__left-btn-control, .thumbnail-carousel__right-btn-control {
  display: block;
  position: absolute;
  z-index: 1;
  top: calc(50% - 10px);
  padding: 20px 10px 30px;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: none;
  font-size: 2em;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 0px 0px 0px #7FFFD4;
  transition: 0.3s;
}
.thumbnail-carousel__left-btn-control:hover, .thumbnail-carousel__left-btn-control:active, .thumbnail-carousel__right-btn-control:hover, .thumbnail-carousel__right-btn-control:active {
  font-weight: bold;
  color: #7FFFD4;
}
.thumbnail-carousel__left-btn-control:hover, .thumbnail-carousel__right-btn-control:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.thumbnail-carousel__left-btn-control:active, .thumbnail-carousel__right-btn-control:active {
  transition: 3s;
  background-color: rgba(34, 34, 34, 0.9);
}
.thumbnail-carousel__left-btn-control {
  left: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: none;
}
.thumbnail-carousel__left-btn-control:hover, .thumbnail-carousel__left-btn-control:active {
  box-shadow: inset -4px 0px 2px 2px #7FFFD4;
}
.thumbnail-carousel__left-btn-control:hover {
  padding-right: 20px;
}
.thumbnail-carousel__left-btn-control:active {
  padding-inline: 30px 40px;
}
.thumbnail-carousel__right-btn-control {
  right: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: none;
}
.thumbnail-carousel__right-btn-control:hover, .thumbnail-carousel__right-btn-control:active {
  box-shadow: inset 4px 0px 2px 2px #7FFFD4;
}
.thumbnail-carousel__right-btn-control:hover {
  padding-left: 20px;
}
.thumbnail-carousel__right-btn-control:active {
  padding-inline: 40px 30px;
}

.project-summary {
  margin-block: 10px 20px;
  color: #999;
  font-size: 1.2em;
}

.list-award {
  padding: 0px;
  list-style: none;
  margin-block: 20px 40px;
  margin-inline: 20px 0px;
}
.list-award__item {
  color: #ccc;
  padding: 5px 10px;
  border-left: 2px solid white;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0.2);
}
.list-award__item--icon-1::before {
  content: "🍎 ";
}
.list-award__item--icon-2::before {
  content: "🥇 ";
}
.list-award__item--icon-3::before {
  content: "📰 ";
}
.list-award__item--icon-4::before {
  content: "💪 ";
}

.description {
  color: #999;
  margin-block: 10px;
}
.description--app-feature {
  margin-block: 0px;
}

.app-features {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.app-features__item {
  margin-bottom: 10px;
}

.project-myparts {
  margin: 0px;
  padding-left: 20px;
  list-style: none;
  position: relative;
}
.project-myparts__item {
  color: #999;
  margin-bottom: 10px;
}
.project-myparts__item::before {
  content: "∴";
  position: absolute;
  left: 0px;
  color: white;
}

.external-links {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.external-links__item {
  padding-bottom: 10px;
}