:root {
  --border-radius: 0;
  --color-button-line: #000000; /* hsl(19, 50%, 40%) 0 0) */
  --color-border-line: #000000;
  --color-button-background: transparent; /* #d9d9d9; */
  --color-links: hsl(40, 60%, 30%);
}

body {
  /* background-image: url('../images/back1.png'); */
  background: #eee linear-gradient(135deg, #eee 0%, #ddd 100%);
}

.layout-container {
  background-color: #faefed;
  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
}

a {
  color: var(--color-links);
}

.media.media--type-image {
  /* filter: grayscale(100%) sepia(1) hue-rotate(-90deg) saturate(50%); */
  filter: grayscale(100%) sepia(0.5);
}

a:hover {
  text-decoration: underline;
}

audio {
  border-radius: 2rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/*noinspection CssReplaceWithShorthandSafely*/
.view-sounds .views-row,
.view-biographies .node--type-biography {
  border: 15px solid transparent; /* invisible space */
  outline: 2px solid #000;
  outline-offset: -10px; /* first box */
  background: linear-gradient(var(--color-border-line) 0 0) top,
  linear-gradient(var(--color-border-line) 0 0) left,
  linear-gradient(var(--color-border-line) 0 0) bottom,
  linear-gradient(var(--color-border-line) 0 0) right;
  background-size: 200% 2px, 2px 200%; /* second box */
  background-origin: padding-box;
  background-repeat: no-repeat;
}

.page-title,
.block-views > h2 {
  background: transparent url('../images/triple.svg') no-repeat bottom;
  background-size: min(90vw, 40rem) auto;
  height: 8rem;
}

/*noinspection CssReplaceWithShorthandSafely*/
.region-primary-menu .menu--main ul.menu li.menu-item:has(a.is-active),
.region-primary-menu .menu--main ul.menu li.menu-item--active-trail,
.region-primary-menu .menu--main ul.menu li.menu-item {
  border: 11px solid transparent; /* background width and colour for border to fit in */
  outline: 2px solid var(--color-button-line); /* first box */
  outline-offset: -7px; /* first box distance from each edge */
  background: linear-gradient(var(--color-button-line) 0 0) top,
  linear-gradient(var(--color-button-line) 0 0) left,
  linear-gradient(var(--color-button-line) 0 0) bottom,
  linear-gradient(var(--color-button-line) 0 0) right,
  var(--color-button-background);
  background-size: 120% 2px, 2px 200%; /* second box. horizontal line length, width, vertical line width, length */
  background-origin: padding-box;
  background-repeat: no-repeat;
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
}

.region-primary-menu .menu--main ul.menu li.menu-item--active-trail a {
  color: black;
}


.site-name a {
  color: #000000;
}


.block-page-title-block {
  background-color: transparent;
}

.title-bar-left, .title-bar-right {
  background: none;
}

audio {
  filter: grayscale(100%) sepia(1) hue-rotate(-90deg) saturate(50%);
}