@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

/* Basic CSS Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Ubuntu, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 100vh;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

.bg {
	/* linear-gradient puts a 'filter' to reduce the brightness of the bg image */
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
			no-repeat center center/cover;
	position: absolute;
	/* blur gets rough around the edges, so making the bg offset and expanding it to make the edges crisper */
	top: -30px;
	left: -30px;
	width: calc(100vw + 60px);
	height: calc(100vh + 60px);
	z-index: -1;
	filter: blur(30px);
	transition: filter 0.2s ease;
}

.loading-text {
	font-size: 50px;
	color: #fff;
	opacity: 1;
	transition: opacity 0.2s ease;
}