:root {
  --c-base: #fffff3; /* #fffff9 */
  --c-base-2: #f7f8ec; /* Brukt som forslag i designet på login, kan være en nice sekundær farge hvis vi vil ha box el */
  --c-dark-green: #133512;
  --c-light-green-1: #f9ffd9;
  --c-light-green-2: #fbfee3;
  --c-light-green-3: #fdffe9;
  --c-light-green-4: #e8f0eb;
  --c-lime-green: #d5ee9a;
  --c-light-green-2: #f5fed5;
  --c-light-grey: #f2f2edcc;
  --c-line: #dce5e0;
  --c-error-dark: #cc0000;
  --c-error-light: #ffe6e6;
  --space-xs: 8px;
  --space-md: 16px;
  --space-lg: 25px;
  --space-2xl: 40px;
  --space-4xl: 64px;
  --space-6xl: 128px;
  --space-7xl: 192px;
  --c-primary-900: #002408;
  --c-primary-500: #007602;
  --c-neutral-200: #f7ffd2;
  --c-neutral-400: #cfef8f;
  --c-neutral-50: #fffff3;
  --c-gray-text: #0e2818;
}

.girl-by-sea {
  max-width: 80%;
}
/* Buttons */
.btn-flat-orange-hover-straight {
  text-decoration: none;
  color: var(--c-primary-900);
}

.btn-flat-orange-hover-straight:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 113, 52, 0) 26.92%,
    #ff7134 100%
  );
}

.btn-filled-avocado {
  display: flex;
  padding: var(--space-sm, 12px) var(--space-lg, 24px) 14px
    var(--space-lg, 24px);
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: var(--Neutral-400, #cfef8f);
  color: var(--c-primary-900);
  font-size: 18px;
  text-decoration: none;
  border: none;
}

.btn-filled-avocado:hover {
  background: #cafa6a;
}

.btn-filled-avocado-small {
  display: flex;
  padding: 5px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 40px;
  background: var(--Neutral-400, #cfef8f);
  color: var(--c-primary-900);
  font-size: 14px;
  text-decoration: none;
  border: none;
}

/* color classes */

.kf-c-primary-500 {
  color: var(--c-primary-500);
}

.kf-c-gray-text {
  color: var(--c-gray-text);
}

/* font classes */

.kf-breadcrumbs {
  color: var(--c-primary-900);
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
}

.kf-h1 {
  font-family: "Soehne";
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.kf-h3 {
  font-family: "Soehne";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

.kf-h4 {
  font-family: "Soehne";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

.kf-label-1 {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.kf-label-2 {
  color: var(--c-primary-900);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

/*egem*/
.kf-label-3 {
  color: var(--c-primary-900);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.kf-body-1 {
  /* Large/Body/Body 1 */
  color: var(--c-primary-900);
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 27px */
  margin: 0px;
}

.kf-body-2 {
  /* Large/Body/Body 2 */
  color: var(--c-primary-900);
  font-size: 16x;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 27px */
  margin: 0;
}

.kf-p {
  /* Large/Body/Emphasized body */
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 36px */
}

.kf-p-2 {
  /* Large/Body/Emphasized body 2 */
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 36px */
  margin: 0px;
}

@media (max-width: 800px) {
  .kf-h1 {
    font-size: 26px;
  }

  .kf-h3 {
    font-size: 22px;
    line-height: 150%;
  }

  .kf-h4 {
    font-size: 18px;
    line-height: 24px;
  }

  .kf-body-2 {
    font-size: 14px;
  }

  .kf-body-1 {
    /* Small/Body/Body 1 */
    color: var(--c-primary-900);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 27px */
    margin: 0px;
  }

  .kf-label-1 {
    font-size: 18px;
  }

  .kf-label-2 {
    color: var(--c-primary-900);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
  }

  .kf-p {
    /* Small/Body/Emphasized body */
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 27px */
  }
}