/* Reset og border-box á allt */
* {
    margin: 0;
    padding: 0;
  }
  
  html {
    box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  /* Leturgerðir */
  
  @font-face {
    font-family: 'comic';
    font-style: normal;
    font-display: swap;
    src: url(./fonts/Lora-VariableFont_wght.ttf) format('woff');
  }
  
  @font-face {
    font-family: 'Noto Sans Display';
    font-style: normal;
    font-display: swap;
    src: url(./fonts/NotoSansDisplay-VariableFont.ttf) format('woff');
  }
  
  /* Stillingar */
  
  :root {
    /* Grunn bilið okkar er 1rem == 16px */
    --font-base-body-px: 16px;
    --spacing: 1rem;
  
    /* Bil á milli „stærri“ eininga (header, efnisbox, footer) */
    --vertical-space: calc(var(--gutter));
  
    /* Hámarksbreidd á efni */
    --max-width: 1400px;
    --width-offset: calc(100% - (2 * var(--offset)));
  
    /* Border breiddir */
    --border-small: 1px;
    --border-large: 8px;
    --border-radius: 6px;
  
    /* Litir */
    
    --color-gold-light: #E1E6E1 ;
    --color-dark: #214E34;
    --color-light: #E2725B;
  
    /* Grid stillingar */
    --columns: 12;
    --gutter: 30px;
    --offset: 20px;
  
   /* Font settings */
--font-base-size: 1rem;
--font-family-base: 'League Spartan', sans-serif;


    /* Transitions */
    --transition-time-short: 300ms;
    --transition-time-long: 600ms;
    --transition-timing-function: ease-in-out;
  }
  
  /* Almennt */
  
  html,
  input,
  select,
  button {
    font-size: var(--font-base-body-px);
    font-family: var(--font-family-base);
  }
  
  h1,
  h2,
  h3 {
    /* Setjum almennt bil á eftir fyrirsögnum */
    margin-bottom: var(--spacing);
  
    font-family: var(--font-family-heading);
  }
  
  a {
    color: inherit;
    background-color: inherit;
  }
  
  img {
    max-width: 100%;
  }
  
  /** Hjálpar class sem felur sjónrænt en skjálesarar lesa **/
  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  
  /* Takki */
  
  .button {
    display: inline-block;
  
    border: 1px solid var(--color-dark);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing) / 2) calc(var(--spacing));
  
    font-family: var(--font-family-base);
    text-decoration: none;
    text-align: center;
  
    color: var(--color-light);
    background-color: var(--color-dark);
  
    transition: background-color var(--transition-time-short)
        var(--transition-timing-function),
      color var(--transition-time-short);
  }
  
  .button:hover {
    color: var(--color-dark);
    background-color: var(--color-gold);
  }
  
  /* Fade in animation */
  
  @keyframes fade-in {
    from {
      opacity: 0;
      
    }
    to {
      opacity: 1;
    }
  }
  
  .header,
  .main {
    animation: var(--transition-time-long) var(--transition-timing-function) fade-in;
  }
  
  
  /* Layout */
  
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 100%;
  
    /* grid items eru miðjuð */
    justify-items: center;
  
    gap: var(--vertical-space);
  }
  
  /** Haus **/
  
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing);
  
    padding-top: var(--spacing);
    width: 100%;
    border-bottom: var(--border-large) solid var(--color-gold);
  
    background-color: var(--color-dark);
    color: var(--color-gold-light);
  }
  
  .header header {
    display: flex;
    flex-direction: column;
    align-items: center;
  
    max-width: var(--width-offset);
  
    text-align: center;
  }
  
  /** Valmynd **/
  
  .navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--spacing) 0;
    width: 100%;
  
    background-color: var(--color-light);
    color: var(--color-dark);
  }
  
  .navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing);
  
    width: 100%;
    max-width: var(--width-offset);
  
    list-style: none;
  }
  
  /** Meginmál **/
  
  .main {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    gap: var(--vertical-space);
  
    width: var(--width-offset);
    max-width: var(--max-width);
  }
  
  /** Fótur **/
  
  .footer {
    padding: var(--spacing);
    border-top: var(--border-large) solid var(--color-gold);
    width: 100%;
  
    background-color: var(--color-dark);
    color: var(--color-gold-light);
  }
  
  .footer .content {
    display: grid;
    gap: var(--vertical-space);
  
    margin: 0 auto;
  
    text-align: center;
  }
  
  @media (min-width: 500px) {
    .footer .content {
      grid-template-columns: repeat(var(--columns), 1fr);
      grid-template-rows: auto;
  
      max-width: var(--max-width);
    }
  
    .footer section {
      grid-column-end: span 4;
    }
  
    .footer section:first-child {
      grid-column-start: 3;
    }
  }
  
  .footer ul {
    list-style: none;
  }
  
  /* Box! */
  
  .boxes {
    display: grid;
    grid-template-rows: auto;
    gap: var(--vertical-space);
    justify-items: center;
  
    width: 100%;
  }
  
  @media (min-width: 500px) {
    .boxes {
      grid-template-columns: repeat(var(--columns), 1fr);
      grid-template-rows: auto;
    }
  }
  
  .boxes .box {
    grid-column: span 12;
  
    display: flex;
    flex-direction: column;
  
    gap: var(--spacing);
  
    padding: calc(var(--spacing) * 0.5);
    width: 100%;
    min-height: 100px;
  
    color: var(--color-dark);
    background-color: var(--color-gold-light);
    border-radius: 5px;
  }
  
  @media (min-width: 500px) {
    .boxes .box {
      grid-column: span 6;
    }
  }
  
  @media (min-width: 1000px) {
    .boxes .box {
      grid-column: span 4;
    }
  }
  
  .boxes .box .title {
    margin-bottom: calc(var(--spacing) * 0.5);
    border-bottom: var(--border-small) solid var(--color-dark);
  }
  
  .boxes .box .content {
    flex: 1;
  }
  
  .boxes .box img {
    max-height: 400px;
  
    object-fit: cover;
    object-position: top center;
  }
  
  @media (min-width: 1000px) {
    .boxes .box img {
      max-height: 350px;
    }
  }
  
  /* Opnunartími */
  
  dt {
    font-weight: bold;
  }
  
  dd {
    margin-bottom: var(--spacing);
  }
  
  /* Matseðill */
  
  table {
    border-spacing: 0;
  }
  
  table th,
  table td {
    padding: calc(var(--spacing) * 0.5);
    text-align: left;
  }
  
  table tbody tr:nth-child(2n + 1) {
    color: var(--color-dark);
    background-color: var(--color-gold);
  }
  
  /* Pöntunarform */
  
  /* animation */