html {
  scroll-behavior: smooth;
}

/* html, body, main {
  height: 100%;
} */

.landing {
  display: flex;
  /* align-items: center; */
  /* width: 100%; */
  min-height: 100vh;
}

.landing div {
  width: 100%;
}

.grid button,
.grid a[role="button"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

section {
  padding: 4rem 0;
}

body {
  background: url(./welcome-to-gust.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  background-position: 100% 100%;
  background-color: rgba(5, 0, 26, 1);
}

main {
  padding: 4rem;
  background-color: rgba(5, 0, 26, 0.8);
  filter: blur(50);
}

[role="button"],
.button,
button {
  border-width: 0.25rem;
  background-color: transparent;
  box-sizing: border-box;
  background-color: hsla(233, 100%, 63%, 0.25);
  backdrop-filter: blur(10px);
  font-weight: bold;
}

[role="button"]:hover,
.button:hover,
button:hover {
  backdrop-filter: blur(0);
}

.inline-block {
  display: inline-block;
}


@media only screen and (min-width: 576px) {
}
@media only screen and (min-width: 768px) {
  body {
    background-size: 75%;
  }
  section {
    width: 75%;
  }
  main {
    padding: 3rem;
    background-color: rgba(5, 0, 26, 0.5);
  }
  .landing {
    align-items: center;
  }
}
@media only screen and (min-width: 1024px) {
  section {
    width: 50%;
  }
  main {
    background-color: transparent;
  }

}
@media only screen and (min-width: 1280px) {
}
@media only screen and (min-width: 1536px) {
  main {
    padding: 6rem;
  }
}