*{
margin:0;
padding:0;
box-sizing:border-box;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
body{
color:rgb(253, 253, 253);
overflow-x:hidden;
}
.container{
width:1200px;
margin:auto;
}
img{
width:100%;
box-sizing: border-box;
}

h1{
font-size:35px;
}
h2{
font-size:30px;
color:rgb(140, 16, 255);
font-style: italic;
}
h3{
font-size:25px;
color:rgb(140, 16, 255);
}
#panel {
width: 100%;
height: 100vh;
background-color: #000;
}

.keep{
width:10%;
position:fixed;
}
a.hover{
background-image:url(./images/);
background-image: cover;

}
video{
width:100%;
}
/************************ Menu*********************/
html, body {
	margin: 0;
	height: 100%;
	
}
* {
	font-family: "Raleway";
	box-sizing: border-box;
}
.top-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #00baf0;
	background: linear-gradient(to left, rgb(0, 0, 19), rgb(49, 0, 49));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #fff;
	height: 50px;
	padding: 1em;
	font-size:25px;
	
}
.menu {
	display: flex;
	flex-direction: row;
	list-style-type: none;
	margin: 0;
	padding: 0;
	
}
a:hover{
background:rgb(95, 0, 95);
padding:1vh;
border-radius:5vh;
color:white

}
.menu > li {
	margin: 0 1rem;
	
}
.menu-button-container {
	display: none;
	height: 100%;
	width: 30px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#menu-toggle {
	display: none;
}
.menu-button, .menu-button::before, .menu-button::after {
	display: block;
	background-color: #fff;
	position: absolute;
	height: 4px;
	width: 30px;
	transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 2px;
}
.menu-button::before {
	content: '';
	margin-top: -8px;
}
.menu-button::after {
	content: '';
	margin-top: 8px;
}
#menu-toggle:checked + .menu-button-container .menu-button::before {
	margin-top: 0px;
	transform: rotate(405deg);
}
#menu-toggle:checked + .menu-button-container .menu-button {
	background: rgba(255, 255, 255, 0);
}
#menu-toggle:checked + .menu-button-container .menu-button::after {
	margin-top: 0px;
	transform: rotate(-405deg);
}


/*************************section1*************************/

.intros{
padding-top:10vh;
margin-left: 2vh;
margin-bottom:5vh;
width:70%;		
}
.vue{
padding-right:2vh;
width:50%;


}
main{
background-color:rgb(0, 0, 22);
}
/************************section carousel************/

.page-content {
	display: grid;
	grid-gap: 1rem;
	padding: 1rem;
	max-width: 1024px;
	margin: 0 auto;
	font-family: var(--font-sans);
}
@media (min-width: 600px) {
	.page-content {
		grid-template-columns: repeat(1, 1fr);
		
}
}
@media (min-width: 800px) {
	.page-content {
		grid-template-columns: repeat(3, 1fr);
}
}
.card {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding: 1rem;
	width: 100%;
	text-align: center;
	color: rgb(255, 255, 255);
	background-color: whitesmoke;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
	.card {
		height: 350px;
		
}
}
.card:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 110%;
	background-size: cover;
	background-position: 0 0;
	transition: transform calc(var(--d) * 1.5) var(--e);
	pointer-events: none;
}
.card:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200%;
	pointer-events: none;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.320) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.540) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.790) 100%);
	transform: translateY(-50%);
	transition: transform calc(var(--d) * 2) var(--e);
}
.card:nth-child(1):before {
	background-image: url(../images/doctor.jpg);
}
.card:nth-child(2):before {
	background-image: url(../images/index.jpg);
}
.card:nth-child(3):before {
	background-image: url(../images/oa.jpg);
}

.content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 1rem;
	transition: transform var(--d) var(--e);
	z-index: 1;
}
.content > * + * {
	margin-top: 1rem;
}
.title {
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.2;
}
.copy {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.35;
}
.btn {
	cursor: pointer;
	margin-top: 1.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 0.65rem;
	font-weight: bold;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	color: white;
	background-color: black;
	border: none;
}
.btn:hover {
	background-color: #0d0d0d;
}
.btn:focus {
	outline: 1px dashed yellow;
	outline-offset: 3px;
}
@media (hover: hover) and (min-width: 600px) {
	.card:after {
		transform: translateY(0);
}
	.content {
		transform: translateY(calc(100% - 4.5rem));
}
	.content > *:not(.title) {
		opacity: 0;
		transform: translateY(1rem);
		transition: transform var(--d) var(--e), opacity var(--d) var(--e);
}
	.card:hover, .card:focus-within {
		align-items: center;
}
	.card:hover:before, .card:focus-within:before {
		transform: translateY(-4%);
}
	.card:hover:after, .card:focus-within:after {
		transform: translateY(-50%);
}
	.card:hover .content, .card:focus-within .content {
		transform: translateY(0);
}
	.card:hover .content > *:not(.title), .card:focus-within .content > *:not(.title) {
		opacity: 1;
		transform: translateY(0);
		transition-delay: calc(var(--d) / 8);
}
	.card:focus-within:before, .card:focus-within:after, .card:focus-within .content, .card:focus-within .content > *:not(.title) {
		transition-duration: 0s;
}
}

/*************************section3***************/
.section3{
padding-top:15vh;
text-align:center;
}
.section3 p{
font-size:15px;
padding:2vh;

}
.img{
width:75%;
height:50%;
}

#film{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:30px;
}

.film{
height:20rem;

}

/*************************section4************************/
strong{
font-size:17px;

}

.section4, .section5{
font: small-caps  16px/2 ;
padding:5vh 0 5vh;
line-height:250%;
margin:auto;
}

.meta{
padding-left: 3vh;
}

.mar, .mars{
border-radius:50%;

}
.mars{
float:right;
width:30%;

}
.mar{
float:left;
margin-left:3vh;
width:10%;
}
.egg{
	margin-left: -108px;
    margin-top: 2vh;
	width:10%;
	opacity:0;
}
.egg:hover{
	opacity:1;
	width:50%
	
}


/***************section5*****************/
.ant-man{
width:20%;
align-items: right;
}

/*************section6*******************/
.section6{
padding:5vh 0 5vh;
line-height:250%;
margin-top:50vh;
}
.section6 p, strong{
font-style: italic;
font-size:20px;
width:100%;

}




/***************footer*******************/
footer{
background-color:rgb(0, 0, 19);

}
.footer{
color:white;
padding:5vh 2vh 5vh;
line-height:200%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.contact h3{
color:rgb(255, 255, 255);
padding-bottom:3vh;
}

.fussé {
all: unset; 
position: fixed;
right: 25px;
bottom: 25px;
cursor: pointer;
transform:scale(1.8);
opacity: 0;
transition: .3s;
color:rgb(194, 129, 255);
width:2%;
}
/******************* Responsive 700px *********************/
/********************** menu ************************/
@media (max-width: 700px) {
.menu-button-container {
	display: flex;
	
}
.menu {
	font-size:15px;
	top: 0;
	left: 0;
	width: 100%;
	justify-content: center;
	align-items: center;
}
#menu-toggle ~ .menu li {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
#menu-toggle:checked ~ .menu li {
	border: 1px solid #333;
	height: 2.5em;
	padding: 0.5em;
	transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu > li {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0.5em 0;
	width: 100%;
	color: white;
	background-color: #222;
}
.menu > li:not(:last-child) {
	border-bottom: 1px solid #444;
}

/*************************** style.css********************/
.container{
	width:700px;
	margin:auto;
	padding:auto;
}
img{
	width:100%;
}
h2, h3{
	padding-left:5vh;
}
h1{
	font-size:25px
}
.section1 p{
	width:100%;
}

#film{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap:30px;
}
.film{
	width:30rem;
}

.section3 {
	margin-bottom:10%;
}
.section3 p{
	text-align: left;
}
.section4 p{
	width:75%;
	padding-left:2vh;
}
.mars{
	margin-right:40%;
}
.intro{
	width:40rem;
	margin-bottom:10vh;
}
.img{
	height:60%
}

.section6 p{
	padding-left:2vh;
}
}

/******************* responsive 320 *******************/

/************* titre - menu ***************/
@media (max-width: 450px){
	.menu{
		font-size:15px;
		overflow:hidden;
	}
	h2, h3{
		margin:-20px;
	}
	.page-content{
		width:45%;
		margin-left:0;
	}
	.intro{
		width:45%;
	}
	.section1 p{
		width:60%;
	}
	.film{
		width:20rem;
	}
	.section4{
		width:50%;
		margin:0;
	}
	.fussé{
		width:5%;
	}
	.containers{
		overflow:hidden;
	}
	.footer{
		grid-template-columns: repeat(1, 1fr);
	}
	.citations{
		width:100%;
	}
	.fussé{
		margin-right: 80vh;
		width: 3%;
	}
	.section6 p{
		margin:8vh;
	}

}