.dressup {
  max-width: 400px;
  margin: auto;
  padding: 60px;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 100px;
}

* {
  -ms-overflow-style: none; /* hides the scroll bar*/
}

ol, li {
  list-style: none;  /* makes list items not have numbers*/
  margin: 0;    /*makes list items fill whole carousel class*/
  padding: 0;
}

.carousel {      /*main box everything lives in*/
  position: relative;
  padding-top: 75%;  /*using this to change the shape 
                        of the box (75% makes rectangle*/
}

.carousel__viewport { /*list viewport for slides*/
  position: absolute;  /*girl is NOT moving*/
  top: 0;               /*we are making that very sure*/
  right: 0;            /*shes touching all corners*/
  bottom: 0;
  left: 0;
  display: flex;      /*defines as flex cotainer*/
  overflow-x: scroll; /*makes it so excess content can be scolled to
                        instead of cut off*/
  counter-reset: item;  /*makes a variable called "item" and resets it to 0*/
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;  /*scroll wheel snaps horisontaly*/
}

.carousel__slide:before {
  content: counter(item);      /* sets Sets the content as a counter
                            this can be used to insert the value of the counter
                            before or after other elements*/
                            /*here its just being used to lable the slides*/

  position: absolute;
  top: 50%;
  left: 50%;                                /*position of text*/
  transform: translate3d(-50%,-40%,70px);
  color: #ffffff00;
  font-size: 30px;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center; /*choses where it snaps to */
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;   /*buttons show up next to eachother*/
}

.carousel__navigation-button {  /*little buttons at the bottom*/
  display: inline-block;  /* circles next to eachother*/
  width: 20px;
  height: 20px;
  background-color: #948f8f00;
  border-radius: 50%;
  font-size: 0;  /*hides font*/
}

.carousel::before, .carousel::after,.carousel__prev,.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 50px;
  height: 50px;  
  transform: translateY(-50%);    /*position of arrows*/
  border-radius: 50%;  /*makes a circle*/
  font-size: 0;
}

.carousel::before,    /*positions circle befoe the container box*/
.carousel__prev {
  left: -15px;
}

.carousel::after,    /*positions circle after the container box*/
.carousel__next {
  right: -15px;
}

.carousel::before, .carousel::after { 
  content: '';     /*blank textbox*/
  z-index: 1;       /*shows above carousel*/
  background-color: #827e7e;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;    /*turns your arrow clicky shaped*/ 
}


/*bg images for the buttons below, could maybe change these later*/

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); 
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}