/* * {
  box-sizing: border-box;
} */

/* body {
  background-color: antiquewhite;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
} */

.qualityCheck {
    display: none;
}

.project div{
    margin: 100px auto;
    max-width: 1080px;
}

.logo{
  max-height: 64px;
  max-width: 64px;
}

article{
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}


h1 {
  text-align: center;
  font-size: 1.7rem;
}
ul {
  max-width: 1080px;
  max-height: 800px;
  padding: 20px;
  display: flex;
  gap: 4vw;
}
li {
  list-style-type: none;
  /* background-color: #eeeeee; */
  /* border: 1px solid #dddddd; */
  padding: 20px;

  flex: 0 0 100%;
}

/* li:nth-child(even) {
  background-color: cyan;
} */
ul {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
li {
  scroll-snap-align: center;
}


ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

ul {
  anchor-name: --my-carousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}