body {
    background-color: #bfdefb;	
	background-image: url("/assets/img/background.jpg");
	font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif,Arial,Helvetica,sans-serif;
	display:flex;
	justify-content: center;
	align-items: center;
	min-width: 100%;
	min-height: 100svh;
	margin: 0;
}

.page {
	margin-inline: auto;
	background: #BADBFAbb;
	backdrop-filter: blur(5px);
	border-radius: 0.5rem;
	max-width: 90ch;
	width: 100%;
	border: 1px #4d78a3 solid;
	box-shadow: #00000020 0 0 4px;

}

header {
	border-radius: 0.5rem 0.5rem 0 0;
	padding: 1rem;
	background: linear-gradient(180deg,#ffffff88,#ffffff40 20%,transparent 30%),linear-gradient(0deg,#4880B1aa,#6789C6aa);
	backdrop-filter: blur(5px);
	color: white;
	text-align: center;
	border-bottom: 1px #3b87d3 solid;

}
header p, 
header h1 {
	padding: 0;
	margin: 0;
}

main {
	padding: 1rem;
}
main .projects {
	list-style: none;
	margin: 0;
	padding: 0;
}
main .projects li {
	margin-bottom: 0.5rem;
}


footer {
	    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0.5rem;
    background: linear-gradient(180deg, #ffffff88, #ffffff40 20%, transparent 30%), linear-gradient(0deg, #275c7c, #53b3e7);
    backdrop-filter: blur(5px);
    color: white;
    text-align: center;
    border-top: 1px #3b87d3 solid;
}

main .projects a,
footer a {
	border-radius: 0.2rem;
	padding: 0.2rem 0.5rem;
	border: 1px #4d78a3 solid;
	background: linear-gradient(180deg,#ffffffaa 55%,transparent 60%),linear-gradient(0deg,#C2DEFC,#6789C6);
	color: black;
	text-decoration:none;
	box-shadow: #00000020 0 0px 3px;
	color: #01224f;
}

main .projects a {
	display:block;
}


main .projects a:hover,
footer a:hover {
	background: linear-gradient(180deg, #ffffff8f 45%, transparent 50%), linear-gradient(0deg, #a0c6ed, #5181d7);
    box-shadow: #ffffff57 0 0px 6px;
    color: #1d5795;
}
main .projects a:active,
footer a:active {
	background: linear-gradient(180deg, #ffffff50 45%, transparent 50%), linear-gradient(0deg, #a0c6ed, #5181d7);
    box-shadow: #00000020 0 0px 2px;
    color: #04335b;
}