html, body {
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: hide-scroll 5s backwards;
}

@keyframes hide-scroll {
  0% { overflow: hidden; } 
  100% { overflow: auto; }
}

.container {
	
  width: 90%;
  height: 90%;
}

.carousel {
  border: 8px solid rgb(212, 212, 212);
  border-radius: 8px;
}

.carousel-inner, .carousel, .carousel-item {
  transform: scale(0.95,0.95);
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}
.carousel-container {
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;

.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start {
  transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
}

.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end {
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
}

.carousel-indicators {
  top: 0;
  margin: auto;
  height: 20px;
  right: 10px;
  left: auto;
  display: block;
}

.carousel-indicators [data-bs-target] {
  background: none;
  border: 2px solid white;
  border-radius: 12px;
  width: 12px;
  height: 12px;
  margin-bottom: 5px;
}

.carousel-indicators li.active {
  background: white;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  width: 4rem;
  height: 4rem;
  position: fixed;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
}

.carousel-control-prev-icon {
  top: 5%;
}

.unclickable {
  pointer-events: none;
}

.clickable {
  pointer-events: all;
}

.btn-style {
  border-color: white;
  content: url("./images/GitHub-Mark-Light-120px-plus.png");
  width: calc(1.475rem + 2.7vw);
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px;
}

.btn-style:hover {
  background-color: black;
  content: url("./images/GitHub-Mark-Light-120px-plus.png");
  width: calc(1.475rem + 2.7vw);
}

.img-style {
  width: calc(1.475rem + 2.7vw);
}

.img-style:hover {
  width: calc(1.475rem + 2.7vw);
}

.roll-in-blurred-right {
	-webkit-animation: roll-in-blurred-right 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: roll-in-blurred-right 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-2-15 0:50:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-blurred-right
 * ----------------------------------------
 */
 @-webkit-keyframes roll-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) rotate(720deg);
            transform: translateX(1000px) rotate(720deg);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes roll-in-blurred-right {
  0% {
    -webkit-transform: translateX(1000px) rotate(720deg);
            transform: translateX(1000px) rotate(720deg);
    -webkit-filter: blur(50px);
            filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
