:root {
    --bg: #1c1c1d;
    --text: #a0a0a0;
    --disabled: #727272;
    --highlight: rgb(43, 43, 43);
    --word-webs: rgb(184, 156, 0);
    --analogs: rgb(154, 75, 170);
}

@media (prefers-color-scheme: light) {
    body {
        --bg: white;
        --text: black;
        --disabled:#929292;
        --highlight: rgb(182, 182, 182);
        --word-webs: gold;
        --analogs: rgb(255, 124, 246);
    }
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Roboto Mono', serif;
    gap: 1rem;
    color: var(--text);
    background-color: var(--bg);
}

a {
    color: var(--text);
    text-decoration: none;
}

.foreground {
    stroke: var(--text);
    color: var(--text);
}

.background {
    stroke: var(--bg);
    color: var(--bg);
}

.emphasized {
    border-width: 6px;
    border-color: var(--highlight);
    color: var(--highlight);
    stroke: var(--highlight);
}

.selected {
    border-width: 6px;
}

#carousel {
    margin: 0;
    padding: 0;
    width: 100vw;
    display: flex;
    gap: 4vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    align-items: stretch;
}


/*hide the carousel scroll bar*/
#carousel {
  -ms-overflow-style: none; /* For Internet Explorer/Edge legacy */
  scrollbar-width: none; /* For Firefox */
}
ul::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and newer Edge */
}

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --carousel;
  anchor-name: --scroll-marker-group;
  top: calc(anchor(bottom) + 1rem);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

li::scroll-marker {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: transparent;
  border: 2px solid var(--text);
  border-radius: 50%;
}

li::scroll-marker:target-current {
  background-color: var(text);
}

#carousel li {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex: 1 0 100%;
    scroll-snap-align: center;
}

#instructions li {
    list-style-type: circle;
}

.puzzle, .card, #heading, #instructions {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 20rem;
    margin: 0 auto 0 auto;
    padding: 1rem;
    border-width: 4px;
    border-radius: 1rem;
    border-color: var(--text);
    border-style: solid;
}

#heading {
    background-color: var(--highlight);
}

.analogs {
    background-color: var(--analogs);
}

.word-webs {
    background-color: var(--word-webs);
}

.card.highlight {
    background-color: var(--highlight);
}

@media (prefers-color-scheme: dark) {
    #heading, .analogs, .word-webs{
        color: var(--bg);
        border-color: var(--text);
    }
}

.game {
    position: relative;
    width: 18rem;
    height: 18rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.bonus {
    border: 4px solid var(--highlight);
}

.christmas {
    border: none;
    outline: 4px dashed rgb(0, 68, 0);
    box-shadow: 0 0 0 4px rgb(128, 0, 0);
    margin: 4px auto 4px auto;
}

#instructions ul{
    padding: 0;
    padding-left: 1rem;
}

h1 {
    font-size: 3rem;
    margin: -1rem;
}

h2 {
    margin: 0rem;
}

p {
    font-size: 1rem;
    margin: 0;
    text-align: center;
}

.justify-left {
    text-align: left;
}

.disabled {
    pointer-events: none;
}

button {
    background-color: var(--highlight);
    color: var(--text);
    border: 2px solid var(--text);
    font-size: 1rem;
    font-weight: 900;
    border-radius: 0.5rem;
    padding: 0.25rem 2rem 0.25rem 2rem;
    margin:0.25rem;
    transition:
        opacity 500ms;
}
@media (prefers-color-scheme: dark) {
    button {
        background-color: var(--highlight);
        color: var(--bg);
        border-color: var(--text);
    }
}

button:disabled {
    opacity: 0;
}

:disabled {
    background-color: var(--bg);
    color: var(--text);
    opacity: 1;
}

.label-card {
    position:absolute;
    left: 0px;
    bottom: 0px;
    transform: translate(0, 90%);
    background-color: inherit;
    color: inherit;
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0.75rem 1rem 0.25rem;
    z-index: -1;
    box-shadow: inset 0 24px 8px -16px;
}

:has( > div.label-card) {
    margin-bottom: 1.5rem;
}