*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main-kleur: #3a0519;
  --secundary-kleur: #670e2f;
  --tertiary-kleur: #ee87ac;

  --font: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;

  --border-radius: 5px;
}

p {
  line-height: 1.6;
}

body {
  background: var(--main-kleur);
  font-family: var(--font);
  color: white;

  @media (min-width: 900px) {
    overflow: hidden;
  }
}

button {
  /* 
  background: var(--tertiary-kleur);
  border-radius: var(--border-radius);
  color: var(--secundary-kleur);
  border: none;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 12px 30px; */

  font-family: var(--font);
  background: none;
  color: white;
  font-size: 1rem;
  border: none;
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 10px;

  span {
    display: flex;
    transform: translateY(2px);
  }
}

a {
  color: #9c9ce9;
  text-decoration: none;
}

code {
  background: black;
  padding: 5px;
  border-radius: var(--border-radius);
  /* display: inline-block; */
}

.gif {
  width: 60px;
}

.HEX-kleur {
  color: #ff5733;
}

.RGB-1-kleur {
  color: rgb(255, 0, 0);
}

.RGB-2-kleur {
  color: rgb(255 0 0 / 0.5);
}

.RGB-green {
  color: rgb(0, 255, 0);
}

.displayP3-kleur {
  color: color(display-p3 0 1 0);
}

.HSL-kleur {
  color: hsl(270deg 100%, 50%);
}

.HEX-2-kleur {
  color: #ff5733cc;
}

.oklch-kleur {
  color: oklch(0.6426 0.2426 25.67);
}