#logo {
    height: 55px;
    width: 55px;
    display:inline-block;
}

/*sont utilisés pour l'image de fond*/
html{
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    scroll-behavior: smooth;
}

body{
    min-width: 1100px;
}





/*style utiliser pour faire la barre de navigation*/

li
{
  float: left;
  overflow: hidden;
  height: max-content;
  width: max-content;
}

.menu
{
  display: block;
  color: #2c242c;
  font-weight: bolder;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family:calibri;
  font-size: 17px;
  border:1px solid #c7990c;
  background-color: #ffd965;
cursor: pointer;
}

.milieu{
    text-align: center;
}

.barre{
    min-width: 27.04cm;
    margin-right: auto ;
    text-align:center;
}

#acceuil{
    width: 56.5px;
    text-align: center;
    padding: 14px 16px;
    border:1px solid #c7990c;
    background-color: #ffd965;
}

#navig{
    display:inline-block;
}


#login{
    font-weight: bold;
    cursor: pointer;
}

/*sont utilisés pour le bouton des filtres*/
#filtres{
    min-width: 27.04cm;
    width:622px;
    display: inline-block;
}

#filtre{
    margin-right:200px;

}

.filtrer{
    background: #ffebb5;
    font-family: calibri;
    font-size : 14pt;
    color: #c7990c;
    border-color: #fecb2f;
    margin-left:160px;
}

/*sont utilisés pour la liste d'anime*/

.list{
    border:2px solid #fecb2f;
    margin-top: 21px;
    margin-left: 40px;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;

}

.anime{
    border: 2px solid #fecb2f;
    background-color: #ffebb5;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    display:table;
    padding-bottom: 15px;
    min-width: 1000px;
}

.animage{
    width: 110px;
    height: 156px;
    border: 2px solid #fecb2f;
    display: table-cell;
    align-self: center;
    margin-right: 5px;
}

.titre{
    font-family: Calibri;
    font-size:40pt;
    text-align: center;
    display:table-cell;
    margin-left: 15px;
    padding-right: 5px;
    max-width: 400px;
    min-width: 400px;
    vertical-align: middle;
    color:#c7990c;
}

.rank{
    font-family: calibri;
    font-size:50pt;
    color:#fecb2f; 
    border: 1px solid #fecb2f;
    padding-right: 30px;
    padding-left:30px;
    display:table-cell;
    vertical-align: middle;
    margin-left:50px;
}

/*sont utilisés pour la navigation entre les pages de liste*/
#pages{
    display: inline-block;
}

#pages li{
    margin: 50px;
}
/*est utilisé sur le bouton pour remonter en haut de la page*/
#toTop{
    
    bottom:0;
	right:0;
    width:50px;
    height: 50px;
	margin-right:18px;
    margin-bottom: 18px;
	list-style-type:none;
	position:fixed;
    background-color: #fecb2f;
    border: 2px solid #c7990c;

}

/* sont utilisés pour les titres sur les pages d'animes*/
#tete{
    border: 2px solid #fecb2f;
    width: 840;
    height: 200;
    display: inline-table;
    background-image: url(../images/testBanner.png);
    grid-area:overlap;
}

.entete{
    border: 2px solid #c7990c;
    background-color: #ffd965;
    width: 840;
    height: 95;
    font-weight: bolder;
    font-family: Calibri;
    font-size: 30pt;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 30px;
    display: inline-block;
}

.animeTitre{
    border: 2px solid #c7990c;
    background-color: #ffd965;
    font-weight: bolder;
    vertical-align:middle;
    font-family: Calibri;
    font-size: 30pt;
    padding-left: 3px;
    padding-right: 3px;
}

#titreMilieu{
    display: table-cell;
    vertical-align: middle;
}
/*sont utilisés sur le corps principal des pages d'animes*/
#imageAnime{
    border: 2px solid #c7990c;
    width: 284px;
    height: 402px;
    position: relative;
    margin-left: 30px;
    margin-top: 25px;
}

.informations{
    border: 2px solid #c7990c;
    background-color: #ffebb5;
    width: 840;
    margin-top: 10px;
    display: inline-block;
    text-align: center;
}

#description{
    margin: 30px;
    margin-top: 0;
    text-align: left;
}

.petitTitre{
    font-weight: bold;
    font-family: calibri;
    font-size: large;
}

#synopsis{
    text-align: justify;
    font-family: calibri;
}

#categories{
    margin-left: 30px;
    margin-top: 15px;
    font-family: calibri;
}

.flex{
    display: flex;
}

#infos{
    font-family: calibri;
    font-size: 11pt;
}

#trailer{
    text-align: center;
    margin-top: 15px;
}

#streaming{
    margin-left: 30px;
    margin-top: 30px;
}

.site{
    width: 30px;
    height: 30px;
    border: 2px solid #c7990c;
    background-color: #ffd965;
    margin-right: 10px;
    padding: 3px
}

#imgEtInfos{
display:inline-flex;
}

#strGenCat{
    margin-left: 10px;
}

table{
    border-spacing: 7px;
}

.allerEnDessous{
    width: 100%;
}

.page{
    color:rgb(170, 170, 170);
    cursor:default;
}

.userInput{
    
    padding-top: 50px;
    padding-bottom: 50px;
    
    align-content: center;
    display: inline-block;
}

.textLoginRegister{
    font-family: calibri;
    font-size: 20pt;
    font-weight: bolder;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 50px;
}

.input{
    height: 25px;
    width:400px;
    margin-left: 50px;
}
.submit{
    display: inline-block;
    background-color: #ffd965;
    border-color: #c7990c;
    height: 50px;
    width:200px;
    font-size: 20pt;
    font-weight: bolder;
    font-family: calibri;
    margin-bottom:25px;
    cursor: pointer;
}

.hypertext{
    font-family: calibri;
    color:#0645AD ;
    cursor: pointer;
}

#erreur{
    margin-bottom:25px;
}

.erreur{
    font-family: calibri;
    color: red;
    padding-bottom: 99px;
}

.success{
    font-family: calibri;
    color: greenyellow;
    padding-bottom: 99px;
}

#statutNote{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.statutNote{
    font-family: calibri;
    font-weight: bolder;
    font-size: 12pt;
    height: 30px;
    color: #c7990c;
    border-color: #c7990c;
    border-width: 2px;
    background-color: #fce196;
    margin-bottom: 30px;
}

.point{
    cursor: pointer;
}

.filtrerPerso{
    background: #ffebb5;
    font-family: calibri;
    font-size: 14pt;
    color: #c7990c;
    border-color: #fecb2f;
}

.termine{
    border-color:blue;
}

.enCours{
    border-color:chartreuse;
}

.enPause{
    border-color:yellow;
}

.arrete{
    border-color: red;
}

.aRegarder{
    border-color: gray;
}

.commentaire{
    text-align: left;
}

.commentaireTitre{
    margin-top: 10px;
    margin-left: 10px;
    font-family: calibri;
    font-weight: bolder;
    font-size: 15pt;
    
}

.commentaireBtn{
    color: #c7990c;
    border-color: #c7990c;
    background-color: #fce196;
    font-size: 10pt;
    height: 25px;
    font-weight: bolder;
    margin-bottom: 10px;
}

.message{
    border-color: lightgray;
    margin: 10px;
    width: 820px;
    height: 50px;
}

.right{
    display:flex;
    justify-content: right;
    margin:10px;
}
.commentText{
    font-family: calibri;
    margin: 0;
    margin-left: 40px;
    font-size:15pt;
}

.spaceBetween{
    display:flex;
    justify-content: space-between;
    margin:10px;
    margin-top: 0;
}

.reponses{
display: inline-block;
width: 840;
}

.reponse{
    

text-align: left;
    width: 640;
    margin-left: 200px;
}

.messageReponse{
    border-color: lightgray;
    margin-right: 10px;
    margin-left: 10px;
    width: 620;
    height: 50px;
}

.comLien{
    font-family: calibri;
    font-weight: bolder;
    font-size: 15pt;
    color:#0645AD ;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 5px;
}

.noMargin{
    margin:0;
}

.blink{
    z-index:2;
    background-color: #fdcb3494;
    width: 100%;

    position:absolute;
}