// Global styling not tied to any specific component/element/page
// This should be truly independent of anything else and just do generic global styling

html {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-stack-primary);
  background-color: var(--color-white);
  color: var(--color-1);

  &.admin-bar {
    min-height: calc(100vh - 32px);
  }
}

main {
  flex: 1;
}

.light-blue-bg {
  background: var(--color-8);
}

.divider-top {
  background-image: asset("image", "background-shape-top.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}

.divider-bottom {
  background: asset("image", "background-shape-bottom.png") no-repeat bottom,
    linear-gradient(0deg, rgba(255, 255, 255, 0) 433px, var(--color-8) 433px);
}

.site-nav {
  ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
  }
}