html{
	height: 100vh;
}


body {
	
	height: 100vh;
	margin: 0;
  padding:0;
  font-family: 'Courier New', Courier, monospace;
}

h1{
  color:white;
  text-align: center;
  font-size: 4rem;

}


.site{
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

section{
	display: block;
	width: 100%;
	margin: 0 auto;
	background-color: #000;
	height: auto;
	flex-grow: 1;
}

#logo-jeu{
	margin: 15px;
	height: auto;
	text-align: center;
}
#logo-jeu img{
	max-width: 30%;
	max-height: 500px;
}
#logo-team{
	margin-top: 10px;
	text-align: center;
	height: auto;
}
#logo-team img{
	max-width: 20px;
}

#btn{
text-align: center;	
margin: auto;
}


.btn{
	font: 1rem 'Arial', sans-serif;
    padding: .5rem;
    background: #232946;
    border: none;
    border-radius: 4px;
    margin: 4px;
}

.btn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #232946;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.btn:hover {background-color: #232946}

.btn:active {
  background-color: #232946;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

footer{
	background-color: #000;
	color: #fff;
	height: 7em;
	text-align: center;
}

/* Page de recherche */

.recherche-page section{
	display:flex;
	color: #fff;
	height: 100%;
	justify-content: space-around;
}

.recherche-page article{
	width:48%;
}

/* PAGE  text machine*/

#secretary_text{
	
	position: absolute;
	top: 18%;
	left: 33%;
	display: block;
	max-width: 35%;
  font-size: 35px;
  font-size:1.5rem;
}
 #screen{
	
	 position: relative;
	height:60%;
	vertical-align: middle;
	z-index:1;
	text-align: center;
	
}

img#fond{
	
	
	
	max-width: 100%;
	max-height: 100%;
	
}

#container{
	display: flex;
    justify-content: center;
	    width: 100%;
    flex-direction: column;
    
}

body.text{
	background-color: #3b3b4c;
	display: flex;
	
}


   #btn-text{
text-align: center;	

}


.btn-text{
	font: 1rem 'Arial', sans-serif;
    padding: .5rem;
    background: #BD382D;
    border: none;
    border-radius: 4px;
    margin: 4px;
}

.btn-text {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #BD382D;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.btn-text:hover {background-color: #BD382D}

.btn-text:active {
  background-color: #BD382D;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
} 

/* FORMULAIRE */

input[type="button"], input[type="date"]{
  font-family: arial;
}

input[type="button"]{
  margin-top: 3%;
}

input[type="text"]{
  font-size: 1rem;
}

#f_main{
  margin: 20% 20%;
}

input#f_prenom, #f_nom, #f_date, #f_adresse, #f_sexe, #f_tel, #f_yeux, #f_taille {
	margin: 10px;
	padding: 6px;
	border-radius: 6px;
}




#submit{
text-align: center;	
margin: auto;
}


#submit{
	font: 1rem 'Arial', sans-serif;
    padding: .5rem;
    background: #232946;
    border: none;
    border-radius: 2px;
    margin: 4px;
}

#submit {
  display: inline-block;
  padding: 10px 20px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #232946;
  border: none;
  border-radius: 7px;
  box-shadow: 0 9px #999;
}

#submit:hover {background-color: #232946}

#submit:active {
  background-color: #232946;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

audio{
  display: none;
}

/* Page victime */
.victime-page section{
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.victime-page section div{
width: 20%;
display: flex;
}

.victime-page section div img{
width: 100%;
}

.victime-page section div:not(#criminel) img:hover{
opacity: 0.7;
}

img#cp:hover{
  opacity:1 !important;
}


.victime-page #criminel{
border-left: solid 2px grey;
padding: 4%;
background-color: #000;
}

.victime-page #criminel div{
width: 100%;
display: block;
margin: auto;
}

.victime-page #victime{
margin-left: 1%;
}

/* PAGE RESEAUX*/


body#reseaux {
	height: 100vh;
	margin: 0;
	width: 100%;
}
#banner{
	background-color: #000;
	height: 100px;
}

#profil{
	margin: 20px;
	max-width: 6%;
}

.nav-principale ul li{
	display: inline-block;
	justify-content: space-around;
	text-decoration: none;
	font-size: 25px;
	margin: 0 30px;
}

#box-nav{
	padding-bottom: 10px;
	background-color: #3b3b4c;
	padding: 15px 0px;
    margin: auto;
    text-align: center;
   
}

#box-nav li{
  color:white;
}

  #avatar img {
	max-width: 50px;
    
    margin-top: 5px;
    float: left;
  }

.c_left{
  overflow:auto;
  background-color: #494344;
}


.texte {
	border: 2px #fff solid;
	margin: 0 0 0 70px;
	padding: 20px;
}

.texte img{
margin-top: 10px;
}


#poste{
	margin: 50px;
}