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

  --flame: 241, 97, 81;
  --park-green: 32, 84, 62;
  --tile: 146, 88, 64;
  --sapphire: 64, 81, 163;
  --lake: 126, 196, 226;
  --mulberry: 173, 43, 90;
  --lavender: 205, 184, 209;
  --midnight: 17, 26, 42;
  --granite: 234, 235, 231;
  --sand: 234, 220, 201;
  --always-dark: var(--midnight);
  --always-light: var(--granite);

  --header-height: 63px;
  --angle: 30deg;
  --grad-start: 0%;
  --grad-line: 50%;
  --grad-end: 100%;
  --wedge-color:  color-mix(in oklab, var(--secondary-background), var(--background) );
  --wedge-bg: linear-gradient(
  var(--angle), 
  var(--wedge-color) var(--grad-start) var(--grad-line), 
  var(--secondary-background) var(--grad-line) var(--grad-end) 
  );
  /* --wedge-bg: linear-gradient(60deg, color-mix(in oklab, var(--secondary-background), var(--background) ) 0% 33%, var(--secondary-background) 33% 100% ); */
  /* --wedge-bg: linear-gradient(var(--angle), color-mix(in oklab, var(--secondary-background), var(--background) ) 0% 33%, var(--secondary-background) 33% 100% ); */
  /* --wedge-bg: linear-gradient(150deg, color-mix(in oklab, var(--secondary-background), var(--background) ) 0% 33%, var(--secondary-background) 33% 100% ); */
  /* --wedge-bg: linear-gradient(30deg, color-mix(in oklab, var(--secondary-background), var(--background) ) 0% 33%, var(--secondary-background) 33% 100% ); */


  --surface-2: color-mix(in oklab, var(--secondary-background) 76%,  var(--background));
  --header-filter: blur(3px) ;
}
body.dark{

  /* --header-filter: blur(9px) saturate(2) brightness(0.5); */
  --primary-rgb: var(--granite);
  --primary-color: rgb(var(--granite));
  --secondary-color: rgb(var(--lavender));
  --bg-rgb: var(--sapphire);
  --background: rgb(var(--sapphire));
  --sbg-rgb: var(--midnight);
  --secondary-background: rgb(var(--midnight));
  --surface: rgba( var(--midnight), 0.76 );
  --border: rgb( var(--lavender) );
  --text-primary: rgb(var(--granite));
  --text-secondary: rgb( var(--lavender) );
  --accent: rgb( var(--lavender) );
}
body:not(.dark){
  /* --header-filter: blur(9px) saturate(2) brightness(1.3); */
  --primary-rgb: var(--midnight);
  --primary-color: rgb(var(--midnight));
  --secondary-color: rgb(var(--mulberry));
  --bg-rgb: var(--lavender);
  --background: rgb(var(--lavender));
  --secondary-background: rgb(var(--granite));
  --surface: rgba( var(--granite), 0.76 );
  --border: rgb( var(--sapphire) );
  --text-primary: rgb(var(--midnight));
  --text-secondary: rgb( var(--mulberry) );
  --accent: rgb( var(--sapphire) );
}

@font-face {
  font-family: "flecha-m";
  src:
  url("/fonts/FlechaM-Regular.woff") format("woff"),
  url("/fonts/FlechaM-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "signifier";
  src:
  url("/fonts/Director-Regular.woff") format("woff"),
  url("/fonts/Director-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "styrene";
  src:
  url("/fonts/StyreneB-Regular-Web.woff") format("woff"),
  url("/fonts/StyreneB-Regular-Web.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "signifier-bold-italic";
  src: url("/fonts/signifier-bold-italic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "signifier-bold";
  src: url("/fonts/signifier-bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "signifier-medium-italic";
  src: url("/fonts/signifier-medium-italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "signifier-medium";
  src: url("/fonts/signifier-medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "signifier-italic";
  src: url("/fonts/signifier-regular-italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "signifier";
  src: url("/fonts/signifier-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: 'signifier-medium';
  font-family: 'signifier';
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body {
  background-color: var(--secondary-background);
  min-width: 100vw;
  width: 100vw;
  overflow-x: hidden;
}
/* .main { */
/*   overflow-x: scroll; */
/* } */

.main, body, .media-root  {
  background-image: var(--wedge-bg); 
  background-attachment: fixed;
}


h1, h2 {
  font-family: 'flecha-m';
}
h3, h4, h5, h6 {
  font-family: 'styrene';
}
a {
  color: inherit;
  text-decoration: none;
}

.media-description a, .link-lines {
  text-decoration: none;
  color: currentcolor;
  background: linear-gradient( to right, color-mix(in oklab, currentcolor 40%, transparent), color-mix(in oklab, currentcolor 40%, transparent) ), linear-gradient(to right, currentcolor, currentcolor);
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  background-size: 100% 0.1rem, 0 0.1rem;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms;
}
.media-description a:hover, .media-description a:focus,
.link-lines:hover, .link-lines:focus {
  background-size: 0 0.1rem, 100% 0.1rem;
}

.hidden { display: none;}


/* newberry-logo */
/* needs: --text-primary, --text-secondary, and a font path matching /fonts/styrene... */
@font-face {
  font-family: "styrene";
  src:
  url("/static/fonts/StyreneB-Regular-Web.woff2") format("woff2"),
  url("/static/fonts/StyreneB-Regular-Web.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.newberry-logo {
  --hover-color: var(--text-secondary);
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 3px;
  & * {
    transition: 300ms;
  }
}

svg, text, path {
  fill: var(--text-primary);
}
a:hover :is(svg, path, text) {
  fill: var(--hover-color);
}
a {
  text-decoration: none;
  color: var(--text-primary);
}
a:hover {
  color: var(--hover-color);
}
#dc-text {
  font-family: 'styrene';
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  & span {
    line-height: 1rem;
    position: relative;
  }
}
@media screen and (max-width: 600px){
  #dc-text {
    display: none;
  }
}