/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) { all: unset; display: revert; }

/* Preferred box-sizing value */
*, *::before, *::after { box-sizing: border-box; }

/* Remove list styles (bullets/numbers) in case you use it with normalize.css */
ol, ul { list-style: none; }

/* For images to not be able to exceed their container */
img { max-width: 100%; }

/* Removes spacing between cells in tables */
table { border-collapse: collapse; }

/* Revert the 'white-space' property for textarea elements on Safari */
textarea { white-space: revert; }

p, li { max-width: 90ch; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; max-width: 90ch;}

header, footer, main, section, article { container-type: inline-size; }

strong { font-weight: 700; }

i { font-style: italic; }

:root {
  --clr-html: hsl( 0deg 0% 93.7% );
  --clr-body: hsl(30deg 0% 96%);
  --clr-paper-dark: hsl(0deg 0% 93%);
  --clr-text: hsl(221.5, 8%, 32%);
  --clr-text-light: hsl(221.5, 8%, 82%);
  --clr-link-light: hsl(225, 72.2%, 71.8%);
  --clr-link-active: hsl(225, 82.2%, 61.8%);
  --clr-orange: hsl(25.5, 100%, 54.7%);
  --clr-header-light: hsl(0, 0%, 59.6%);
  --clr-paper: hsl(30deg 100% 100%);
  --border-line: 1px solid hsl(0, 0%, 91.8%);
}

html {
  background-color: black;
  width: min( 100% - 2rem, 1600px );
  margin-inline: auto;
  padding: 1rem 0;
}

body {
  background-color: var( --clr-body );
  display: grid;
  grid-template-columns: repeat( 13,1fr );
  justify-items: space-around;
}

div#header {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 6rem;
  grid-column: 1 / 14;
  background-color: var( --clr-paper );
  border-bottom: var( --border-line );
  align-items: center;

  div.item-1 {
    grid-column: 3 / 7;
  }

  div.item-2 {
    grid-column: 5 / 7;
  }

  div.item-3 {
    grid-column: 7 / 9;
  }

  div.item-4 {
    grid-column: 9 / 11;
  }

  div.item-5 {
    grid-column: 11 / 13;
  }

}

div#footer {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 6rem;
  grid-column: 1 / 14;
  background-color: var( --clr-paper );
  border-top: var( --border-line );
  align-items: center;
  text-transform: uppercase;
  font-size: 0.7rem;

  div.item-1 {
    grid-column: 4 / 6;
  }
  
  div.item-2 {
    grid-column: 6 / 8;
  }
      
  div.item-3 { 
    grid-column: 8 / 10;
  }
  
  div.item-4 {
    grid-column: 10 / 11;
  } 
    
  div.item-5 {
    grid-column: 11 / 12;
  }

} 
    
div.empty {
  grid-column: 1 / -1;
  height: 5rem;
}

div#black-foot {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  background-color: #1e326dd6;
  border-top: var( --border-line );
  font-family: arial;
  padding: 3rem 0;
  color: var( --clr-text-light );
  font-size: 0.9rem;

  & h2 {
    color: var( --clr-header-light );
    line-height: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  & li {
    margin-bottom: 0.2rem;
  }

  & a {
    cursor: pointer;
    color: var( --clr-link-light );

    &:hover {
      color: var( --clr-link-active );
    }

  }

  div.menu-1 {
    grid-column: 4 / 8;
    padding: 1rem 0;
  }

  div.menu-2 {
    grid-column: 8 / 10;
    padding: 1rem 0;
  }


}

div.card {
  outline: 1px solid green;
  text-align: center;
}

div.page {
  grid-column: 3 / 12;
  background-color: var( --clr-paper );
  color: var( --clr-text );
  padding: 50px;

  & figure{

    & figcaption{
      width: 100%;
      margin: 0.5rem 0 2rem 0;
      text-align: right;
      font-size: 0.7rem;
    }

  }


  & img{
    width: 100%;
    border-radius: 10px;
    vertical-align: top;
  }

  & h1{
    line-height: 3rem;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 2rem;
  }

  & p{
    line-height: 1.5rem;
    margin-bottom: 1rem;
  }

  & span.credits{
    display: block;
    text-align: right;
    font-size: 12px;
    margin-bottom: 2rem;
  }

  & h2 {
    color: var( --clr-header );
    line-height: 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 2rem;
  }

  & li {
    margin-bottom: 0.2rem;
  }

  & a {
    cursor: pointer;
    color: var( --clr-link-light );

    &:hover {
      color: var( --clr-link-active );
    }

  }

}


ul.custom-bullets {
  list-style: none;
  padding-left: 0;
  margin-bottom: 3rem;

  & li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  }

  & li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: hsl(132.2, 71.1%, 46.1%);               /* Endre farge på bullet om ønskelig */
  font-size: 1.2rem;
  line-height: 1;
  }
}