@charset "UTF-8";

	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
	* {
		font-family: 'Open Sans', sans-serif;
	}
	
	h2 {
		font-family: 'Poppins', sans-serif;
	}

	html, body {
		margin:0;
	}

	a { text-decoration:none }
	
	#loading {
		height:100vh;
		position:relative;
		background: linear-gradient(rgba(255,200,0,0.6), rgba(255,200,0,.6)), url(../images/h-flexxity.jpg);
		background-position:right;
		background-size:cover;
		color:#fff;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	#loading .logo {
		margin-bottom:1rem;
	}
	#loading svg {
		height: 25%;
    width: 100%;
    position: absolute;
    bottom: 0;
	}
	#loading .content {
		text-align:center;
		padding:3rem;
		background:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.5));
		border-radius:1rem;
		z-index:100;
		margin:0 1rem;
	}
	#loading h2 {
		font-size:1.75rem;
		font-style:italic;
		margin-bottom:2rem
	}
	#loading a {
		color:#fff;
		font-size:.9rem;
	}
	#loading a:hover {
		text-decoration:underline;
	}
	
	@media (min-width:768px) and (max-width:1024px) {
		#loading {
			background-position:85%;
		}
		
	}

	@media (min-width:280px) and (max-width:767px) {
		#loading {
			background-position:75%;
		}
		#loading .content {
			width:90%;
		}
		
	}