/*Page CSS pour mon projet du module 293
Version du 13.03.2024
Baptiste Gremaud*/

/*Mise en page pour tout le body*/
body {
  background-color: #d0cfcf;
  font-size: 24px;
}
/*réglage pour toute les balise <p>*/
p {
  justify-content: left;
  text-align: justify;
}

#imageContainer {
  width: 100%;
  display: flex;
  justify-content: center;
}

#colorado {
  width: 50%;
  height: auto;
}
/*mise en page de la barre de navigation*/
nav {
  align-items: center;
  display: flex;
  justify-content: space-around;
  height: 80px;
  border-radius: 50px;
  width: 75%;
  font-size: 24px;
  color: #d0cfcf;
  background-color: #2d2e2e;
}

#conteneur1 {
  display: flex;
  justify-content: center;
  color: #2d2e2e;
}

#menuhistoire {
  display: flex;
  justify-content: center;
  color: #2d2e2e;
}
/*mise en page pour toutes les balsies h1*/
h1 {
  text-align: center;
  font-size: 55px;
}
/*Animation lorsque l'on met la souris sur un élément de la barre de navigation*/
#Accueil a:hover {
  padding: 20px;
  height: 100%;
  background-color: #d0cfcf;
  border-radius: 50px;
  width: 150px;
  color: #2d2e2e;
}
/*Animation lorsque l'on met la souris sur un élément de la barre de navigation*/
#Histoire a:hover {
  padding: 20px;
  height: 100%;
  background-color: #d0cfcf;
  border-radius: 50px;
  width: 150px;
  color: #2d2e2e;
}
/*Animation lorsque l'on met la souris sur un élément de la barre de navigation*/
#Equipes a:hover {
  padding: 20px;
  height: 100%;
  background-color: #d0cfcf;
  border-radius: 50px;
  width: 150px;
  color: #2d2e2e;
}
/*Animation lorsque l'on met la souris sur un élément de la barre de navigation*/
#Draft a:hover {
  padding: 20px;
  height: 100%;
  background-color: #d0cfcf;
  border-radius: 50px;
  width: 150px;
  color: #2d2e2e;
}
/*Animation lorsque l'on met la souris sur un élément de la barre de navigation*/
#Stars a:hover {
  padding: 20px;
  height: 100%;
  background-color: #d0cfcf;
  border-radius: 50px;
  width: 150px;
  color: #2d2e2e;
}

article {
  margin-top: 20px;
  text-align: justify;
  justify-content: left;
  width: 40%;
}

#avalanche {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
  align-items: center;
}
/*Mise en page pour que l'on aient pas les balise contenant
un lien souligné de bleu, aussi bien mise en forme pour 
l'animation*/
a {
  color: #d0cfcf;
  font-style: normal;
  text-decoration: none;
}

nav div a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #2d2e2e;
  border-radius: 50px;
  width: 150px;
  color: #d0cfcf;
  padding: 10%;
}

#imageHistoire {
  border-radius: 50%;
}

#texteHistoire {
  justify-content: left;
  text-align: justify;
  width: 40%;
}
/*Mise en forme de l'image*/
#fleury {
  justify-content: left;
  width: 500%;
  margin-left: 2%;
}

#pHistoire {
  width: 40%;
  justify-content: right;
  margin-right: 50px;
}

#histoire2 {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
/*Mise en forme de l'image*/
#imageToronto {
  width: 40%;
  margin-top: 10px;
}

#monEquipes {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
  align-items: center;
}

#texteEquipes {
  width: 40%;
}

#texteHistoire2 {
  margin-right: 5%;
}
/*Marge pour que les images ne touche pas 
les autre éléments de la page*/
img {
  margin: 20px;
}

#anheimDucks img {
  width: 120%;
  align-items: right;
}

#canadiens img {
  height: 500px;
  margin-left: 138px;
}

#texteCanadiens {
  width: 40%;
  justify-content: right;
  margin-right: 20px;
}

#texteImageCanadiens {
  display: flex;
  justify-content: space-between;
}

#nashville {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#texteNashville {
  width: 40%;
  margin-left: 50px;
}

#imageNashville {
  justify-content: left;
}

#draftTexte {
  width: 40%;
}
/*Mise en forme de l'image*/
#nico {
  width: 50%;
}

#draftSuisse {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
/*Mise en forme de l'image*/
#patrick {
  width: 50%;
  margin-left: 47px;
}

#draft2 {
  display: flex;
  justify-content: space-around;
}

#draftTexte2 {
  width: 50%;
  margin-right: 138px;
}

#accueilOvi {
  width: 100%;
  display: flex;
  justify-content: center;
}
/*Mise en page du texte pour qu'il soit 
bien aligné*/
#ovechkinTexte {
  justify-content: left;
  width: 50%;
}
/*Mise en forme de l'image*/
#imageOvechkin img {
  display: flex;
  width: 80%;
  margin-left: 5%;
}

#ovechkin {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#mcdavid {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#mcdavidTexte {
  width: 50%;
}
/*Mise en forme de l'image*/
#mcdavidImage img {
  width: 80%;
  margin-left: 15%;
}

#kane {
  display: flex;
}

#myVideo {
  width: 45%;
  margin-left: 2%;
}

#videoImage {
  width: 25%;
  margin-left: 10%;
  margin-right: 15%;
}

#careyPrice {
  display: flex;
  justify-content: space-between;



}

/*Adaptation pour smartphone*/
@media screen and (max-width: 1000px) {
  /*Mise à la verticale et sectionnement de la 
  barre de navigation pour smartphone*/
  nav {
    color: #d0cfcf !important;
    background-color: #d8181800 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 190px;
    padding-bottom: 190px;
  }

  nav div {
    margin-bottom: 40px;
  }

  #colorado {
    margin-top: 40px;
    width: 90%;
  }
/*Modification de la balise article*/
  article {
    text-align: justify;
    width: 100%;
    justify-content: left;
    padding: 10px;
  }

  p {
    text-align: justify;
    justify-content: left;
    width: 90%;
  }

  #avalanche {
    flex-direction: column;
    justify-content: center;
  }

  #histoire2 {
    justify-content: center;
    flex-direction: column-reverse;
    width: 100%;
  }

  #monEquipes {
    flex-direction: column;
  }
/*Mise à la verticale du contenu*/
  #texteImageCanadiens {
    flex-direction: column-reverse;
    justify-content: center;
  }

  #texteCanadiens {
    justify-content: left;
    margin-left: 5%;
    width: 90%;
  }

  #nashville {
    flex-direction: column;
  }

  #texteNashville {
    width: 90%;
    justify-content: center;
  }

  #texteEquipes {
    width: 90%;
  }

  #draftSuisse {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #draftTexte {
    justify-content: center;
    width: 90%;
    margin-left: 10%;
  }

  #nico {
    margin-right: 40%;
  }

  #draft2 {
    flex-direction: column-reverse;
    justify-content: center;
  }

  #patrick {
    margin-left: 20%;
  }

  #draftTexte2 {
    text-align: center;
    justify-content: center;
    width: 95%;
    margin-left: 5%;
  }

  #ovechkin {
    flex-direction: column;
  }

  #ovechkinTexte {
    width: 90%;
    margin-left: 5%;
  }

  #imageOvechkin {
    margin-left: 10%;
  }

  h3 {
    text-align: center;
  }

  #mcdavid {
    flex-direction: column;
  }

  #mcdavidTexte {
    width: 90%;
    margin-left: 10%;
  }

  #mcdavidImage {
    margin-right: 10%;
  }

  #kane {
    flex-direction: column;
  }

  #kaneTexte {
    margin-left: 5%;
  }

  #kaneImage {
    margin-left: 15%;
  }

  #careyPrice {
    flex-direction: column;
    visibility: hidden;

  }
/*Mise en page du texte*/
  #texteHistoire {
    width: 110%;
    justify-content: left;
    align-items: center;
    text-align: justify;
    margin-left: 55%;
    font-size: 24px;
  }

  #imageHistoire {

    margin-left: 55%;
  }

  #fleury {
     display: none;
  }

  #texteHistoire2 {
    text-align: justify;
    justify-content: left;
    width: 110%;
    margin-left: 20%;

  }

  #menuhistoire {
    margin-left: 55%;
  }

  #titreHistoire {
    margin-left: 55%;
  }
/*Enlever l'image pour plus d'ésthetisme*/
  #laFleur { 
    display: none;
  }

  #anheimDucks {
    margin-right: 20%;
  }
}