@font-face {
	font-family: Ubuntu;
	src: url(/font/Ubuntu-Medium.ttf);
}

.main-image {
	width: 500px;
}

h1 {
	text-align: center;
}

* {
	font-family: Ubuntu !important
}

body {
	color: #2F2F2F;
	background-color: #F1F1F1;
}

.main-container {
	background-color: white;
	padding: 30px;
	height: 100%;
	box-shadow:
		0 -0.1px 0.8px rgba(0, 0, 0, 0.25),
		0 0.2px 2px rgba(0, 0, 0, 0.1),
		0 1.1px 3.8px rgba(0, 0, 0, 0.087),
		0 2.8px 6.7px rgba(0, 0, 0, 0.091),
		0 6.1px 12.5px rgba(0, 0, 0, 0.099),
		0 19px 30px rgba(0, 0, 0, 0.098);
}

.bg-navbar {
	background-color: #5F5498 !important;
	box-shadow:
		0 -0.1px 2.5px rgba(0, 0, 0, 0.25),
		0 0.2px 5.1px rgba(0, 0, 0, 0.1),
		0 1.1px 8px rgba(0, 0, 0, 0.087),
		0 2.8px 11.8px rgba(0, 0, 0, 0.091),
		0 6.1px 18.2px rgba(0, 0, 0, 0.099),
		0 19px 35px rgba(0, 0, 0, 0.098);
}

.nav-pills .nav-link.active {
	background-color: white;
	color: #5F5498 !important;
}

.card-img-top {
	width: 100%;
	height: 14em;
	object-fit: cover;
}

.carousel-img {
	width: 100%;
	height: 30em;
	object-fit: cover;
}

.card {
	width: 20em;
	height: 26em;
	overflow: hidden;
}

.floating-card {
	float: left;
	margin: 5px;
	max-width: 300px;
}

.carousel-area {
	box-shadow:
		0 -0.1px 2.5px rgba(0, 0, 0, 0.25),
		0 0.2px 5.1px rgba(0, 0, 0, 0.1),
		0 1.1px 8px rgba(0, 0, 0, 0.087),
		0 2.8px 11.8px rgba(0, 0, 0, 0.091),
		0 6.1px 18.2px rgba(0, 0, 0, 0.099),
		0 19px 35px rgba(0, 0, 0, 0.098);
}

.carousel-control-next {
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
}

.carousel-control-prev {
	background: rgb(0,0,0);
	background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
}

.badge-purple {
	color: white;
	background-color: #5F5498;
	padding: 5px;
	padding-right: 10px;
	padding-left: 10px;
}

.align-items-center {
	text-align: center;
}

.embed-responsive {
	box-shadow:
		0 -0.1px 0.8px rgba(0, 0, 0, 0.25),
		0 0.2px 2px rgba(0, 0, 0, 0.1),
		0 1.1px 3.8px rgba(0, 0, 0, 0.087),
		0 2.8px 6.7px rgba(0, 0, 0, 0.091),
		0 6.1px 12.5px rgba(0, 0, 0, 0.099),
		0 19px 30px rgba(0, 0, 0, 0.098);
}

a {
	color: #5F5498;
}

a:hover {
	color: #2F2468;
	text-shadow: 0px 0px 8px rgba(95,84,152,0.3);
}

.card-text {
	font-size: .8rem;
	line-height: 18px;
}

.link {
	background-color: #5F5498;
	color: white;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 10px;
	border-radius: 5px;
}

.link:hover {
	color: #5F5498;
	background-color: white;
	text-decoration: none;
	box-shadow:
		0 0.5px 3.8px rgba(0, 0, 0, 0.34),
		0 7.7px 10.6px rgba(0, 0, 0, 0.164),
		0 24.3px 25.6px rgba(0, 0, 0, 0.075),
		0 62px 85px rgba(0, 0, 0, 0.024);
}

.masonry { 
	display: flex;
	justify-content: center;
	flex-flow: row wrap;
	margin-left: -8px;
	width: 100%;
}

.masonry-brick {
	flex: auto;
	height: 250px;
	min-width: 150px;
	margin: 0 8px 8px 0;
}

.title-link:hover {
	text-decoration: none;
}

.cv p {
	line-height: 18px;
	margin-bottom: 2px;
}

bold {
	font-variant: bold;
}
.smaller-text {
	font-size: 14px;
}

.bigger-text {
	font-size: 20px;
}

.row {
	margin-bottom: 10px;
}

.flag-icon {
	margin-top: -5px;
	display: inline-block;
	width: 30px;
	height: 20px;
	box-shadow:
		0 0.5px 3.8px rgba(0, 0, 0, 0.34),
		0 7.7px 10.6px rgba(0, 0, 0, 0.164),
		0 24.3px 25.6px rgba(0, 0, 0, 0.075),
		0 62px 85px rgba(0, 0, 0, 0.024);
}

.cv-header {
	margin-bottom: 12px;
	padding: 5px;
	padding-left: 12px;
	background-color: #5F5498;
	color: white;
	border-radius: 4px;
	box-shadow:
		0 0.8px 2.2px rgba(0, 0, 0, 0.017),
		0 1.9px 5.3px rgba(0, 0, 0, 0.024),
		0 3.5px 10px rgba(0, 0, 0, 0.03),
		0 6.3px 17.9px rgba(0, 0, 0, 0.036),
		0 11.7px 33.4px rgba(0, 0, 0, 0.043),
		0 28px 80px rgba(0, 0, 0, 0.06);
}

h3 {
	padding: 0;
	margin: 0;
}

.contact-info {
	margin-bottom: 2px;
	margin-left: 20px;
}

.nav-item a {
	font-size: 1.3rem;
}

details {
	margin-bottom: 20px;
}

details.custom summary {
	user-select: none;
    list-style: none;
    cursor: pointer;
}

.arrow {
	transform: rotate(-90deg); /* rotates down arrow to up */
    display: inline-block;
    transition: transform 0.2s ease;
}

details.custom[open] .arrow {
    transform: rotate(0deg); /* rotates down arrow to up */
}

p {
	white-space: pre-line;
}
/* ---------- Responsive / mobile ---------- */

img,
.main-image {
	max-width: 100%;
	height: auto;
}

@media (max-width: 767.98px) {
	.main-container {
		padding: 16px;
	}

	h1 {
		font-size: 1.75rem;
	}

	.cv-header {
		margin-top: 20px;
	}

	.bigger-text {
		font-size: 17px;
	}

	.nav-item a {
		font-size: 1rem;
	}

	.nav-link {
		padding: 0.5rem 0.6rem;
	}

	.row {
		margin-bottom: 16px;
	}

	.card {
		width: 100%;
		height: auto;
	}

	.floating-card {
		float: none;
		max-width: 100%;
		margin: 0 0 12px 0;
	}

	.card-img-top {
		height: 11em;
	}

	.carousel-img {
		height: 15em;
	}

	.masonry-brick {
		height: auto;
		min-width: 100%;
	}

	.main-image {
		width: 100%;
	}

	.cv .row > [class*="col-"] + [class*="col-"] {
		margin-top: 14px;
	}

	.text-justify {
		text-align: left !important;
	}
}

/* Desktop-only decorative background */
@media (min-width: 768px) {
	body:not(.cv-page) {
		background-color: #4A4080;
		background-image: url(/images/bg-geometric.svg);
		background-size: cover;
		background-position: center center;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}
}

/* Printable CV page: no decorative background, plain ground for PDF export */
.cv-page {
	background-color: #FFFFFF;
	background-image: none;
}

/* ---------- Print / PDF export ---------- */

@media print {
	body,
	.cv-page {
		background-color: #FFFFFF !important;
		background-image: none !important;
	}

	.main-container {
		box-shadow: none !important;
		padding: 0;
	}

	/* Section headers are white-on-purple; without this browsers drop the
	   purple and the headings print as white text on white paper. */
	.cv-header {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		color-adjust: exact;
		box-shadow: none !important;
		border-radius: 0;
	}

	.flag-icon,
	.embed-responsive,
	.carousel-area {
		box-shadow: none !important;
	}

	.row {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.cv-header {
		page-break-after: avoid;
		break-after: avoid;
	}

	a {
		color: #2F2F2F;
		text-decoration: none;
	}

	nav,
	.navbar {
		display: none !important;
	}

	/* The print viewport (~700px) falls under the mobile breakpoint, which
	   would stack the CV into one long column. Restore the desktop grid. */
	.col-12.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-12.col-md-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-12.col-md-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.cv .row > [class*="col-"] + [class*="col-"] {
		margin-top: 0;
	}

	.main-container {
		padding: 0;
	}
}