@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Source+Sans+Pro:wght@300&display=swap');

/***************Root***************/

:root {
	--blanc: hsl(320, 7%, 92%);
	--noir: hsl(225, 9%, 9%);
	--rouge: hsl(347, 84%, 50%);
	--rouge-op: hsla(347, 84%, 50%, 0.2);
	--gris: hsl(261, 6%, 49%);
	--gris-op: hsla(330, 3%, 85%, 0.2);
	--gris-dark: hsl(270, 7%, 22%);
	--header: 5vh;
	scroll-behavior: smooth;
}

/***************Scroll bar***************/

::-webkit-scrollbar {
	height: .6vh;
    width: .3vw;
	background-color: var(--noir);
}

::-webkit-scrollbar-thumb {
	border-radius: 25px;
	background-color: var(--rouge);
}

/***************Selection***************/

::selection {
	color: var(--rouge);
	background-color: var(--rouge-op);
}

/***************Body***************/

body {
	min-width: 300px;
    margin: 0;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
	background-color: var(--blanc);
}

/***************Loading***************/

body::before,
body::after {
	content: '';
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
}

body::before {
	animation: loading .8s cubic-bezier(0.78, 0.03, 0.68, 0.72);
	background-color: var(--rouge);
}

body::after {
	animation: loading .8s cubic-bezier(0.62, 0.13, 0.74, 0.85);
	background: url(../Images/logo_lyon5.svg) var(--noir) center fixed no-repeat;
	background-size: 25%;
}

section {
	scroll-margin-top: var(--header); /* applique la margin scroll top à toutes les section pour que l'ancre ne passe pas derrière le header */
}

button {
	cursor: pointer;
}

@keyframes loading {
	0% {
		width: 100%;
	}
	100% {
		width: 0%;
	}
}

/***************Media queries***************/

@media (orientation: portrait)
{
	body::before,
	body::after {
		height: 0%;
		width: 100%;
	}

	body::after {
		background: url(../Images/logo_ucbl.svg) var(--noir) center fixed no-repeat;
		background-size: 40%;
	}

	@keyframes loading {
		0% {
			height: 100%;
		}

		100% {
			height: 0%;
		}
	}
}