.div-with-bg {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: scroll;
	height: 500px; 				/* set the height of the div */
	border-bottom: 3px solid transparent;
	border-image: var(--gradient) 1;
	display: flex;
	flex-direction: column;		/* ensure stacked elements */
	justify-content: center;	/* horizontal centering */
	align-items: center;    	/* vertical centering */
	text-align: center;    		/* center the text content inside */
}

/* titles */
.title1, .title2 {
	color: var(--white);
	opacity: 0.6;
}

.title1,
.title1 a,
.title1 a:link,
.title1 a:visited,
.title1 a:hover,
.title1 a:active {
	font-size: 120px; /* rapport 120/500=0.24 */
	color: var(--white);
	text-decoration: underline;
	text-decoration-color: var(--orange);
	text-decoration-thickness: 9px; /* 9/120=0.075 */
	text-underline-offset: 8px;
	border: none;
	outline: none;
}

.title2,
.title2 a,
.title2 a:link,
.title2 a:visited,
.title2 a:hover,
.title2 a:active {
	font-size: 40px; /* one third of title1 */
	color: var(--white);
	border: none;
	outline: none;
}

/* iphone portrait */
@media screen and (max-width: 450px) {
	.div-with-bg {
		height: 225px; /* 225/500=0.45 */
	}
	.title1,
	.title1 a,
	.title1 a:link,
	.title1 a:visited,
	.title1 a:hover,
	.title1 a:active {
		font-size: 54px;
		text-decoration-thickness: 4px;
	}
	.title2,
	.title2 a,
	.title2 a:link,
	.title2 a:visited,
	.title2 a:hover,
	.title2 a:active {
		font-size: 18px;
	}
}
	
/* iphone landscape */
@media screen and (min-width: 450px) and (max-width: 900px) { 
	.div-with-bg {
		height: 250px;
	}
	.title1,
	.title1 a,
	.title1 a:link,
	.title1 a:visited,
	.title1 a:hover,
	.title1 a:active {
		font-size: 60px;
		text-decoration-thickness: 4.5px;
	}
	.title2,
	.title2 a,
	.title2 a:link,
	.title2 a:visited,
	.title2 a:hover,
	.title2 a:active {
		font-size: 20px;
	}
}
	
/* ipad portrait */
@media only screen and (min-width: 900px) and (max-width: 1100px) { 
	.div-with-bg {
		height: 425px;
	}
	.title1,
	.title1 a,
	.title1 a:link,
	.title1 a:visited,
	.title1 a:hover,
	.title1 a:active {
		font-size: 102px;
		text-decoration-thickness: 7.65px;
	}	
	.title2,
	.title2 a,
	.title2 a:link,
	.title2 a:visited,
	.title2 a:hover,
	.title2 a:active {
		font-size: 34px;
	}	
}
	
/* ipad landscape */
@media only screen and (min-width: 1100px) and (max-width: 1400px) { 
	.div-with-bg {
		height: 425px;
	}
	.title1,
	.title1 a,
	.title1 a:link,
	.title1 a:visited,
	.title1 a:hover,
	.title1 a:active {
		font-size: 102px;
		text-decoration-thickness: 7.65px;
	}
	.title2,
	.title2 a,
	.title2 a:link,
	.title2 a:visited,
	.title2 a:hover,
	.title2 a:active {
		font-size: 34px;
	}
}