:root {
  --identity-hsl: 199, 100%, 41%;

  --body-text-hsl: 0, 0%, 32%;

  --dull-hsl: 30, 10%, 90%;

  --warn-hsl: 360, 92%, 66%;

  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);

  --banner-height: 90px;

  --duration: 1s;
}

@media (prefers-reduced-motion) {
  :root {
    --duration: 0.1ms;
  }
}

/*
 * Base
 */

:root {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

main {
  background-color: white;
  flex: 1;
}

/*
 * Typography
 */

@font-face {
  font-family: 'telenorWebFont';
  src: url('../fonts/telenor-webfont.ttf') format('truetype'),
    url('../fonts/Telenor.eot') format('embedded-opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'telenorWebFont-light';
  src: url('../fonts/telenorlight-webfont.ttf') format('truetype'),
    url('../fonts/TelenorLight.eot') format('embedded-opentype');
  font-weight: 300;
  font-style: normal;
}

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.5em;
}

body,
button,
input,
textarea,
select {
  font-family: telenorWebFont;
}

p {
  color: hsl(var(--body-text-hsl));
}

a {
  color: hsl(var(--identity-hsl));
}