@font-face {
  font-family: SFPro;
  src: url(SFPro.ttf);
}

@font-face {
  font-family: Fractul;
  src: url(Fractul-Light.ttf);
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: black;
}

::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 10px
}
::-webkit-scrollbar-thumb:hover {
  background: white ;
}

html{
  scroll-behavior: smooth;
}

img{
	width :100%;
}


body{
  margin: 0;
  color : black;
  background-color: white;
  font-family: Fractul;
}

hr, h1, p{
  margin: 0;
}

header{
  position: fixed;
  width : 100%;
  //background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.0) 100%);
  background-color : black;
  z-index : 1000;
}

.logo1{
	width:30%;
	margin-left:10%;
	margin-bottom : 2%;
}

.navbar{
	display : flex;
	align-items: center;
	margin-left : 1%;
	margin-top : 1%;
}

.links{
	margin-left : auto;
	
}

.lien{
	margin-right : 100px;
	color : white;
	text-decoration: none;
	font-family : SFPro;
	font-size : 80%;

}

.lien:hover{
	text-decoration: underline;
}

.top{
	background-color : black;
	padding-bottom : 3%;
}


.video1{
	margin-top : 0%;
	width : 100%;
}

.imagess{
	display:flex;
}

.imagessss{
	display : flex;
	margin-top : 3%;
}

.imgggg{
	border-radius : 10px;
}

.imggggs{
	width : 14vw;
}

.uno{
	margin-left : 3%;
	margin-right : 3%;
}

.dos{
	margin-left : 3%;
	margin-right : 3%;
	display : block;
}

.scenario{
	margin-bottom : 8%;
	width : 70%;
}

.historique{
	margin-bottom : 8%;
}

footer{
	margin-top : 10%;
	background-color : black;
	color : white;
	padding-left : 30%;
	padding-bottom : 4%;
}

.imgfooter{
	padding-top : 4vh;
	padding-bottom : 5%;
	padding-left : 4vw;
	width : 20%;
}

.flexx{
	display:flex;
}

.imgfooter2{
	width: 60%;
}

p, h1{
	padding-left : 3%;
	width : 67%;
	padding-top : 2%;
}

.textfooter{
	width:100%;
	padding-top : 0%;
}

.p2{
	font-size : 9pt;
	padding-left : 3%;
}

.p3{
	font-size : 9pt;
	text-align : center;
	width : 14vw;
}

h1{
	font-family : SFPro;
	margin-bottom : 1%;
}

.infos{
	padding-top : 4%;
	padding-left : 3%;
}

a{
	color:white;
	width:30%;
}







.chat-container {
	margin-left : auto;
	margin-right : auto;
	margin-top : 10%;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 60vw;
}

h2 {
    text-align: center;
    font-family : SFPro;
}

.soustitre {
	text-align:center;
	margin-left:auto;
	margin-right : auto;
	padding:0;
	margin-bottom : 5%;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: rgba(0, 0, 0, 1);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: rgba(0, 255, 0, 1);
}

.chat-messages {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

.message {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}










@media only screen and (max-width: 700px) {
	.logo1{
		width : 80%;
		margin-left : 15%;
		margin-top : 2%;
		margin-bottom : 2%;
	}
	.links{
		display : none;
	}
	.navbar{
		justify-content: center;
	}
	footer{
		padding-bottom : 6%;
		padding-left:2%;
	}
	.imgfooter{
		padding-top:15%;
		padding-bottom:20%;
		padding-left:3%;
		width : 31%;
	}
	
	.video1{
		width : 100%;
		margin-left : 0;
		margin-right : 0;
		margin-top : 25%;
	}
	
	p{
		text-align : justify;
		width : 90%;
	}
	
	.p3{
		text-align : left;
		width : 60vw;
		padding-left : 3%;
	}
	
	body{
		font-size : 10pt;
	}
	
	h1{
		font-size : 17pt;
	}
	.scenario {
		width : 100%;
	}
	.imagess{
		margin-bottom : 6%;
		margin-top : 3%;
	}
	
	.imagessss{
		display : block;
	}
	
	.dos{
		margin-left : 3%;
		margin-right : 3%;
		display : flex;
		align-items: center;
		margin-top : 2%;

	}
	
	.chat-container {
		width : 80vw;
}