@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --tamyo-font-base: 'Quicksand', sans-serif;
  --tamyo-color-text: #888;
  --tamyo-color-white: #fff;
  --tamyo-color-scroll-track: #19394b;
  --tamyo-color-accent-scroll: #E8AA01;
  --tamyo-color-accent-link: #e8aa00;
  --tamyo-color-accent-strong: #e8aa01;
  --tamyo-color-accent-line: #ffd42d;
  --tamyo-color-border-light: #ededed;
  --tamyo-color-outline-light: #f8f8f8;
  --tamyo-color-gallery-border: rgba(230, 230, 230, 0.72);
  --tamyo-shadow-soft: 0 0 5px rgba(0, 0, 0, 0.1);
  --tamyo-font-size-body: 16px;
  --tamyo-font-size-heading: 18px;
  --tamyo-line-height-heading: 1.2;
}

/* Global scrollbar colors */
html,
body {
  scrollbar-color: var(--tamyo-color-accent-scroll) var(--tamyo-color-scroll-track);
  scrollbar-width: auto;
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: var(--tamyo-color-scroll-track);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
html::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-track-piece,
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: var(--tamyo-color-scroll-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background-color: var(--tamyo-color-accent-scroll);
  border: 2px solid var(--tamyo-color-scroll-track);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--tamyo-color-accent-scroll);
}

/* Running text typography */
body,
p,
li,
blockquote,
td,
th,
label {
  font-family: var(--tamyo-font-base);
  font-weight: 400;
  font-style: normal;
  font-size: var(--tamyo-font-size-body);
  color: var(--tamyo-color-text);
}

body {
  -webkit-font-smoothing: antialiased;
  line-height: 2;
}

h2 {
  font-family: var(--tamyo-font-base);
  font-weight: 300;
  font-style: normal;
  font-size: var(--tamyo-font-size-heading);
}

h3 {
  font-family: var(--tamyo-font-base);
  font-weight: 700;
  font-style: normal;
  font-size: var(--tamyo-font-size-heading);
}

h1,
h2,
h3 {
  line-height: var(--tamyo-line-height-heading);
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--tamyo-color-text);
}