@charset "UTF-8";

*, *:before, *:after {
  vertical-align: baseline;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-background);
  @supports (min-height: 100dvh) {
    min-height: 100dvh;
  }
}

main {
  flex: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}

a[target="_blank"],
[type="submit"] {
  display: inline-flex;
  flex-wrap: nowrap;
  &:focus,
  &:hover {
    font-style: italic;
  }
}

a {
  text-decoration: none;
  color: inherit;
  p & {
    position: relative;
    display: inline-block;
    &:after {
      display: block;
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: var(--color-text-active);
      bottom: 0;
      left: 0;
    }
    &:hover,
    &:focus {
      font-style: italic;
      color: var(--color-text-active);
      &:after {
        display: none;
      }
    }
  }
  &:visited {
    color: inherit;
  }
}

p {
  max-width: var(--max-width-paragraph);
}

summary,
button {
  cursor: pointer;
}

details summary::-webkit-details-marker {
  display:none;
}

button {
  font-size: inherit;
  background-color: transparent;
  &[type="submit"] {
    color: var(--color-text-link);
  }
}

input {
  font-size: inherit;
  color: var(--color-text-link);
  background-color: transparent;
  &::placeholder {
    color: var(--color-text-link);
  }
  &:focus {
    outline: none;
    color: var(--color-text-main);
  }
}

img[data-defer-src],
img[data-defer-loading] {
  display: none;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  grid-template-rows: var(--grid-template-rows);
  align-items: start;
}

.grid__column {
  position: sticky;
  top: var(--height-header, 0);
}

.content {
  grid-row: 1 / -1;
  grid-column: 2 / -2;
  position: sticky;
  top: 0;
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.default-page {
  grid-column: 1 / -1;
  padding: var(--width-gutter);
}

@media (scripting: none) {
  .js-only {
    display: none;
  }
}