/* ---------------------------------------- colors */

body {
  --color-base-neutral: #707070;
  --color-medium-neutral: #a8a8a8;
  --color-light-neutral: #dddddd;
  --color-thin-neutral: #f1f1f1;

  --color-base-red: #707070;
  --color-medium-red: #aa746a;
  --color-light-red: #ddcec4;
  --color-thin-red: #fff8f3;

  --color-base-purple: #5c6273;
  --color-medium-purple: #8f91a0;
  --color-light-purple: #d4d3d6;
  --color-thin-purple: #f5f4f9;

  --color-base-blue: #6b909f;
  --color-medium-blue: #9cbcc6;
  --color-light-blue: #c4d5e0;
  --color-thin-blue: #f4f8fb;

  --color-base-green: #737e6c;
  --color-medium-green: #a8b1a2;
  --color-light-green: #ccd5d1;
  --color-thin-green: #f4f7f2;

  --color-base-yellow: #bfa87e;
  --color-medium-yellow: #bfa87e;
  --color-light-yellow: #ece4d6;
  --color-thin-yellow: #fcf4e6;

  --color-lightgray: #d8dddd;
	--color-darkgray: #7a8189;

  --color-orange: #d98d02;
	--color-or: #fece32;
}

/* ---------------------------------------- layout */

html {
  scroll-behavior: smooth;
}

html,
body {
  font-family: bio-sans, sans-serif;
	font-weight: 300;
  font-size: 100%;
	line-height: 1.2;
  padding: 0;
  margin: 0;
}

body {
  background: var(--color-light-purple) !important;
}

/* ---------------------------------------- regions */

header {
  background: white;
  padding: 0.5rem 2rem;
  margin: 0 0 3rem 0;
}

@media (max-width: 768px) {
  header {
    padding: 0.5rem 1rem;
  }
}

.pagetitle {
  max-width: 80rem;
  width: 92%;
  margin: auto;
  font-size: 1.2rem;
}

main {
  max-width: 80rem;
  width: 92%;
  margin: auto;
  font-size: 1.2rem;
  min-height: calc(100vh - 17.3rem);
}

@media (max-width: 768px) {
  main {
    font-size: 1rem;
  }
}

footer {
  background: white;
  padding: 2rem 2rem;
  margin: 3rem 0 0 0;
  text-align: center;
}

@media (max-width: 768px) {
  footer {
    padding: 2rem 1rem;
  }
}

/* ---------------------------------------- elements */

a {
  outline: none;
  text-decoration: none;
  color: var(--color-base-blue);
}

/* ---------------------------------------- pager */

.ca-pager {
  display: flex;
  gap: 1rem;
  margin: 4rem auto;
  font-size: xx-large;
  width: fit-content;
  background: white;
  padding: 0.25rem 1.5rem 0.5rem 1.5rem;
  border-radius: 2px 1rem 1rem 2px;
  align-items: center;
}

.ca-pager-nolink {
  color: var(--color-light-blue);
}

.ca-pager-text {
  font-size: x-large;
  margin: 0 1rem;
  text-align: center;
}

@media (max-width: 768px) {
  .ca-pager {
    font-size: x-large;
    margin: 2rem auto;
    width: unset;
    justify-content: space-between;
  }
  .ca-pager-text {
    font-size: large;
    width: 50%;
  }
}

/* ---------------------------------------- overlay */

overlay {
  height: 100%;
  width: 100%;
  padding: 0;
  display: none;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.85);
}

/* ---------------------------------------- spinner */

@keyframes ca-spinner {
    to {
        transform: rotate(360deg);
    }
}

.ca-spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50vh;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: ca-spinner .6s linear infinite;
  z-index: 1000;
  overflow: hidden;
}

.ca-spinner {
  display: block;
  filter: opacity(50%);
  pointer-events: none;
  cursor: progress;
}