/* based on normalize.css v8.0.1 | MIT License | https://github.com/necolas/normalize.css but added/changed a few things: marked "// EXTRA: or // INFO"
 */
html {
  /* LAST checked:  2023-08-08 15:08:27 +02:00 */
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  /* LAST checked:  2023-08-08 15:21:58 +02:00 */
  margin: 0;
}

main {
  display: block;
  /* INFO: Kept for old browsers. Does not need checking anymore. 2023-08-08 17:47:08 +02:00 */
}

h1 {
  /* TODO: Check nested sections with h1 hieranchy. Think there is a render or accesibility issue. 2023-08-08 15:24:57 +02:00 */
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  /* TODO: test the above 2023-08-07 21:52:14 +02:00 */
  -webkit-appearance: textfield;
  outline-offset: -2px; /* 2 */
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

picture {
  display: block;
}

/**
*
* Usage:
*
* Use any Webfont you like. Public Sans is the better
* match for San Francisco. Inter is ok-ish. Trying to replicate
* San Francisco more by changing Inter axis gives a poor result
* across browsers.
*
* Options
* -------
*
* The same webfont everywhere, with a fallback to system-ui, sans-serif
* ==> font-family: 'Public Sans', system-ui, sans-serif;
*
* San Francisco on Apple Devices, webfont everwhere else,
* and a fallback to system-ui, sans-serif
* ==> font-family: -apple-system, BlinkMacSystemFont, 'Public Sans', system-ui, sans-serif;
*
*
* System font everywhere with fallback to sans-serif
* (If you don't need consistency across all browsers)
* ==> font-family: system-ui, sans-serif;
*
*/
/* TODO: Move color vars to somewhere. 2023-07-18 00:56:31 +02:00 */
/* TODO: different settings for links in p and links in h? . 2023-07-18 00:38:51 +02:00 */
/* TODO: move to KBD section. 2023-07-18 00:50:23 +02:00 */
.row {
  width: 100vw;
  display: flex;
  justify-content: center;
}
.row-inner {
  max-width: 1000px;
  width: 1000px;
  margin-inline: 1rem;
  height: 100%;
  display: flex;
}

body {
  position: relative;
}

a {
  /* TODO: Move all focus rules to a separate section. 2023-07-17 23:44:30 +02:00 */
  /* &:focus {
      // border-radius: 0.1rem;
      // outline-offset: 2px;
      // outline: 1px solid;
  } */
}
a:not([href]):hover, a:not([href]):active {
  text-decoration: none;
  color: unset;
}
a:-webkit-any-link {
  text-decoration: none;
  color: #c17f53;
  font-weight: 300;
}
a:-moz-any-link {
  text-decoration: none;
  color: #c17f53;
  font-weight: 300;
}
a:any-link {
  text-decoration: none;
  color: #c17f53;
  font-weight: 300;
}
a:visited {
  color: #c17f53;
}
a:active {
  color: #c17f53;
}
a:hover {
  text-decoration: underline;
}

#nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 64px;
  background: hsl(0, 0%, 100%);
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
#nav .row-inner {
  align-items: center;
}

#head {
  height: 70vh;
  background-image: url(/images/bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#head .row-inner {
  display: flex;
  flex-direction: column;
  padding-block: 8vh;
  justify-content: flex-end;
}
#head p {
  color: hsl(0, 0%, 100%);
}

h1 {
  font-size: clamp(3.3rem, 12vw, 6rem);
  line-height: 0.85;
  color: hsl(0, 0%, 100%);
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0.03em 0.03em 5px rgba(0, 0, 0, 0.5);
}
h1 .dark {
  color: #f1c9b2;
}

.content {
  display: flex;
}
.content .pdf {
  padding: 2rem;
  width: 175px;
}
.content .pdf img {
  width: 100%;
  opacity: 0.9;
  transition: -webkit-transform 200ms ease;
  transition: transform 200ms ease;
  transition: transform 200ms ease, -webkit-transform 200ms ease;
}
.content .pdf img:hover {
  opacity: 1;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.download {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding-block: 1rem;
  padding-inline: 2rem;
  color: hsl(0, 0%, 100%) !important;
  background-color: #c17f53;
  border: none;
  border-radius: 2rem;
  font-weight: 600 !important;
  margin-block: 2rem;
  text-decoration: none;
  transition: background-color 100ms;
}
.download:hover {
  text-decoration: none !important;
  background-color: #ac6f46;
}

.more {
  font-weight: 600;
  display: block;
  -webkit-margin-start: 1rem;
          margin-inline-start: 1rem;
}
.more a {
  font-weight: 600 !important;
}

@media screen and (max-width: 600px) {
  #head {
    height: 60vh;
    background-image: url(/images/bg-mobile.jpg);
  }
  .content .start {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .content .more {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 450px) {
  #head {
    height: 60vh;
    background-image: url(/images/bg-mobile.jpg);
  }
  .content {
    display: block;
  }
  .content .pdf {
    width: 100%;
  }
}
html {
  quotes: auto;
  box-sizing: border-box;
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
  text-rendering: geometricPrecision;
  /* TODO: <html> rules: check the following rules. 2023-07-19 17:36:36 +02:00 */
  font-synthesis: none;
  -webkit-font-feature-settings: "kern";
          font-feature-settings: "kern";
  -moz-osx-font-smoothing: grayscale;
  /* TODO: why? what is the default and is ot different in some browsers? Can it be set by the user? Is it better for UX to have a standard color? 2023-07-19 17:37:48 +02:00 */
  font-size: 1em;
  /* REMARK: Font-sizes smaller than 16px cause 'focus' zoom on iOS Safari when a form element is in focus. This is bad user experience. Most browsers use 16px as default font-size, but the user can set a minimum size or make it smaller or larger. Setting a fixed size if 16px as the base font breaks that functionality. 2023-07-19 17:40:17 +02:00 */
  color: hsl(0, 0%, 5%);
  scroll-behavior: auto;
}
html ::-moz-selection {
  background-color: hsla(211, 97%, 85%, 0.75);
  text-shadow: none;
}
html ::selection {
  background-color: hsla(211, 97%, 85%, 0.75);
  text-shadow: none;
}
*,
*:before,
*::before,
*:after,
*::after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}