/* Common stying for basic HTML elements */

* {
  box-sizing: border-box;
}

html {
  /* Set the font size to equivalent of 20px */
  font-size: 125%;
}

body {
  --bs-link-color: var(--color-raspbery);
  font-family: var(--font-family-sans);
  line-height: 1.65;
  font-size: 0.8rem;
  color: var(--color-dk-grey);
}

h1, h2, h3, h4 {
  font-weight: 700;
  margin-bottom: 1.2rem;
}

h1 {
  font-size:  clamp(1.5rem, calc(1.5rem + .9vw), 2.25rem);
}

.h2, h2 {
  font-size: clamp(1.2rem, calc(1.325rem + .9vw), 1.4rem);
}

.h3, h3 {
  font-size: clamp(1.1rem, calc(1.1rem + .5vw), 1.3rem);
  font-weight: 500;
}

a {
  color: var(--link-color);

  &:is(:hover) {
    color: var(--link-hover-color);
  }
}

.text-formatted a:not(.btn) {
  transition: background-color .3s, color .3s;

  &:is(:hover) {
    background-color: var(--color-yellow);
  }
}

img {
  max-width: 100%;
  height: auto;
}

/* Tables */

th {
  font-weight: 500;
}

figcaption,
table caption {
  background-color: var(--color-lt-grey);
  font-size: .9em;
  padding: 0.2rem 0.5rem;
}

/* Lists */
ol, ul{
  ::marker {
    color: var(--color-raspberry);
    font-weight: bold;
  }
}

ol {
  list-style-type:decimal;
  ol {
    list-style-type:lower-latin;
    ol {
      list-style-type:lower-roman;
      ol {
        list-style-type:upper-latin;
        ol {
          list-style-type:upper-roman;
        }
      }
    }
  }
}

ul {
  list-style-type:disc;
  ul {
    list-style-type:circle;
    ul {
      list-style-type:square;
    }
  }
}