/* Our default values set as CSS variables */
:root {
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Light/dark modes */
.light {
  --color-bg: #ebeeef;
  --color-text-main: #2e303e;
  --color-primary: #18737b;
  --color-accent: #94195d;
  --color-warn: #d43a58;
}

.dark {
  --color-bg: #2e303e;
  --color-text-main: #ebeeef;
  --color-primary: #25b0bc;
  --color-accent: #ee9fcb;
  --color-warn: #fec81a;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/*********/
/* Links */
/*********/

a:link,
a:visited {
  font-family: var(--font-family);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  border-radius: 1rem;
}

a:after {
  content: " \1f517";
  font-size: 1rem;
}

.dead-link:after {
  content: " \274c";
  font-size: 1rem;
}

/***********/
/* Top nav */
/***********/

#top-nav {
  position: sticky;
  top: 0px;
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--color-bg);
  border-bottom: 4px solid var(--color-accent);
}

#top-nav a:after {
  content: none;
}

.nav-item {
  margin: 1rem 0.5rem;
  padding: 0 0.5rem;
  background: var(--color-bg);
  border: solid var(--color-primary);
  border-radius: 1rem;
  color: var(--color-primary);
  font-size: 1.1rem;
}

@media (hover: hover) {
  .nav-item:hover {
    background: var(--color-primary);
    color: var(--color-bg);
  }
}

/* Remove the handedness toggle on narrow screens */
@media (max-width: 450px) {
  #alignment {
    display: none;
  }
}

/**********/
/* Footer */
/**********/

#footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 0 1rem 0.75rem 1rem;
  width: 100%;
  flex-wrap: wrap;
}

#footer a:visited,
#footer a:link {
  color: var(--color-primary);
  text-decoration: none;
  border-style: none;
}

@media (hover: hover) {
  #footer a:hover {
    background: var(--color-primary);
    color: var(--color-bg);
  }
}

/********/
/* Body */
/********/

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-main);
}

/* WIP banner */
.wip {
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-family);
  padding: 0.05rem 1rem;
  width: 100%;
  border: solid var(--color-warn);
  margin-top: 1rem;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 1rem;
}

main {
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 4px solid var(--color-accent);
  width: 100%;
}

h1 {
  text-align: center;
}

main a:link,
main a:visited {
  color: var(--color-accent);
}

@media (hover: hover) {
  main a:hover {
    background: var(--color-accent);
    color: var(--color-bg);
  }
}

:focus-visible {
  outline: 3px solid var(--color-warn);
}

/* Very light scaling for our title */
.title {
  color: var(--color-accent);
  font-family: var(--font-family);
  font-style: normal;
  font-weight: bold;
  font-size: 6rem;
  line-height: 105%;
  margin: 0;
}

/* Very light scaling for our illustration */
.illustration {
  display: block;
  max-width: 100%;
  max-height: var(--image-max-width);
  margin: var(--image-margin) auto;
}

/* Subheadings */
h2,
h3,
h4 {
  color: var(--color-primary);
  font-size: 2rem;
}