/**
 * Reset all the CSS.
 */
@import 'reset.css';


/**
 * Import the fonts.
 */
@import 'fonts.css';


/**
 * NOTE: Most of the CSS is done in Elm using the rtdfeldman/css module. As this
 * module lacks support for certain CSS features, these are written in the CSS
 * files.
 */


:root {
  font-size: 6.25%;
  -webkit-text-size-adjust: none;
}


body {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: scroll;
  /* font-size: 100%; */
}


/* General CSS rule for SVG elements to have a transition of this type. */
svg, svg path, svg polygon, svg circle, svg rect {
  transition: fill 150ms 0ms cubic-bezier(0.34 , 0 , 0.11 , 1);
}


/* When hovering over the SVG, however, the <circle> elements with the types
first, second, and third, each get a delay added to them (note that, for this
use-case, the first has the same delay as usual). Then, when the user no longer
hovers above the SVG, the CSS rule above is used again, resetting the delay to
0 ms.
 */
svg:hover *[type="first"] {
  transition-delay: 0ms;
}


svg:hover *[type="second"] {
  transition-delay: 150ms;
}


svg:hover *[type="third"] {
  transition-delay: 300ms;
}

.navLink:hover .navDropLinkContainer, .navLink:focus .navDropLinkContainer
  { z-index: 1
  ; opacity: 1
  ; pointer-events: initial
  }


.centreCard:hover .centreName p
  { opacity: 1
  ; transform: scale3d(1, 1, 1) translateY(-17.5rem)
  }


.customListElement
  { counter-increment: step-counter;
  }


.customListElement::before
  { content: counter(step-counter);
  }

/* 
#wrapper {
  background-image: url("noise-pattern.png");
}


#wrapper[theme="dark"] {
  background-image: url("noise-pattern-inverted.png");
}


#wrapper > #container[mobile="true"] {
  overflow-x: hidden;
}


.priceTag {
  background-image: url("noise-pattern.png");
}


#wrapper[theme="dark"] .priceTag {
  background-image: none;
}


#header {
  background-image: url("noise-pattern.png");
}


#wrapper[theme="dark"] #header {
  background-image: url("noise-pattern-inverted.png");
}


#mobileMenuContainer {
  background-image: url("noise-pattern.png");
}


#wrapper[theme="dark"] #mobileMenuContainer {
  background-image: url("noise-pattern-inverted.png");
} */