body{
	background-image: url(../images/bg-main-sc.png);
	background-size: max(750px, 100%) auto;
	background-position: center top;
	background-repeat: no-repeat;
	background-color: #a4ccf6;
}


/* GLOBALS */

p{
	font-family:Jua, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5{
	font-family:'Protest Riot', Jua, Arial, Helvetica, sans-serif;
}
h1, h2{ 
	text-align: center;
	color:#FFFFFF;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
}
p{
	color:#FFFFFF;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
}

.site-logo{
	margin:	0 auto;
	text-align:	center;
	margin-top: -10px !important;
	max-width: 250px; height: auto;
}


/* BOXES */

.box-link{
	color: inherit;
}

.box-link:focus-visible{
	outline:	3px solid #fff;
	outline-offset:	4px;
}

.box-link:hover {
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	transform: scale(1.02);
}

.test-box.box-1:hover{ transform:	rotate(-1.5deg) scale(1.02); }
.test-box.box-2:hover{ transform:	rotate( 1.5deg) scale(1.02); }
.test-box.box-3:hover{ transform:	rotate(-1deg)  scale(1.02); }
.test-box.box-4:hover{ transform:	rotate( 1deg)  scale(1.02); }

.box-text{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #eeeeee;
}
.box-text h3{
	text-align:	center;
}
.test-box{
	background-size:cover;
	background-size: 100%;
	background-repeat:no-repeat;
}
.test-box .box-text{
	margin-top: 250px;
	background-color:rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur( 10px );
	margin-left: -2rem;
	margin-right: -2rem;
	padding:1rem;
	text-align:left;
	color:#344558;
	display: flex;
	align-items: center;
	min-height: 100px;
}
.test-box .box-text h3{
	font-family:'Protest Riot', Jua, Arial, Helvetica, sans-serif;
	font-size:24px;
}


.site-footer{
	background:	rgba(255,255,255,.6);
	backdrop-filter:	blur(6px);
	font-size:	0.9rem;
	color:	#2b2b2b;
}
.site-footer p{
	color:#344558;
	text-shadow: none;
}
.site-footer .footer-link{
	color:	#344558;
	text-decoration:	none;
}

.site-footer .footer-link:hover{
	text-decoration:	underline;
}





/* Image Assets */
.friend-logo {
	width: auto;
	height: 75px;
}