/*
  Auteur      : Théo Angéloz
  Date        : 19.12.2019
  Description : Css du projet  
*/

/* Paramètre généraux*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: ascotaregular;
}
/*====================================================================================================*/
/* Importation de police*/
@font-face {
  font-family: 'ascotaregular';
  src: url('../font/ascota_regular-webfont.woff2') format('woff2'),
  url('../font/ascota_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/*====================================================================================================*/
/*barre de scroll*/
::-webkit-scrollbar{ 
  width: 12px; 
} 
::-webkit-scrollbar-track{ 
  -webkit-border-radius: 10px; 
  border-radius: 10px; 
} 
::-webkit-scrollbar-thumb { 
  -webkit-border-radius: 10px; 
  border-radius: 10px; 
  background: rgb(102, 99, 99); 
}  
/*====================================================================================================*/
/*Paramètre du body*/ 
body {
  background-color: rgb(226, 226, 226);
}
/*====================================================================================================*/
/*Paramètre du body*/
#backroundImage{
  flex-direction: column;
  background-repeat:no-repeat;
  background-image: url(../images/imageIndex.jpg);
  background-attachment: fixed;
  background-size: 1920px 1080px;
  overflow-x: hidden;
  justify-content: center;
}
/*====================================================================================================*/
/* Menu de navigation*/
.barreNav {
  background-color: darkgrey;
  overflow: hidden;
  height: 80px;
}

.barreNav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 5px 20px;
  text-decoration: none;
  font-size: 17px;
}

.barreNav ul {
  margin: 25px 0 0 0;
  list-style: none;
}

.barreNav a:hover {
  background-color: white;
  color: darkgrey;
}

#boutonAccueil {
  background-color: darkgrey;
  color: white;
}

.barreNav .active {
  background-color: white;
  color: darkgray;
}
/*====================================================================================================*/
/* Titres*/
.titres {
  text-align: center;
  padding-top: 2em;
  padding-bottom: 2em;
}

.titreTrois{
  text-align: center;
  padding-top: 2em;
}  

#titresAccuil{
  text-align: center;
  padding-top: 2em;
  padding-bottom: 0.5em;
  font-size: 4em;
}
/*====================================================================================================*/
/*Partie qui présente la feuille A4 */
.feuilleA4 {
  min-height: 20vh;
  background-color: snow;
  margin-left: 20em;
  margin-right: 20em;
  margin-top: 5em;
  border-radius: 10px;
}
/*====================================================================================================*/
/*Paramètre pour que les images soient à gauche et le texte à droite*/
.image {
  height: 300px;
  border: 3px solid black;
  border-style: double;
}

.imageGauche {
  display: flex;
  margin-left: 5em;
  margin-right: 5em;
  margin-top: 2.5em;
  margin-bottom: 2em;
}

.paragrapheDroite {
  margin-left: 2em;
  text-align: justify;
}
/*====================================================================================================*/
/*Paramètre pour que les images soient à droite et le texte à gauche */
.imageDroite {
  display: flex;
  margin-left: 5em;
  margin-right: 5em;
  margin-top: 2.5em;
  margin-bottom: 2em;
}

.paragrapheGauche {
  margin-right: 2em;
  text-align: justify;
}
/*====================================================================================================*/
/*Images des statistiques*/

#StatsCrosby{
  margin-top: 11em;
  width: 125%;
}

#StatsConnor{
  margin-top: 1em;
  width: 100%;
}

#StatsHischier{
  margin-top: 8em;
  width: 140%;
}

/*====================================================================================================*/
/*Tout ce qui concerne le texte dans le tableau ainsi que les tableaux*/
.categorie{
  margin-left: 2.8em;
  margin-right: 2.8em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: justify ;
}

table{
  border-collapse:collapse;
  width:90%;
  text-align:center;
  margin: auto;
}

td {
  border:1px solid black;
  width:20%;
  }
/*====================================================================================================*/
/*Contenu des  sous titres*/
.contenuDesTitres{
  padding-right: 5em;
  padding-left: 5em;
  text-align: justify;
  margin-right: 2em;
  text-align: justify;
}
/*====================================================================================================*/
/*Paramètres par rapport à l'image de la patinoire dans la page "le hockey"*/
#imagePatinoire{
  display: flex;
  margin-left: 5em;
  margin-right: 5em;
  margin-top: 2.5em;
  margin-bottom: 2em;
  border-radius: 200px;
  margin-left: auto;
  margin-right: auto;
}
/*====================================================================================================*/
/*bouton de l'accuil*/
.bouton {
	font-size: 20px;
	text-decoration: none;
	color: #EE2929;
	border: black 0.1em solid;
	padding: 0.02em 1em;
  border-radius: 10px;
}

.bouton:hover{
	background: darkgray;
  color: snow; 
}
/*====================================================================================================*/
/*Texte sur le bouton mais sous le titre de l'accueil*/
#texteAccueil{
  font-size: 20px;
  text-align: center;
  padding-bottom: 1em;
}
/*====================================================================================================*/
/*Supprime la décoration du lien (la barre sous le lien)*/
#lien{
  text-decoration: none;
}
/*====================================================================================================*/
/*Paramètre pour centrer le bouton*/
#centerTexte{
  text-align: center;
}
/*====================================================================================================*/
/*Pied de page*/
footer{
  background: rgb(102, 99, 99);
  position:absolute;
  width:100%;
  height:6.1em;
  display: block;
  text-align: center;
  padding-top: 30px; 
  font-weight: bold;
  font-size: 3mm;
}
/*====================================================================================================*/
/*Adaptation du site à  la taille de l'écran*/	
@media screen and (max-width: 1600px) {
  #StatsCrosby{
    margin-top: 12em;
    width: 125%;
  }
  #StatsHischier{
    margin-top: 3em;
    width: 140%;
  }
}

@media screen and (max-width: 1600px) {
  #StatsCrosby{
    margin-top: 5em;
    width: 155%;
  }
}

@media screen and (max-width: 1500px) {
  #StatsCrosby{
    margin-top: 7em;
    width: 150%;
  }
  #StatsHischier{
    margin-top: 3em;
    width: 165%;
  }
}

@media screen and (max-width: 1450px) {
  #StatsCrosby{
    margin-top: 5em;
    width: 170%;
  }
  #StatsHischier{
    margin-top: 3em;
    width: 170%;
  }
}

@media screen and (max-width: 1400px) {
  #StatsCrosby{
    margin-top: 3em;
    width: 165%;
  }
  #StatsHischier{
    width: 220%;
  }
}

@media screen and (max-width: 1350px) {
  .feuilleA4 {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 10px;
  }
  #StatsCrosby{
    margin-top: 12em;
    width: 125%;
  }
  #StatsHischier{
    margin-top: 10em;
    width: 155%;
  }
}

@media screen and (max-width: 950px) {
  #StatsCrosby{
    margin-top: 8em;
    width: 150%;
  }
  #StatsHischier{
    margin-top: 3em;
    width: 170%;
  }
}

@media screen and (max-width: 800px) {
  .imageGauche {
    margin-left: 0em;
    margin-right: 0em;
  }
  .paragrapheDroite {
    padding-right: 1em;
  }
  .imageDroite {
    margin-left: 0em;
    margin-right: 0em;
  }
  .paragrapheGauche {
    margin-left: 0.5em;
  }
  #StatsCrosby{
    width: 145%;
  }
}

@media screen and (max-width: 700px) {
  .barreNav {
    background-color: darkgrey;
    overflow: hidden;
    height: 90px;
  }
  #StatsCrosby{
    margin-top: 2em;
    width: 160%;
  }
  #StatsHischier{
    margin-top: 3em;
    width: 175%;
  }
}

@media screen and (max-width: 650px) {
  #StatsCrosby{
    margin-top: 3em;
    width: 165%;
  }
  #StatsHischier{
    margin-top: 3em;
    width: 170%;
  }
}

@media screen and (max-width: 600px) {
  #StatsCrosby{
    margin-top: 3em;
    width: 170%;
  }
  #StatsHischier{
    margin-top: 3em;
    width: 175%;
  }
}
/*====================================================================================================*/