@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');
/* @import url('https://fonts.googleapis.com/css?family=Work+Sans:wght@100..900|Rubik:wght@100..900|Barlow:wght@100..900|League+Spartan:wght@100..900&display=swap'); */

* {
  box-sizing: border-box;
}

/* color definitions */
:root {
  --color-background: #cac8c4;
  /* --color-background: #ec5f39; */
  /* --color-background: #e56744; */
  --color-text: #000000;
  --color-primary: #cf4e2a;
  --line-color: var(--color-text);
  /* --line-color: rgba(0, 0, 0, 0.2); */
  --line-width: 2px;
  --spacing: 1rem;
  --small-spacing: calc(var(--spacing) / 2);
}
html {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: 'Work Sans', sans-serif;

  /* -webkit-font-smoothing: antialiased; */

}

body {
  margin: var(--spacing);
}

a, a:visited, a:active, a:hover {
  color: var(--color-text);
}

audio {
  /* filter: invert(22%) sepia(100%) saturate(100%) contrast(99%) invert(12%) hue-rotate(120deg) brightness(50%) invert(0%) saturate(100%); */
  /* filter: invert(100%) sepia(100%) saturate(100%) contrast(99%) invert(12%) hue-rotate(120deg) brightness(80%) invert(20%) saturate(100%); */
  mix-blend-mode: multiply;
  /* filter: invert(100%); */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'League Spartan', sans-serif;
  /* font-variation-settings: 'wght' 900; */
  font-weight: 600;

  a {
    text-decoration: none;
  }
}


#header, h1#logo {
  font-size: 2rem;
  /* animate font weight */
  font-variation-settings: 'wght' 500;
  animation: oscillateFontWeight 5s infinite alternate ease-in-out;
  margin: 0;
  a {
    text-decoration: none;
  }
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing);
}

@keyframes oscillateFontWeight {
  from {
    font-variation-settings: 'wght' 500;
  }
  to {
    font-variation-settings: 'wght' 900;
  }
}

h1 {
  margin: 0 0 0.3em 0;
}
h2 {
  margin: 0.75em 0;
}
h3 {
  font-size: 1.25rem;
  margin: 0.5em 0;
}
h4, h5, h6 {
  margin: 0.5em 0;
}

p {
  text-align: justify;
  word-wrap: break-word;
}


hr {
  border: 1px solid var(--color-text);
}

.data {
  font-family: monospace;
  text-align: right;
}


/* TODO: clean up */

table.channels {
  border-spacing: var(--spacing) var(--small-spacing);
  a {
    text-decoration: none;
  }
}

img {
  display: inline-block;
  /* max-width: 40%; */
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  &:hover {
    filter: none;
    mix-blend-mode: normal;
  }
}

p, h1, h2, h3, h4, h5, h6, .date {
  filter: grayscale(100%); /* emoji monochrome */
  mix-blend-mode: multiply;
}

form {
  max-width: 60em;

  label {
    font-family: "League Spartan", sans-serif;
    /* font-size: 1.5rem; */
    font-weight: 700;
    text-transform: uppercase;
  }

}
input, select, button {
  display: block;
  width: 100%;
  margin-bottom: var(--small-spacing);
  /* background-color: var(--color-text); */
  background-color: color-mix(in srgb, var(--color-background), var(--color-text) 60%);
  color: var(--color-background);
  border: none;
  padding: var(--small-spacing);
  margin: var(--small-spacing) 0;
  font-size: 1.3rem;
  border-radius: 0.3em;
}