@import "reset.css";
@import "fonts.css";

:root {
  --gap: 1rem;
  --accent: #09A649;
  --background: #F4F4F4;
  --base: 1rem;
  --lg: 1.125rem;
  --xl: 1.45rem;
  --xs: 0.6875rem;
}

.base {
  font-size: var(--base);
}

.lg {
  font-size: var(--lg);
}

.xl {
  font-size: var(--xl);
  line-height: 1.1;
}

.xs {
  font-size: var(--xs);
}

html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

@media (min-width: 70rem) {
  html {
    font-size: 1.25rem;
    font-size: clamp(1.00rem, calc(0.59rem + 0.59vw), 3rem);
  }
}

body {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  color: #000;
}

a:not(.no-style),
a.no-style .link,
form input[type="submit"] {
  color: var(--accent);
  text-decoration: underline;
}

.book.no-style .link {
  color: inherit;
}

.home .news li a {
  color: inherit;
  text-decoration: none;
}

a:not(.no-style):hover,
a:not(.no-style):focus-visible,
a.no-style .link:hover,
a.no-style .link:focus-visible,
form input[type="submit"]:hover,
form input[type="submit"]:focus-visible {
  color: inherit;
}

.book.no-style .link:hover,
.book.no-style .link:focus-visible,
.store .link:hover,
.store .link:focus-visible,
.home .news li a:hover,
.home .news li a:focus-visible {
  color: var(--accent);
}

.headline-and-link {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
}

.invert {
  background-color: #000000;
  color: #fff;
}

.vertical {
  writing-mode: vertical-rl;
  transform: rotateZ(180deg);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.right-with-background {
  background: var(--accent);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

@media (min-width: 50rem) {
  .right-with-background {
    display: block;
  }
}