@import url("/node_modules/ccc-components/styles/button.css");

/**
 * Fonts
 */

@font-face {
  font-family: "Merriweather Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("/fonts/merriweather-sans-v11-latin-regular.woff2") format("woff2"),
    url("/fonts/merriweather-sans-v11-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Merriweather Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("/fonts/merriweather-sans-v11-latin-700.woff2") format("woff2"),
    url("/fonts/merriweather-sans-v11-latin-700.woff") format("woff");
}

/**
 * Main
 */

html,
body {
  height: 100%;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 36px;
  background: rgb(255 255 255);
  color: rgb(0 0 0 / 87%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Noto, Arial, sans-serif;
  line-height: 1.5;
}

/**
 * Block - button
 */

.ccc-button {
  --ccc-accent-color: rgb(205 24 53);

  height: 40px;
  border-radius: 100px;
  font-family: "Merriweather Sans", Arial, sans-serif;
  font-weight: 500;
}

/**
 * Block - paragraph
 */

.jor-paragraph {
  margin: 0;
}

.jor-paragraph:not(:last-child) {
  margin-bottom: 24px;
}

/**
 * Block - toplogo
 */

.jor-logoheader__title {
  font-family: "Alegreya Sans SC", sans-serif;
}

/**
 * Utility - link
 */

.jor-u-link {
  color: inherit;
  text-decoration: none;
}

.jor-gesprek-hero {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: auto;
  background: url("/images/hero.jpg");
  background-color: rgb(187 174 157);
  background-position: right center;
  background-size: cover;
}

.jor-gesprek-branding {
  box-sizing: border-box;
  max-width: 571px;
  margin-right: auto;
  margin-left: auto;
  padding: 36px;
  border-radius: 36px;
  background: rgb(255 255 255 / 90%);
  color: rgb(0 0 0);
}

.ccc-button[disabled] {
  filter: grayscale(1) opacity(0.5);
  pointer-events: none;
}

.jor-logoheader {
  margin-right: 24px;
}

@media only screen and (width <= 650px) {
  .jor-gesprek-branding {
    margin-top: 180px;
  }
}

.jor-subheader {
  margin-bottom: 0;
}

.jor-logoicon {
  display: block;
  width: 100px;
  height: 100px;
  margin-right: 8px;
  border-radius: 8px;
}