@charset "UTF-8";
@media (prefers-color-scheme: light) {
  :root {
    --b:#FFFFFF;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --b:#23214c;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --b:#FFFFFF;

}

[data-theme="dark"] {
 color-scheme: dark;
 --b:#23214c;
}

@media (prefers-reduced-motion: no-preference){
.theme-icon:active{
}
}
body {
  background-color: var(--b);

}
.toggle{
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

hr {border: 1px dashed #73729f;}

.o {margin: 10px 0 5px 10px;}

button {
  float: right;
  margin: 10px 10px 5px 0px;
  cursor: pointer;
}

figure {margin:0px;}

ul{list-style: none;
  margin-left: 0px;
    /* set to 0 if you're not using a list-style-type */
    padding-left: 0px;
}

#main-gallery, ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

#main-gallery img {
    width: 100%;
    height: auto;
}