:where(a):where([href]) {
  text-decoration-color: var(--sand-8);
}

:where(a):where([href]):where(:visited) {
  text-decoration-color: var(--sand-6);
}

:where(hr) {
  margin-block: var(--size-fluid-2);
}

:where(input,button,textarea,select,li, img, video), :where(input[type=file])::-webkit-file-upload-button {
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 2px 2px 0 0 #333;
  word-break: break-all;
  cursor: pointer;
}

:where(input:hover, button:hover, textarea:hover, select:hover, li:hover, img:hover, video:hover) {
  box-shadow: none;
  transition: box-shadow 0.2s ease-in;
}

#CommanPallete {
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 2px 2px 0 0 #333;
  word-break: break-all;
  cursor: pointer;
}

#CommanPallete:hover {
  box-shadow: none;
  transition: box-shadow 0.2s ease-in-out;
}


:where(img, svg, video) {
  background-color: var(--surface-2);
  border-radius: var(--size-1);
}

:where(td, th) {
  word-break: break-word;
}

@media (prefers-color-scheme: dark) {
  :where(html) {
    --brand-dark: var(--sand-3);
    --text-1: var(--sand-2);
  }
}

.content {
  width: 80%;
  margin-bottom: var(--size-2);
}

iframe {
  margin-bottom: var(--size-4);
}

li {
  list-style: none;
  margin-bottom: var(--size-2);
  padding: var(--size-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-button-group {
  display: flex; 
  flex-direction: row; 
  gap: var(--size-1);
} 
.toggle-button-group button {
  border-radius: 8px;
}

.toggle-button-group button.selected {
  border: 4px solid var(--sand-4);
  box-shadow: 2px 2px 0 0 var(--sand-4);
}

.projects ul li.selected {
  border: 4px solid var(--sand-4);
  box-shadow: 2px 2px 0 0 var(--sand-4);
}

span.count {
  background-color: var(--gray-8);
  padding: var(--size-2);
  color: var(--gray-4);
  border-radius: var(--radius-blob-5);
}