@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,900');
@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

:root {
  --dark-green: #0e4f1f;
  --highlight-color: #ff1b68;
}

/* Hier kun je default settings van browsers resetten (of je importeert normalize.css) */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

/* Dit wordt altijd uitgevoerd. Indien grid wordt ondersteund wordt het gedeelte hieronder ook nog uitgevoerd. 
Altijd eerst het "eenvoudige", daarna het "betere". */
body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding-top: 3.5rem;
}

/* property-value pair where you can check if that property and also that value is supported by the browser.
If the browser can not use it then it will not execute the code between the curly braces. If it can it will do so. */
@supports (display: grid) /* and () or () and not () */ {
  body {
    display: grid;
    grid-template-rows: 3.5rem auto fit-content(8rem);
    grid-template-areas: "header"
                         "main"
                         "footer";
    padding-top: 0;
    height: 100%;
  }
}

main {
  /* grid-row: 2 / 3; */
  grid-area: main;
}

.backdrop {
  display: none;
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s linear;
}

.main-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #2ddf5c;
  padding: 0.5rem 1rem;
  z-index: 60;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-button {
  width: 3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

.toggle-button:focus {
  outline: none;
}

.toggle-button__bar {
  width: 100%;
  height: 0.2rem;
  background: black;
  display: block;
  margin: 0.6rem 0;
}

.main-header__brand {
  color: #0e4f1f;
  text-decoration: none;
  font-weight: bold;
  /* width: 20px; */
}

.main-header__brand img {
  height: 2.5rem;
  vertical-align: middle;
  /* width: 100%; */
}

.main-nav {
  display: none;
}

.main-nav__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.main-nav__item {
  margin: 0 1rem;
}

.main-nav__item a,
.mobile-nav__item a {
  text-decoration: none;
  color: var(--dark-green);
  font-weight: bold;
  padding: 0.2rem 0;
}

.main-nav__item a:hover,
.main-nav__item a:active {
  color: white;
  border-bottom: 5px solid white;
}

.main-nav__item--cta {
  animation: wiggle 400ms 3s 8 ease-out none;
}

.main-nav__item--cta a,
.mobile-nav__item--cta a {
  color: white;
  background: var(--highlight-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.main-nav__item--cta a:hover,
.main-nav__item--cta a:active,
.mobile-nav__item--cta a:hover,
.mobile-nav__item--cta a:active {
  color: var(--highlight-color);
  background: white;
  border: none;
}

@media (min-width: 40rem) {
  .toggle-button {
    display: none;
  }

  .main-nav {
    display: flex;
  }
}

.main-footer {
  background: black;
  padding: 2rem;
  margin-top: 3rem;
  /* grid-row: 3 / 4; */
  grid-area: footer;
}

.main-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-footer__link {
  margin: 0.5rem 0;
}

.main-footer__link a {
  color: white;
  text-decoration: none;
}

.main-footer__link a:hover,
.main-footer__link a:active {
  color: #ccc;
}

.mobile-nav {
  transform: translateX(-100%);
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  background: white;
  width: 80%;
  height: 100vh;
  transition: transform 300ms ease-out;
}

.mobile-nav__items {
  width: 90%;
  height: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-nav__item {
  margin: 1rem 0;
}

.mobile-nav__item a {
  font-size: 1.5rem;
}

.button {
  background: var(--dark-green, #0e4f1f);
  color: white;
  font: inherit;
  border: 1.5px solid var(--dark-green);
  padding: 0.5rem;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.button:hover,
.button:active {
  background: white;
  color: var(--dark-green);
}

.button:focus {
  outline: none;
}

.button[disabled] {
  cursor: not-allowed;
  border: #a1a1a1;
  background: #ccc;
  color: #a1a1a1;
} 

.open {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@media (min-width: 40rem) {
  .main-footer__link {
    margin: 0 1rem;
  }

  .main-footer__links {
    flex-direction: row;
    justify-content: center;
  }
}

@keyframes wiggle {
  0% {
    transform: rotateZ(0);
  }
  50% {
    transform: rotateZ(-10deg);
  }
  100% {
    transform: rotateZ(10deg);
  }
}