:root {
  --light-color: #D6D2C4;
  --dark-color: #003B49;
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  input, button, textarea, select {
    font: inherit;
  }
  
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  p {
    text-wrap: pretty;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  #root, #__next {
    isolation: isolate;
  }

/*
  OWN CSS
*/

body {
    font-family: "Fira Sans", sans-serif;
    line-height: 1.5;
    font-weight: 400;
    background-color: var(--dark-color);
    color: var(--light-color);
  }

main {
  display: grid;
  row-gap: 2em;
}

.container--light, footer {
  background-color: var(--light-color);
  color: var(--dark-color);
}


.div-container--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 2em;
}



.section-container {
  width: min(100%, 80ch);
  margin-right: auto;
  margin-left: auto;
  padding: 3em 1em 3em 1em;
}

section p {
  margin-top: 1.25em;
}

/* HEADER / FOOTER */

header, footer div {
  width: min(100%, 80ch);
  margin-right: auto;
  margin-left: auto;
  padding: 0 1em 0 1em;
}

header {
  min-height: 100px;
  margin-top: 2em;
  margin-bottom: 2em;
}

footer {
  padding-bottom: 2em;
}

footer div {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
}

footer div * {
  margin-right: .5em;
}

footer div p::after {
  margin-left: .25em;
  content: "\007C";
}

header svg {
  height: 5em;
}

footer svg {
  max-height: 1em;
  align-self: center;
}

a svg {
  display: inline-block;
}

header svg path {
  fill: var(--light-color);
}



/* TYPOGRAPHY */

/* DEFAULTS 
 font-resizing for larger screens,
via websemantics.uk/articles/responsive-fonts */
/* 1em(16px) @ 48em(768px) increasing to 1.5em(24px) @ 120em(1920px) */
@media (min-width: 48em) {
  :root {
   font-size: calc(1.2em + ((1vw - .2em) * 0.44));
   /* Where: 0.6944 = 100 * font-size_difference / viewport_width_difference */
 
   /* Safari resize fix */
   min-height: 0vw;
  }
 }
 /* Prevent scaling beyond this breakpoint */
 @media (min-width: 80em) {
  :root {
   font-size: 1.4em;
  }
}

/* rules to override typographic defaults */

h1, h2, h3 {
  font-weight: 700;
  line-height: 1;
}

h1 {
  font-size: 15em;
}

h1::after {
  content: url("data:image/svg+xml,%3Csvg width='54' height='73' viewBox='0 0 54 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.6589 35.4533C20.142 34.8657 17.4594 33.7841 14.759 32.192C4.78312 26.3101 -1.65713 15.6882 0.374336 8.4672C2.4058 1.24621 12.1397 0.16061 22.1156 6.04245C23.8314 7.05408 25.4426 8.20593 26.924 9.45657C28.3604 7.98706 29.9401 6.60382 31.6385 5.35501C41.2423 -1.70654 51.0048 -1.79565 53.4437 5.15599C55.8826 12.1076 50.0744 23.4676 40.4706 30.5291C37.6204 32.6248 34.7563 34.1064 32.0738 34.9721C31.7262 39.6196 30.7829 44.8891 28.7988 50.451C25.7177 59.0881 22.4041 64.3855 19.7141 67.5864C18.3708 69.1849 17.1914 70.2505 16.2879 70.9435C15.8366 71.2896 15.4557 71.5415 15.1595 71.7199C15.0114 71.809 14.8847 71.8796 14.7812 71.9344C14.7294 71.9617 14.6834 71.9851 14.6435 72.0048L14.629 72.0119C14.6145 72.019 14.6009 72.0256 14.5881 72.0317L14.5639 72.0431L14.5526 72.0483L14.5472 72.0508C14.5446 72.0521 14.542 72.0533 12.2989 66.8695C10.0559 61.6856 10.0533 61.6868 10.0507 61.688L10.0458 61.6903L10.0363 61.6947L10.0191 61.7028L9.9917 61.7161L9.97147 61.7263L9.96429 61.73C9.95799 61.7333 9.97546 61.7243 10.015 61.7005C10.0941 61.6529 10.2624 61.5456 10.5065 61.3583C10.9938 60.9846 11.7903 60.2872 12.7877 59.1004C14.7789 56.7309 17.6051 52.3692 20.3582 44.6514C21.5195 41.3959 22.2392 38.2975 22.6589 35.4533Z' fill='%23003B49'/%3E%3C/svg%3E");
  display: inline;
  width: auto;
  height: 300px;
  position: relative;
  bottom: -40px;
}

h2 {
  font-size: 2em;
}

.heading--fikatrail {
  text-transform: lowercase;
}

h3 {
  font-size: 1.5em;
}

strong {
  font-weight: 600;
}


/* LINKS */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


a {
  padding: 0.1em;
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 -0.1rem 0 0 var(--light-color);
  transition: box-shadow 0.3s;
}

a:hover {
  box-shadow: inset 0 -1.5rem 0 0 var(--light-color);
  color: var(--dark-color);
}

a:focus {
  outline: 3px dotted var(--light-color);
}

.container--light a {
  box-shadow: inset 0 -0.1rem 0 0 var(--dark-color);
}

.container--light a:hover {
  box-shadow: inset 0 -1.5rem 0 0 var(--dark-color);
  color: var(--light-color);
}

.container--light a:focus {
  outline: 3px dotted var(--dark-color);
}