:root {
  --primary-graphite-100: rgba(206, 205, 203, 1);
  --primary-graphite-400: rgba(124, 124, 123, 1);
  --primary-graphite-500: rgba(99, 98, 98, 1);
  --primary-graphite-600: rgba(76, 76, 76, 1);
  --primary-graphite-900: rgb(31, 31, 31);

  --primary-green-100: rgba(213, 215, 208, 1);
  --primary-green-200: rgba(188, 192, 185, 1);
  --primary-green-600: rgba(99, 111, 99, 1);
  --primary-green-700-definition: 79, 90, 79;
  --primary-green-700: rgba(var(--primary-green-700-definition), 1);

  --secondary-green-100: rgb(209, 250, 223);
  --secondary-green-700: rgb(2, 122, 72);


  --secondary-yellow-100: rgb(254, 240, 199);
  --secondary-yellow-900: rgb(122, 72, 14);

  --secondary-red-800: rgb(145, 32, 24);
  --secondary-red-600: rgba(217, 45, 32, 1);
  --secondary-red-100: rgb(254, 228, 226);

  --primary-sand-25: rgba(255, 254, 251, 1);
  --primary-sand-50: rgba(251, 249, 243, 1);

  /* || Spacing */
  --size-xs: 4px;
  --size-s: 8px;
  --size-m: 12px;
  --size-l: 16px;
  --size-xl: 24px;
  --size-xxl: 40px;

  /* || Radius */
  --size-radius-xs: 4px;
  --size-radius-s: 8px;
  --size-radius-l: 16px;

  /* || Elevation */
  --elevation-layer: -25px 0px 0px 0px rgba(0, 0, 0, 0.25);
  --elevation-pop: 0px 0px 24px 0px rgba(0, 0, 0, 0.1),
    0px 8px 20px -10px rgba(0, 0, 0, 0.25);
  --elevation-small-pop: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);

  /* || Fonts */
  --base-font: 'sofia-regular';
  --base-font-bold: 'sofia-bold';
  --base-font-semibold-second: 'louize-medium';

  --secondary-background: #E8E8E7;
  --secondary-text: #041861;
}

@font-face {
  font-style: normal;
  font-weight: 400;
  src: url('./../fonts/louize/louize-medium.woff2') format('woff2');
  font-family: louize-medium;
}

@font-face {
  font-style: normal;
  font-weight: 400;
  src: url('./../fonts/sofia/sofia-regular.woff2') format('woff2');
  font-family: sofia-regular;
}

@font-face {
  font-style: normal;
  font-weight: 700;
  src: url('./../fonts/sofia/sofia-bold.woff2') format('woff2');
  font-family: sofia-bold;
}

@font-face {
  font-style: normal;
  font-weight: 700;
  src: url('./../fonts/calluna/calluna-semibold.woff2') format('woff2');
  font-family: calluna-semibold;
}

.text {
  margin: 0;

  color: var(--color, var(--primary-graphite-600));
  font-style: normal;
  font-weight: var(--font-weight, 400);
  font-size: var(--font-size, 0.875rem);
  font-family: var(--font-family, var(--base-font));
  font-feature-settings:
    'clig' off,
    'liga' off;
}

.display-text {
  --font-family: var(--base-font-semibold-second);
  --font-size: 1.75rem;

  line-height: 1;
}

.body-text {
  --font-family: var(--base-font);
  --font-size: 1rem;
  --font-weight: 400;

  line-height: 1.25rem;
}

.label-text {
  --font-family: var(--base-font);
  --font-size: 0.875rem;
  --font-weight: 400;

  line-height: 1.25rem;
}

.label-bold-text {
  --font-family: var(--base-font-bold);
  --font-weight: 700;
}

.caption-text {
  --font-family: var(--base-font);
  --font-size: 0.75rem;
  --font-weight: 400;

  line-height: 1rem;
}

/* || Background template image */
.background-image-container {
  width: calc(100vw - 30rem);
  height: 100%;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* || Link */

a {
  color: var(--primary-graphite-400);
}

a:hover:not([type='button']) {
  color: var(--primary-graphite-600);
}

/* || Input */

input:focus-visible {
  outline: 2px solid var(--primary-green-700);
}

/* || Info */
.info-container {
  margin: var(--size-xl) 0;
}

.header-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* || Header */

.header-title-container {
  margin: var(--size-l) 0;
  color: var(--primary-graphite-900);
}

/* || Dropdown */

.language-dropdown-select {
  padding: 7px 7px 8px 12px;
  text-transform: uppercase;
}

/* || Responsive */
@media (max-width: 770px) {
  .background-image-container {
    display: none;
  }
}

/* || Instruction page */
.instruction {
  padding: 1rem 0 2rem 0;
}

.instruction ul:only-child {
  list-style: none;
  padding: 0;
}