:root {
  --primary: #00ff61;
  --primary-complementary-light: #00ffe1;
  --primary-complementary-dark: #00e2c8;
  --secondary: #ff0db1;
  --secondary-complementary-light: #ffff90;
  --secondary-complementary-dark: #d6ff00;
  --foreground: #0f0f0f;
  --background: #ffffff;
  --background-95: rgba(255, 255, 255, 0.95);
  --disabled: #727272;
  --gray-50: #dadada;
  --gray-25: #e8e8e8;
  --gray-10: #f8f8f8;

  /* Light green to light blue */
  --gradient-1-background: rgb(29, 255, 109);
  --gradient-1-background-moz: -moz-linear-gradient(
    180deg,
    rgba(0, 255, 97, 1) 0%,
    rgba(0, 255, 225, 1) 100%
  );
  --gradient-1-background-webkit: -webkit-linear-gradient(
    180deg,
    rgba(0, 255, 97, 1) 0%,
    rgba(0, 255, 225, 1) 100%
  );
  --gradient-1-background-gradient: linear-gradient(
    180deg,
    rgba(0, 255, 97, 1) 0%,
    rgba(0, 255, 225, 1) 100%
  );
  --gradient-1-background-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff61",endColorstr="#00ffe1",GradientType=1);

  --max-width: 1600px;
}

/* Normalize */
html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

footer {
  overflow: hidden;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: #fefefe;
}

a:focus-visible {
  outline: 1px solid var(--foreground);
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

.noscroll {
  overflow-y: hidden;
}

/* header
.site-header {
  z-index: 100;
  position: relative;
  display: initial;
} */

/* main */
.wrapper {
  z-index: 1;
  position: relative;
}

/* For sections and wrappers that will not be full width. Same css is applied in nav.css */
.spacing,
.spacing-padding,
.spacing-x {
  max-width: var(--max-width);
  margin: auto;
  width: 100%;
}

/* S */
@media (max-width: 479px) {
  /* 4 columns */
  .spacing {
    padding: 40px 20px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
  }

  .spacing-padding {
    padding: 40px 20px 0;
  }
  .spacing-x {
    padding: 0 20px;
  }
}

/* M */
@media (min-width: 480px) and (max-width: 600px) {
  /* 8 columns */
  .spacing {
    padding: 40px 32px 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 24px;
    width: 100%;
  }

  .spacing-padding {
    padding: 40px 32px 0;
  }
  .spacing-x {
    padding: 0 32px;
  }
}

@media (min-width: 600px) and (max-width: 960px) {
  /* 8 columns */
  .spacing {
    padding: 60px 40px 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 32px;
    width: 100%;
  }

  .spacing-padding {
    padding: 60px 40px 0;
  }
  .spacing-x {
    padding: 0 40px;
  }
}

/* L */
@media (min-width: 960px) and (max-width: 1440px) {
  /* 12 columns */
  .spacing {
    padding: 60px 48px 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    width: 100%;
  }

  .spacing-padding {
    padding: 60px 48px 0;
  }
  .spacing-x {
    padding: 0 48px;
  }
}

/* XL */
@media (min-width: 1440px) {
  /* 12 columns */
  .spacing {
    padding: 60px 48px 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    width: 100%;
  }

  .spacing-padding {
    padding: 60px 48px 0;
  }
  .spacing-x {
    padding: 0 48px;
  }
}

/* Special sections */
@media (max-width: 600px) {
  .section_heading + .text-img-link {
    margin-top: 40px;
  }
}

@media (min-width: 601px) {
  .section_heading + .text-img-link {
    margin-top: 60px;
  }
}

/* Skip to content */
.assistive-text {
  top: 0px;
  left: 0;
  position: absolute;
  background: black;
  color: white;
  height: auto;
  width: 100%;
  padding: 2rem;
  text-align: center;
  transform: translateY(-100%);
  transition: transform 0.3s;
  outline: none;
}

.assistive-text:focus {
  transform: translateY(0%);
}

/* set admin bar to not cover entire screen in desktop */
@media (min-width: 600px) {
  #wpadminbar {
    position: fixed;
    top: 0;
    z-index: 1000;
    opacity: 40%;
    max-width: 1000px;
    left: 50% !important;
    transform: translateX(-50%);
    width: 60% !important;
  }
  #wpadminbar:hover {
    opacity: 100%;
  }
}