:root {
  --head-font: 'Comfortaa';
  --body-font: 'Playfair';
  --code-font: monospace, sans-serif;

  /* kat. mulig. */
  --orange-salmon-1: hsl(6, 57%, 60%);
  --orange-salmon-3: hsl(10, 58%, 74%);
  --orange-salmon-4: hsl(11, 60%, 86%);

  /* kv. komp. & pers. åpen. */
  --dark-salmon-1: hsl(13, 77%, 72%);
  --dark-salmon-2: hsl(14, 78%, 77%);
  --dark-salmon-3: hsl(15, 78%, 82%);
  --dark-salmon-4: hsl(16, 78%, 89%);
  --dark-salmon-5: hsl(16, 79%, 91%);

  /* kompetanse & pers. emosj. */
  --brown-1: hsl(17, 42%, 13%);
  --brown-2: hsl(21, 28%, 24%);
  --brown-3: hsl(23, 18%, 38%);
  --brown-4: hsl(22, 14%, 46%);
  --brown-5: hsl(24, 13%, 71%);
  --brown-6: hsl(25, 14%, 74%);

  /* kat. driv. */
  --ochre-1: hsl(23, 49%, 41%);
  --ochre-3: hsl(26, 37%, 60%);
  --ochre-4: hsl(27, 38%, 78%);

  /* kv. tilh. & pers. ekstr. */
  --muddy-brown-1: hsl(39, 37%, 51%);
  --muddy-brown-2: hsl(39, 38%, 60%);
  --muddy-brown-3: hsl(39, 39%, 69%);
  --muddy-brown-4: hsl(38, 40%, 81%);
  --muddy-brown-5: hsl(39, 40%, 84%);

  /* kv. auto. & pers. sos. */
  --forest-green-1: hsl(164, 44%, 25%);
  --forest-green-2: hsl(162, 17%, 45%);
  --forest-green-3: hsl(162, 15%, 49%);
  --forest-green-4: hsl(162, 14%, 64%);
  --forest-green-5: hsl(162, 14%, 76%);
  --forest-green-6: hsl(162, 13%, 81%);

  /* kat. strat. */
  --mint-green-1: hsl(163, 23%, 53%);
  --mint-green-3: hsl(162, 22%, 70%);
  --mint-green-4: hsl(161, 21%, 85%);

  /* kv, pers & pers. målb. */
  --blue-0: hsl(176, 19%, 56%);
  --blue-1: hsl(175, 30%, 66%);
  --blue-3: hsl(174, 30%, 79%);
  --blue-3-v2: hsl(175, 30%, 78%);
  --blue-4: hsl(178, 28%, 83%);
  --blue-4-v2: hsl(177, 27%, 84%);

  /* kat. oper. */
  --sea-blue-1: hsl(195, 44%, 45%);
  --sea-blue-3: hsl(197, 34%, 65%);
  --sea-blue-4: hsl(198, 33%, 82%);

  --card-width: min(534px, 100vw);
  --card-height: 534px;

  --small-card-width: 150px;

  --app-black: #333;
  --app-disabled-grey: rgb(183, 183, 183);
  --app-max-width: 1024px;

  --bottom-nav-height: 50px;
  --top-flap-height: 50px;

  --border-radius: 5px;
}

.ui-text {
  font-family: var(--head-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--app-black);
}

.app-header-text {
  font-size: 24px;
  font-family: var(--head-font);
  color: var(--app-black);
  text-align: center;
}

.app-text {
  font-size: 15px;
  font-family: var(--body-font);
  color: var(--app-black);
  text-align: center;
}

.app-text-left {
  font-size: 15px;
  font-family: var(--body-font);
  color: var(--app-black);
  text-align: start;
}

.ipt {
  padding: 10px 12px 7px;
  box-sizing: border-box;
  border: 1px solid rgb(198, 198, 198);
  border-radius: 0;
  text-align: center;
}

.ipt:focus-visible {
  outline: 2px solid var(--blue-3);
}

.btn {
  padding: 3px 0 0 0;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
  border-radius: var(--border-radius);
  transition: 0.2s;
  cursor: pointer;
  background-color: white;
}

@media (hover: hover) {
  .btn:hover {
    background-color: rgb(217, 234, 243);
  }
}

@media (hover: none) {
  .btn:enabled:active {
    background-color: rgb(217, 234, 243);
  }
}

.btn:disabled {
  background-color: rgb(255, 255, 255);
  color: var(--app-disabled-grey);
  border: 0px solid var(--app-disabled-grey);
  cursor: unset;
}

.bg-black {
  background-color: var(--app-black);
  color: white;
}

@media (hover: hover) {
  .bg-black:hover {
    background-color: rgb(38, 79, 100);
  }
}

@media (hover: none) {
  .bg-black:enabled:active {
    background-color: rgb(38, 79, 100);
  }
}

.dialog {
  border-radius: 10px;
  border: 0;
  box-shadow: 0px 0px 20px 15px rgba(0, 0, 0, 0.2);
}

.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}