html {
  box-sizing: border-box;
  font-family: $core-font-standard;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

[v-cloak], .is-hidden {
  display: none;
}

#app {
  position: relative;
  min-height: 100%;

  &.is-fullscreen {
    height: 100vh;
  }
}

body {
	background-color: lighten(mc('blue-grey','50'), 5%);
  height: 100%;
}

main {
  background-color: mc('blue','500');
  background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue', '500') 100%);
  padding: 50px;
  min-height: 100vh;
}

a {
	color: mc('indigo', '600');
	text-decoration: none;

	&:hover {
		color: mc('indigo', '700');
		text-decoration: underline;
	}
}

// Container

.container {
  position: relative;
}

.content {
	padding: 20px;
}

// Visibility

.is-hidden {
  display: none !important;
}

.is-hidden-until-scroll {
  max-height: 0;
  overflow: hidden;
  transition: all .6s ease;
}
.is-sticky .is-hidden-until-scroll {
  max-height: 30px;
}

.is-hidden-mobile {
  @include mobile {
    display: none !important;
  }
}

.is-hidden-tablet {
  @include tablet {
    display: none !important;
  }
}

.is-hidden-tablet-only {
  @include tablet-only {
    display: none !important;
  }
}

.is-hidden-touch {
  @include touch {
    display: none !important;
  }
}

.is-hidden-desktop {
  @include desktop {
    display: none !important;
  }
}

.is-hidden-desktop-only {
  @include desktop-only {
    display: none !important;
  }
}

.is-hidden-widescreen {
  @include widescreen {
    display: none !important;
  }
}