/* variable for my personnal settings */
:root {
	--myBlue: #0050C7;
	--myLightBlue: #C1DAFF;
	--myCompLightBlue: #FFE6C1;
	--myGrayBlue: #4E5968;
	--mySpace: 10px;
	--myWidth: 20px;
}

body {
	/* to get the footer always at the bottom,
	either sticky to the bottom when empty body
	or only appear appear after scrolling to the end  */
	min-height: calc(100vh - 48px);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 
	'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
	'Helvetica Neue', sans-serif;
	font-size: 14pt;
}

/* better looking offcanvas */
.offcanvas {
	max-width: fit-content;
    height: 294px;
}

div {
	scroll-margin-top: 64px;
	/* scroll-margin-top: 3rem; */
}


/* max-width to no wrap down the button on small device */
.navbar-brand {max-width: 73%;}

/* to have same height as mobile view - consistency */
nav > .container {height: 48px;} 

/* need to keep */
a.nav-link:hover:not(#top) {
	background-color: var(--myBlue) !important;
	color: white;
}

/* change colors for mine */
.bg-body {background-color: var(--myCompLightBlue) !important;}

.bg-body-secondary {background-color: var(--myLightBlue) !important;}

.bg-body-tertiary {background-color: var(--myGrayBlue) !important;}

.bg-primary {background-color: var(--myBlue) !important;}

.text-primary {color: var(--myBlue) !important;}

picture:not(.float-start,.float-end) > img {
	width: 100vw;
}

/* Boorstrap's color */
.bs-color {color: #7d2fff;}

/* zoom hover img - didn't find a Bootstrap one*/
a > picture > img {transition: .2s;}

a > picture > img:hover {transform: scale(1.04);}

/* labs section to not have empty space if not the last */
.bg-body:not(.last) {height: 100%;}

/* footer section - didn't find a Bootstrap version */
footer {
	position: sticky;
  	top: 97vh;
	text-shadow: 5px 5px var(--mySpace) var(--myGrayBlue);
}

@media (max-width: 3840px) and (min-width: 961px) {
	#passions {
		background: url("passions/img/bg/left.gif"), url("passions/img/bg/right.gif");
		background-repeat: no-repeat;
		background-size: 50vw auto;
		background-position: 0px 0px, 50vw 0px;
		background-attachment: fixed;
	}

	#passions > body {
		background-color: unset !important;
	}

  }

@media (max-width: 960px) {

}

@media (max-width: 480px) {
	picture > img {
		width: 100vw;
	}
}