* {
  box-sizing: border-box;
  font-family: "Titillium Web", sans-serif;
  font-weight: 200;
  font-style: normal;
}

img {
  width: 256px;
  height: 200px;
}

body {
  margin: 0px;
  padding: 4vw;
  background-color: black;
  color: white;
  font: serif;
  
}

h1 {
  color: #afa;
  text-align: center;
  font-size: 1.7em;
  line-height: 0.05;
  
  font-weight: 500;
}

h2 {
  color: #efe;
  font-size: 0.7rem;
  font-style: italic;
  
}

h3 {
  color: #dfd;
  font-size: 1em;
  font-weight: 300;
  
}

.display_grid {
  display: grid;
}

div {
  display: inline-block;
  border: 1px white solid;
  padding: 12px;
}

div.carosel {
  width: 100px;
}
div.carosel_writing {
  background-color: white;
}

ul {
  width: 3vw;
  height: 3vh;
  display: flex;
  padding: 3dvh; /* distance from left side of screen */
  gap: 6vw; /* distance each element are from each other */
}

ul {
  width: 100vw;
  height: 300px;
  padding: 20px;
  display: flex;
  gap: 4vw;
}
li {
  list-style-type: none;
  border: 1px solid #dddddd;
  padding: 20px;
  scroll-snap-align: center;

  flex: 0 0 100%;
}

ul {
  anchor-name: --my-carousel;
  overflow-x: scroll;
  scroll-snap-type: x mandatory; /* snaps scrolling when letting go */
}
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 { /* arrows become opaque when hovering or clicking */
  opacity: 1;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}
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::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);
}
ul {
  scroll-marker-group: after;
}
ul::scroll-marker-group {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;

  display: flex;
  justify-content: center;
  gap: 20px;
}
li::scroll-marker {
  content: "";
  width: 20px;
  height: 20px;
  background-color: red;
  border: 2px solid black;
  border-radius: 50%;
}
li::scroll-marker:target-current {
  background-color: #808;
}
/*

div.big {
  text-align: justify;
  width: 300px;
}

div.carosel {
  text-align: justify;
  border: 3px orange dotted;
  width: 300px;
}

.stretch { 
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
*/