.workbench-<uniquifier> {
  font-family: "Workbench", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "BLED" 0,
    "SCAN" 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
background-color: black;
padding: 1.5%;
padding-bottom: 70px;
overflow-x: hidden;
}

img {
    display: block;
    max-inline-size: 100%;
}

h1 {
color: rgb(0, 0, 0);
font-family: 'Workbench', sans-serif;
font-size: clamp(1rem, 3rem, 4rem);
position: fixed;
background-color: rgb(217, 255, 0);
padding: 10px;
}

h2 {
color: white;
font-size: 1.5em;
font-family: 'Verdana', sans-serif;
}

h3 {
color: white;   
font-size: 1.2em;
font-family: 'Georgia', serif;
font-weight: normal;
}

p {
color: white;
font-size: 1.2em;
font-family: 'Verdana', sans-serif;
}

p-2 {
color: white;
position: fixed;
font-family: 'Workbench', sans-serif;
font-size: 1em;
text-align: justify;
text-justify: inter-word;
bottom: 5%;
}

a {
color: rgb(230, 0, 153);  
}

a:hover {
color: rgb(217, 255, 0);
}

ul {
  width: 94.5vw;
  height: 100%;
  padding: 20px;
  display: flex;
  gap: 4vw;
}

li {
  list-style-type: none;
  background-image: url("../img/stars/skch_pg.png");
  border: 1px solid rgb(0, 0, 255);
  padding: 20px;
  max-width:300px;

  flex: 0 0 100%;
}

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: rgb(255, 0, 234);
  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: "◄" / "Previous";
}

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

*/

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(bottom) + 30%);
}

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

.columns {
  column-count: 3;
  column-gap: 40px;
  column-fill: balance;
}

.grow {
  transition: all 0.3s ease-in-out;
}

.grow:hover {
  transform: scale(1.3);
}

.shrink {
  transition: all 0.2s ease-in-out;
}

.shrink:hover {
  transform: scale(0.9);
}

.bright {
  transition: all 0.5s ease-in-out;
}

.bright:hover {
  filter: brightness(1.2);
}

.noHover{
    pointer-events: none;
}

/* CSS Styling */
.invert-hover {
  /* Smooth transition effect */
  transition: filter 0.5s ease; 
}

.invert-hover:hover {
  /* Inverts the colors completely */
  filter: invert(100%) brightness(0.85) contrast(1.15); 
}