/***************************************************************
*
* BODY
*
****************************************************************/

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Full height of the viewport */
}

main {
	flex: 1; /* Take up the available space */
}

/***************************************************************
*
* NAVIGATION
*
****************************************************************/

nav
{
	background-color: #353441;
	height: 90px;
}

/***************************************************************
*
* TYPOGRAPHY
*
****************************************************************/

h1 {
	font-family: 'Dancing Script', cursive;
	font-size: 3.4rem;
}

body {
	font-family: 'Poppins', sans-serif;
}

p
{
	color: #676767;
}

.heading
{
	color: #353441;
}

/***************************************************************
*
* HOME PANEL
*
****************************************************************/

#homePanel {
	color: #ffffff;
	background: url("/images/bg.webp") no-repeat center center;
	background-size: cover;
	height: 540px;
}

/***************************************************************
*
* FADE CONTAINER
*
****************************************************************/

.fade-container {
	position: relative;
	/* Apply a vertical fade from 0% opacity to full opacity */
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

/***************************************************************
*
* ICONS
*
****************************************************************/

#social i
{
	font-size:2.4em;

}

#social a
{
	margin-right:20px;
	color: #ffffff !important;
}

#social a:last-child
{
	margin-right: 0;
}

#social a:hover
{
	color: #000000 !important;
}

/***************************************************************
*
* FOOTER
*
****************************************************************/

.footer
{
	background-color: #353441;
}

.footer p
{
	color: #ffffff;
	font-size:0.9em;
}

.footer a
{
	color:#ffffff;
	text-decoration: none;
}