/* -----Menu Déroulant------*/


/*-------------Menu------------------------*/
nav{
  width:100%;
  margin:0 auto;
  /*background-color:#00008b;*/
  top:0;
  font-weight:700;
  color:#fff;
  display: flex;
  justify-content: center;

}
nav ul{
  list-style-type:none;
  padding-left:1vw;
  margin:0;
}
nav ul li{
  float:left;
  text-align:left;
  position:relative;
  margin-right:1vw
}

nav ul li:hover{
  /*background-color:#00008b;*/
  border:none;
  border-bottom:1px solid #00008b
}
/*
 nav ul::after{
     content:"";
     display:table;
     clear:both;
*/

nav a{
  display:block;
  text-decoration:none;
  color:#fff;
  border-bottom:2px solid transparent;
  /*padding:10px 2px*/
}

nav a:hover{
  color:#e0ffff;
  border-bottom:2px solid #ffd700;
  border-bottom:1px solid #00008b
}

nav a::after{
  margin-left:0px;
  color:white;
}

.sous{
  display:none;
  box-shadow:0 1px 2px #CCC;
  background-color:blue;
  position:absolute;
  /* min-width:100px;*/
  z-index:1000;
  font-size: min(10pt,2vw);
}

nav > ul li:hover .sous{
  display:block;
  /* border-right:5px solid #00008b*/
}

.sous li{
  float:none;
  width:95%;
  text-align:left;
  margin-right:.5vw;
}
.sous a{
  padding:min(10px,1vw);
  border-bottom:none;
  font-size:min(1.3em,2.2vw)

}



.sous a:hover{
  /*border-bottom:none;*/
  background-color:#ff0;
  border:1px solid #00008b;
  color:#00008b
}

.deroulant > a::after{
  content:" ▼";
  font-size:1em;
  color:white;
}


/*  Disposition en grille -------------------------------- */

.container {

  /*max-width: 700px;*/
  /*border:5px solid darkblue;*/
  border-bottom: none;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 30px auto 60px 30px  580px 20px;
  gap: 0px 0px;
  /*grid-template-areas:
    "bandeau bandeau"
    "error error"
    "Top Key"
    "Menu Menu"
    "Main Main"
    "footer footer";*/
  grid-template-areas:
    "bandeau"
    "error"
    "Top"
    "Menu"
    "Main"
    "footer";
}
.bandeau{
  text-align: center;
  width:100%;                     /* largeur de la fenêtre */
  /*padding-top: 10px;*/
  /*border: 2px solid #F0F0FF;*/
  overflow: hidden;                     /* masque tout ce qui dépasse */
  /* box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;*/

}
.bandeau > :first-child {
  animation: blinkingText 5s infinite linear;
  /*animation: blinkingText 20s infinite cubic-bezier(0.79, -0.23, 0.55, 1.28);*/
  /*animation-iteration-count: 50;*/
  color:lightgoldenrodyellow;
  font-weight: bold;
  /*z-index:100;*/
  font-size: min(1em,2.8vw);
  /* background-color:darkblue;*/
  background-size: 30%;

}

.error{
  grid-area: error;
  /* background-color: darkblue;*/
  color: white;
  display:flex;
  justify-content:flex-end;
  flex-wrap: wrap;
  align-items: center;
  font-size: .6em;
  font-weight:bold;
  animation-name: blinkingText;
  animation-duration: 5s;
  animation-iteration-count: infinite;


}
@keyframes blinkingText{

  0 {
    // opacity: 0;
    //color:lightblue;
  }


  15% {
    //opacity: 1;
    //color: aqua;
  }
  */
  30% {
    //opacity: 1;
    //color: yellow;
    transform: scale(1);
  }

  55%{
    //color: lightgoldenrodyellow;
    transform: scale(1.2);
  }


  100% {

    transform: scale(1);
    //opacity: 0;
  }
}

@keyframes defilement {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

.Menu {
  padding-top:5px;
  /*background-color: darkblue;*/
  grid-area: Menu;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: min(1.4em,2.4vw);
  font-family:'Arial';
}
.Top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: min(5vw,24pt);
  font-weight:bold;
  font-style: italic;
  grid-area: Top;
  /*background-color: darkblue;*/
  color: orange;

}
.Key {
  grid-area: Key;
  /*display:none;*/
  display: flex;
  /*max-width:60px;*/
  flex-direction:column;
  /*background-color: darkblue;*/
  justify-content: center;
  align-items: flex-end;
  color:yellow;
  /*padding:5px;*/
  margin-top:-10px;
}
.footer {
  grid-area: footer;
}
.Main {
  grid-area: Main;
  /*margin-top: 10px;*/
}

/* CSS spécifiques*/

html{
  font-family: sans-serif;
  line-height: 1em;
  scrollbar-width:none;

}
body{
  margin:0;
  /*max-width:600px;*/
  background-color:darkblue;
  /*background-image: url("./img/bmpic19-2sr.jpg");
  background-repeat:repeat;
   background-size: cover;*/
}

input{
  font-size:2vh;
  /*width:90%;*/
  text-align:left;
}
input[type=button]{
  text-align: center;
  font-weight:bold;
  max-width:80px;
  cursor:pointer;
}

#villains{
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  text-align: center;

  /*font-size: min(1.3em,5vw);*/
}
#mainFrame{
  width:100%;
  height:100%;
  border:none;
  /* min-height:600px;*/
  /*padding-bottom: 10px;*/
  font-family:sans-serif;
  background-color: white;

}

#loginText{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  min-width:150px;
  padding:5%;
  background-color:blue;
  color:white;
  z-index:10;
  font-size:1.2em;
  flex-wrap:nowrap;

}
#registrant{
  font-size: min(1em,1.3vw);
  font-weight:bold;
  font-style:italic;
  cursor:pointer;
  z-index: 1;
  margin-right:max(3px,4vw);
  margin-top:2px;
  animation-name: blinkingText;
  animation-duration: 5s;
  animation-iteration-count: infinite;

}
#login {
  width:min(35px,8vw);
  cursor:pointer;
  margin-right:max(3px,4vw);
  z-index: 1;

}
#accueil{
  margin-left: max(3px,4vw);
  display:flex;
  width:min(40px,8vw);
  cursor:pointer;

}

#oldSite{
  display: flex;
  flex-direction:column;
  /*background-color: darkblue;*/
  align-items: center;
  padding-right:10px;
}
#oldSite > a::after{
  content:none;
}

.elementToFadeInAndOut {
  opacity: 1;
  animation: fade 3s ease-out;
  animation-iteration-count: infinite;
}

.flashy{
  width: 5%;
  padding-bottom:2px;
  animation-name: fade;
  animation-duration: 3s;
  animation-iteration-count: infinite;

}


@keyframes fade {
  0%{
    opacity: 1
  }

  25% {
    opacity: .5
  }
  70,100%{
    opacity=1
  }
}