@import url('/new-assets/lib/splide-3.6.9/dist/css/splide.min.css');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-fg: rgb(10, 10, 10);
  --color-bg: rgb(252, 252, 252);
  --color-fg-a: rgb(10, 10, 10, .9);
  --color-gray-light: rgb(200, 200, 200);
  --color-gray-dark: rgb(100, 100, 100);

  --color-link: rgb(50, 50, 50);
  --color-link-hover: rgb(150, 30, 30);
  --color-link-light-hover: rgb(200, 60, 50);
  --color-link-visited: rgb(120, 120, 120);

  --font-site-title: Cantarell, sans-serif;
  --font-primary-400: Manrope, sans-serif;
}

html {
  scroll-behavior: auto !important;
}

li {
  list-style-type: none;
}

img {
  display: block;
}

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

a:visited {
  color: unset;
}

a:hover {
  color: var(--color-link-hover)
}

body {
  font-family: var(--font-primary-400);
  color: var(--color-fg);
  background-color: var(--color-bg);

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#wrapper {
  flex-grow: 1;
}

main {
  margin-left: min(max(0rem, 100vw - 80rem), 10%);
  max-width: 64rem;
  padding: 1.25rem;
  margin-top: 6rem;
}

h1 {
  font-size: clamp(1.5rem, 1rem + 6vw, 3rem);
}

h2 {
  font-weight: 300;
  font-size: clamp(1rem, 1rem + 2vw, 1.75rem);
  margin-bottom: 4rem;
}

h3 {
  font-size: clamp(1.25rem, .85rem + 2vw, 1.625rem);
  margin-bottom: 0;
}

h4 {
  font-size: clamp(.85rem, .5rem + 2vw, 1.325rem);
  margin-bottom: .5em;
  font-weight: 600;
}

p {
  margin: 1em 0;
  font-size: clamp(.85rem, .5rem + 2vw, 1.125rem);
}

.text p {
  font-size: clamp(.85rem, .5rem + 2vw, 1.15rem);
}

hr {
  margin: 2em 0;
  height: 1.25rem;
  border: 0;
  border-bottom: .0625rem solid var(--color-gray-light)
}

footer {
  background: var(--color-fg);
  color: var(--color-bg);
  width: 100%;
  text-align: center;
  letter-spacing: .0625rem;
  padding: .5em;
  margin-top: 3em;
  font-size: .75rem;
}

.caption {
  margin-top: .625rem;
  margin-bottom: 3rem;
  line-height: 1.5;
  font-size: clamp(.85rem, .85rem + 1vw, 1.05rem);
}

#backToTop {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: .5em;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  background-color: #ccc3;
  color: #333;
  text-decoration: none;
  font-size: 1.25rem;
  border-radius: 10px;
  transition: color .125s, background-color .125s, opacity .5s;
  opacity: 0;
}

#backToTop:hover {
  background-color: #ccc7;
  color: #222;
  cursor: pointer;
}

.is-visible {
  opacity: 1 !important;
}