/***************************************************************
*
* 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
{

}

.nav-link
{
	font-weight: 600;
}

.nav-link:hover
{
	color: #03c2e3;
}

/***************************************************************
*
* LINKS
*
****************************************************************/

p
{
	color: #676767
}

a
{
	color: #03c2e3;
	text-decoration: none;
}

/***************************************************************
*
* BUTTONS
*
****************************************************************/

.btn-primary
{
	background-color: #03c2e3;
	color: #ffffff;
	border: none;
}

.btn-primary:hover
{
	background-color: #666666;
	color: #ffffff;
}

/***************************************************************
*
* 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;
}

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

#homePanel {
	height: 400px;
	background: url('/images/header.webp') no-repeat center center;
	background-size: cover;
	color: #ffffff;
	position: relative;
	overflow: visible; /* allow image to spill outside */
	margin-bottom:100px;
}

#homePanel #profilePic {
	position: absolute;
	bottom: -100px; /* how much it spills below the panel */
	left: 50%;
	transform: translateX(-50%);
	width: 200px; /* adjust size as needed */
	height: 200px;
	border-radius: 50%; /* makes it circular */
	border: 4px solid white; /* optional border */
	object-fit: cover; /* ensures the image stays contained */
}

/***************************************************************
*
* 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%;
}

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

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

footer
{
	background-color: #000000 !important;
	color: #dddddd;
}

footer a
{
	color: #dddddd !important;
}

footer a:hover
{
	color: #ffffff !important;
}