:root {

  --content-width: 1366px; /* 13" laptop fullscreen */

  /* basic 12 column grid system */
  --col: 5.25rem;
  /* 84px */
  --gap: 1.125rem;
  /* 18px */
  --fs: 1.125rem;
  --lh: 1.625;

  --font-sans: Roboto, sans-serif;

  /* colors */
  --vr-color: #d98401;
  --vr-color-80: rgba(217, 132, 1, 0.8);
  --bright-color: #fff;
  --dark-color: #000;
  --color-body: #fff;
  --color-canvas: #fff;
  --button-background-color: #333;
  --button-background-color-50: #3336;
  --button-foreground-color: #fff;


}

* {
  box-sizing: border-box;
  font-family: var(--font-sans)
}

html {
  line-height: var(--lh);
}

html,
body{
  scroll-behavior: smooth;
}

body{
  background-color: var(--color-canvas);
  position:relative;

  &::before{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    content:"";
    background: transparent url(../static/patternL.svg) repeat;
    background-size: 48px;
    opacity: .15;
    z-index: -1;
  }
}

AUTO {/* <- can this be removed? */
  /*position: relative;*/
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: var(--lh);
  font-size: var(--fs);
  overflow-x: hidden;
}

figure,
menu {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 300;
  margin-bottom: calc(var(--lh) * var(--fs));
  line-height: calc(var(--lh) * var(--fs));
}

h1 {
  font-size: calc(var(--fs) * 1.888888);
  /* 34 px */
  line-height: calc(var(--lh) * var(--fs) * 1.52777);
  /* 44 px*/
  margin-bottom: calc(var(--lh) * var(--fs) * 1.38889);
  /* 40 px*/
  font-weight: 500
}

h2 {
  font-size: calc(var(--fs) * 1.666);
  line-height: calc(var(--lh) * var(--fs) * 1.38889);
  margin-bottom: calc(var(--lh) * var(--fs) * 1.38889);
  font-weight: 500
}

h3 {
  font-size: calc(var(--fs) * 1.2);
  font-weight: 500
}

h4 {
  font-weight: 500
}

p {
  margin-bottom: calc(var(--lh) * var(--fs) * 0.5);
}


:link,
:visited {
  color: currentColor;
}

address {
  font-style: normal;
}

section {
  margin: 0 auto 0 auto;
  max-width:var(--content-width);
  background-color: var(--color-body);
}

strong {
  color: var(--vr-color);
  font-weight: inherit;

}

@keyframes loader {
  to {
    transform: rotate(360deg);
  }
}


.button {
  border-radius: .5rem;
  border:none;
  padding:0;
  margin:0;
  background-color: var(--button-background-color);
  display: flex;
  flex: 0 0 100%;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  color: var(--bright-color);
  cursor: pointer;

  &.inverted {
    color: var(--button-background-color);
    background-color: var(--bright-color);
  }
}

.buttons-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  width: 100%;
  .button {
    max-width: 15rem;
  }
}



@media all AND (max-width: 700px) {

  body,
  html {
    font-size: 4vw
  }
}