/* 
  Auteur      : Aurélien Bulliard
  Date        : 19.12.2019
  Description : Feuille de Styles projet personnel (EMF1)
 */
 
 /* Recadrage des marges + application de la police sur toute la page */
 
 body {
  font-family: Formula1-Regular, Verdana;
  margin: 0px;
  margin-top: 0px;
}
html{
  margin: 0px;
  margin-top: -20px;
}
 /* Mise en forme du logo EMF1 */
h1 {
  font-family: "Formula1", "Verdana";
  text-align: center;
  color: white;
  padding-top: 1em;
}
.logo{
  font-family: "Formula1", "Verdana";
  padding: 0em;
  text-decoration: none;
}
.logo:hover{
  animation-name:none;
  animation-duration: 0s;
}
/* Création des polices personnalisées */
@font-face {
  font-family: Formula1;
  src: url("https://www.formula1.com/etc/designs/fom-website/fonts/F1Black/Formula1-Black.ttf");
}
@font-face {
  font-family: Formula1-Regular;
  src: url("https://www.formula1.com/etc/designs/fom-website/fonts/F1Regular/Formula1-Regular.ttf");
}
/* Différentes classes pour la mise en page d'images */
.cent{
  width: 100%;
}
.imageGauche{
  margin-right: 40%;
  width:60%;
}
.imageDroite{
  margin-left: 40%;
  width:60%;
}
.vignette{
  width:26vw;
}
/* Barre de navigation */
nav {
  background-color: red;
}
a{
  padding: 1em;
  margin-bottom: 0.5em;
  color: white;
  font-family: Formula1-Regular;
  text-align: center;
}
a:hover{
  animation-name: Boutons;
  animation-duration: 1s;
}
header {
  display: flex;
}
.liens{
  flex: 1;
}
#lienDeGauche{
  flex: 0 0 18%;
}
/* Animation des boutons de navigation pour les grandes fenêtres*/
@keyframes Boutons{
  0% {opacity: 1}
  50% {opacity: 0.5; transform:rotate(5deg);}
  100% {opacity: 1; transform:rotate(-5deg);}
}
/* Animation des boutons de navigation pour les petites fenêtres*/
@keyframes navSmall{
  0% {opacity: 1; border: 1px solid red; background-color: red;}
  50% {opacity: 0.5; border: 1px solid #990000; background-color: #cc0000;}
  100% {opacity: 1; border: 1px solid red; background-color: red;}
}
/* Ombrage gris sur la page courrante */
.pageActuelle{
  text-shadow: 5px 5px 10px grey, 4px 4px 25px lightgrey;
}
/* Titre de la page + ligne horizontale */
h3{
  text-align: center;
}
hr {
  width: 85%;
}
/* Mise en page de la boîte grise autour des articles et des articles */
article {
  background-color: lightgrey;
  border: 1px solid black;
  margin-left: 2vw;
  margin-right: 2vw;
}
h4 {
  text-align: center;
}
p{
  margin-left: 2vw;
  margin-right: 2vw;
}
/* Application du Flex pour les articles */
.blocDroite{
  flex: 1 ;
  margin-left: 10vw;
}
.blocGauche{
  flex: 0 0 42.5%;
}
.container {
  display: flex;
  margin-bottom: 10px;
}
/* Mise en page du tableau */
td {
  text-align: center;
  border: 1px solid black;
}
table {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}
/* Pied-de-page */
footer{
  display: flex;
  bottom: 0px;
  background-image: linear-gradient(white, grey);
}
#piedDePage{
  text-align: right;
}
.sources{
  color: black;
  text-align: center;
}
/* Article au centre de la page */
.blocCentre{
  margin-left: 12.5em;
  margin-right: 12.5em;
}
/* Patch d'un bug avec le Gif de la page d'acceuil */
@media screen and (max-width: 1809px) {
  #gifindex{
    height: 67%;
  }
}
@media screen and (max-width: 1500px) {
  #gifindex{
    height: 60%;
  }
}

/* Centrage des audios */
audio{
  margin: 0 auto;
  display: table;
}
/* Mise en page des listes à puces */
li{
  margin-top: 2px; 
  margin-bottom: 2px;
}
/*Mise en page pour petites fenêtres*/
/*Bouton menu déroulant*/
.boutonDeroulant {
  display: none;
}
.contenuMenu {
  display: none;
  position: absolute;
  background-color: red;
  border: 3px solid black;
  min-width: 160px;
  padding: 12px 16px;
  z-index: 1;
  animation-name: deroulant;
  animation-duration: 1s;
}
.boutonDeroulant:hover .contenuMenu {
  display: block; 
}
.boutonDeroulant:hover {
  cursor: pointer; 
}
/*détection de petites fenêtres*/
@media screen and (max-width: 996px) {
  .liens, #lienDeGauche {
    display: none;
  }
  .boutonDeroulant {
    display: inline-block; 
  }
  .container {
    display: block; 
  }
  .blocDroite {
    margin-left: 2vw; 
  }
  #gifindex {
    height: 100%; 
  }
}
/*Bouton de menu déroulant*/
.menu {
  width: 4em; 
  margin-top: -30px;
}
/*Liens du menu déroulant*/
.lienDeroulant {
  display: block; 
  border: 1px solid red;
}
.lienDeroulant:hover{
  animation-name: navSmall;
  animation-duration: 1s;
}
/* Animation de l'apparition du menu déroulant*/
@keyframes deroulant{
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/* Message d'erreur si on utilise Internet Explorer */
.alert {
  padding: 20px;
  background-color: orange;
  color: white;
  margin-bottom: 15px;
}

/* Le bouton pour fermer le message */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* Animation bouton pour fermer le message */
.closebtn:hover {
  color: black;
}
#message {
  display: none; 
}