body {
	background-color: #121918;
  background-size: cover;
  background-repeat: no-repeat;
}

#faux-bg {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	x: 0px;
	y: 0px;
	opacity: 0;
	background-color: #121918;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	animation-name: bg-out;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
}

@keyframes bg-out {
	100% {
		opacity: 0;
	}
}

#faux-bg.fun {
	animation-fill-mode: forwards;
	background-image: url(../img/bgs/fun_bg.jpg);
	opacity: 0;
	animation-name: bg-fadein;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
}

#faux-bg.tech {
	animation-fill-mode: forwards;
	background-image: url(../img/bgs/tech_bg.jpg);
	opacity: 0;
	animation-name: bg-fadein;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
}

#faux-bg.shop {
	animation-fill-mode: forwards;
	background-image: url(../img/bgs/shop_bg.jpg);
	opacity: 0;
	animation-name: bg-fadein;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
}

#faux-bg.sites {
	animation-fill-mode: forwards;
	background-image: url(../img/bgs/sites_bg.jpg);
	opacity: 0;
	animation-name: bg-fadein;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
}

#faux-bg.contact {
	animation-fill-mode: forwards;
	background-image: url(../img/bgs/contact_bg.jpg);
	opacity: 0;
	animation-name: bg-fadein;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
}

@keyframes bg-fadein {
	100% {
		opacity: 0.3;
	}
}

.focus {
	text-align: center;
}

.focus img {
	margin: 200px auto;
}

body {
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

.select-icon {
		width: 100%;
		height: auto;
		padding: 5px;
}

.home-btns, #home-intro {
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 3px;
}

.home-btns a {
	width: 100%;
	text-decoration: none;
	color: black;
	font-size: 2.5rem;
}

.obs {
	display: none;
}

.ar-16-9 {
	aspect-ratio: 16 / 9;
}

.ar-1-1 {
	aspect-ratio: 1;
}

@include media-breakpoint-up(sm) {
  .home-btns a { {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  .home-btns a { {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  .home-btns a { {
    font-size: 1.6rem;
  }
}