/* Fonts */
@font-face {
  font-family: "PP Supply Sans";
  font-display: swap;
  font-style: normal;
  font-weight: normal;
  src: url("fonts/ppsupplysans-regular.woff2") format("woff2");
}

@font-face {
  font-family: "PP Supply Sans";
  font-display: swap;
  font-style: normal;
  font-weight: bold;
  src: url("fonts/ppsupplysans-bold.woff2") format("woff2");
}

@font-face {
  font-family: "PP Supply Mono";
  font-display: swap;
  font-style: normal;
  font-weight: normal;
  src: url("fonts/ppsupplymono-regular.woff2") format("woff2");
}

@font-face {
  font-family: "PP Supply Mono";
  font-display: swap;
  font-style: normal;
  font-weight: bold;
  src: url("fonts/ppsupplymono-bold.woff2") format("woff2");
}

@font-face {
  font-family: "PP Object Sans";
  font-display: swap;
  font-style: normal;
  font-weight: normal;
  src: url("fonts/ppobjectsans-regular.woff2") format("woff2");
}

@font-face {
  font-family: "PP Object Sans";
  font-display: swap;
  font-style: normal;
  font-weight: bold;
  src: url("fonts/ppobjectsans-bold.woff2") format("woff2");
}

@font-face {
  font-family: "PP Object Sans";
  font-display: swap;
  font-style: italic;
  font-weight: normal;
  src: url("fonts/ppobjectsans-slanted.woff2") format("woff2");
}

@font-face {
  font-family: "PP Object Sans";
  font-display: swap;
  font-style: italic;
  font-weight: bold;
  src: url("fonts/ppobjectsans-boldslanted.woff2") format("woff2");
}

/* Variables */
:root {
  --bg-color-light: oklch(0.9845 0.0026 106.45); /* #fafaf8 */
  --text-color-light: oklch(0.2178 0 0); /* #1a1a1a */
  --bg-color-dark: oklch(0.2178 0 0); /* #1a1a1a */
  --text-color-dark: oklch(0.9845 0.0026 106.45); /* #fafaf8 */
  --skip-link-bg-color: oklch(0.898694 0.185667 97.8573); /* #ffdd00 */
  --selection-bg-color: oklch(0.549303 0.219574 14.5923); /* rgb(210, 0, 71) */
}

::selection {
  background: var(--selection-bg-color);
  color: #fff;
}

/* Skip to main content link */
.skip-link {
  display: block;
  padding: 0.5rem;
  color: #1a1a1a;
}

.skip-link:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.skip-link:focus {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  outline: 3px solid var(--skip-link-bg-color);
  outline-offset: 0;
  background-color: var(--skip-link-bg-color);
}

@media (forced-colors: active) {
  .skip-link:focus {
    outline-offset: -3px;
  }
}

.skip-link-target:focus {
  outline: none;
}

/* Main styles */
body {
  min-height: 100dvh;
  margin: 0;
  background: url("st-ives-contour-map-white.svg") bottom left / cover no-repeat fixed var(--bg-color-light);
  color: var(--text-color-light);
  font-family: "PP Object Sans", sans-serif;
  cursor: url("cursors/arrow.png") 7 8, default;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "PP Supply Sans", sans-serif;
  font-weight: normal;
  cursor: url("cursors/beam.png") 16 16, text;
}

code, kbd, pre, samp {
  font-family: "PP Supply Mono", monospaced;
}

header, footer {
  width: 100%;
}

header {
	padding: 2rem 0;
  text-align: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  h1 {
    margin: 0;
    font-size: 4rem;
  }
}

main {
  margin: 2rem auto;
  width: 100%;
  max-width: 80ch;
  line-height: 1.75;

  .subhead {
    font-size: 1.5rem;
    text-align: center;
  }
}

p {
  cursor: url("cursors/beam.png") 16 16, text;
}

a {
  text-decoration: underline;
  text-underline-offset: 0.1rem;
  cursor: url("cursors/hand.png") 6 0, pointer;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--bg-color-dark);
    background-image: url("st-ives-contour-map-black.svg");
    color: var(--text-color-dark);
  }
}