:root {
  --light: hsl(0, 0%, 98%);
  --dark: hsl(0, 0%, 21%);
}

html, body {
  overflow-x: clip;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

nav {
  transition: background-color 0.15s ease;
}

nav.scrolled {
  background-color: var(--dark);
}

nav.scrolled .navbar-burger,
nav.scrolled p {
    color: var(--light) !important;
}

nav.scrolled .button.is-dark.is-outlined {
  background-color: transparent;
  border-color: var(--light);
  color: var(--light);
}

nav.scrolled .button.is-dark.is-hovered,
nav.scrolled .button.is-dark:hover {
  background-color: var(--light);
  border-color: transparent;
  color: var(--dark);
}

.button {
  border-width: 2px;
}

a.is-underlined:hover {
  text-decoration: none !important;
}

.image img {
  width: 120vw;
  height: auto;
}

.is-flex.image img {
  width: auto;
}

@media (hover: none) {
  nav.scrolled .navbar-menu {
    background-color: var(--dark);
  }

  nav.scrolled .navbar-burger {
    color: var(--light) !important;
  }

  .navbar-menu {
      transition: background-color 0.15s ease;
  }
}