html, body {
	height: 100%;
	position: relative;
	box-shadow: 0 0 200px rgba(0, 0, 0, 0.27) inset;
	color: #fff;
	font-family: "Lucida Sans Unicode", Verdana;
	background: #665fee;
	background-image: -webkit-linear-gradient(45deg, rgb(102, 95, 238) 0%, rgb(39, 194, 222) 100%);
	overflow-x: hidden
}

@font-face {
	font-display: swap
}

.flex-grow {
	flex: 1
}

a, a:hover, a:active {
	color: #bfe1ff
}

.h-05 {height: 0.5% !important}
h1 {font-size: 5rem !important}
.padding40 {padding: 40px}
.navbar-default .navbar-toggle {border: 0}
.navbar-light .navbar-nav .nav-link {color: #dfdfdf}
.navbar-light .navbar-brand, .navbar-light:hover .navbar-brand:hover {color: #fff}
.nav li > a {padding: 20px}

.navbar li {
	font-size: 16px;
	text-transform: small-caps;
	margin-right: 25px
}

.navbar, .navbar-collapse {
	border: 0;
	background: none;
	padding-top: 10px
}

ul.nav.navbar-nav.navbar-right li a:hover, ul.nav.navbar-nav.navbar-right li.active a {
	color: #ffffff;
	background: none;
	border-bottom: 1px solid #a5d5ff
}

.footer {
	color: #dfdfdf;
	font-size: 13px;
	padding: 20px
}

.customBackground {
   position: relative;
}

.customBackground:before {
   content: '';
   min-height: 100%;
   min-width: 200%;
   left: -50%;
   display: block;
   position: absolute;
   background-color: #f2f4f9;
   -webkit-transform: rotate(-4deg);
   -ms-transform: rotate(-4deg);
   transform: rotate(-4deg);
   z-index: 1;
   color: #212529;
}

.resetTextRotation {
   padding: 100px 40px;
   z-index: 2;
}


@media (min-width: 300px) and (max-width: 767px) {
   h1 {font-size: 3em !important}

   .navbar-brand {
      white-space: normal !important
   }

   .customBackground:before {
      display: none;
   }

   .resetTextRotation {
      background: rgb(242, 244, 249);
      padding: 40px;
   }
}