@charset "UTF-8";
@import url('/static/stylesheets/colors.css');
@import url('/static/stylesheets/marquee.css');
@import url('/static/stylesheets/scrollbar.css');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
  font-display: block;
  font-family: "Windows Regular";
  src: url(/static/fonts/windows-regular.ttf) format("truetype");
}

@font-face {
  font-display: block;
  font-family: "Diatype Variable";
  src: url(/static/fonts/diatype-variable.ttf) formaat("truetype");
}

:root {
  --cursor-size: 32;
  --color-100: #f5f5f5;
  --color-200: #ebebeb;
  --color-300: #cecece;
  --color-400: #a6a6a6;
  --color-500: #898989;
  --color-primary: #18187a;
  --color-secondary: #7d003e;
}

html {
  height: 100vh;
  background-color: var(--color-200);
  cursor: url("/static/images/cursors/question.png") calc(var(--cursor-size) / 2) 0, auto;
}

a, button, svg {
  cursor: url("/static/images/cursors/exclaim.png") calc(var(--cursor-size) / 2) 0, auto;
}

a.link {
  color: var(--color-primary);
  text-decoration: underline;
}

button, a.link:hover {
  color: var(--color-secondary);
  text-decoration: underline wavy;
}

a > img:hover {
  filter: opacity(70%) brightness(105%);
}

p, b, i, h1, h2, h3, h4, h5, h6 {
  font-family: "Diatype Variable", "Rubik", sans-serif;
}

#content > div { height: 100vh; }

.type {
  font-weight: 500;
  letter-spacing: 0.1em;
  font-family: "Windows Regular", sans-serif;
}

span > img {
  margin-bottom: 0.2rem;
  padding: 0;
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

.scrolling-container {
  overflow-x: auto;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.horizontal-scroll {
  overflow: auto;
  white-space: nowrap;
}

.gallery-image {
  margin-bottom: 0.5rem;
  height: auto;
  max-width: 100%;
  border-radius: 0.5rem;
}

/* .gallery-image:hover {
  filter: opacity(70%) brightness(105%);
  cursor: url("/static/images/cursors/zoom.png") calc(var(--cursor-size) / 2) 0, auto;
} */