@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 16px;
    color: black;
    font-family: copperplate;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 1px;
    background-color: #f3f3f5;
    text-align: left;
    scroll-behavior: smooth;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container {
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
p {
    text-align: justify;
}
a {
    text-decoration: none;
}

#popup{
  position: fixed;
  
  Top: 25%;
  text-align: center;
  background-color: rgb(185, 115, 115);
  ;
  
  box-shadow: 0px 0px 20px black;
  border-style: solid;
  border-color:#000000;
  padding:15px;
  font-family: georgia;
  font-size: large;
  line-height: 1.3 ;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
  z-index:1200;
}
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    margin: 2%;
    padding:1%;
}

.table{
  margin:auto;
  margin-top: 2%;
}

#popup:hover{
  border-color:#3b0c0c;
  background-color: rgb(168, 158, 158);
  box-shadow: 10px 10px 30px black;


}

#popup:after{
  display:none;
}


@media only screen and (orientation: portrait) {
  #popup{
    right:5%;
    width: 90%;
  }
}
@media only screen and (orientation: landscape) {
  #popup{
    right: 25%;
    width: 50%;
  }
}

@font-face {
  font-family: copfont;
  src: url(../fonts/COPRGTL.TTF);
}
@font-face {
  font-family: prisfont;
  src: url(../fonts/PRISTINA.TTF);
}
@font-face {
  font-family: perfont;
  src: url(../fonts/PER_____.TTF);
}
@font-face {
  font-family: papfont;
  src: url(../fonts/PAPYRUS.TTF);
}
@font-face {
  font-family: timefont;
  src: url(../fonts/times.ttf);
}

@media only screen and (orientation: portrait) {
  html {
    font-family:timefont;
  }
}

/* Menu */
@media only screen and (orientation: landscape) {
  .menu {
      position: fixed;
      width: 100%;
      min-height: 50px;
      background-color: #010324;
      z-index: 1000;
      bottom: 0;
      left: 0;
      overflow-x: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .menu_list {
      display: flex;
      width: 95%;
      align-items: center;
      justify-content: space-around;
      list-style: none;
  }
  .menu_list_item_link {
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.2rem;
      font-size: 1.1rem;
      transition: 0.3s ease;
      transition-property: color, text-decoration;
  }
  .menu_list_item_link:hover {
    text-decoration: none;
    color: rgb(214, 213, 135);
    transition: background-color 0.5s;
  }
}

@media only screen and (orientation: portrait) {
  .menu {
    width: 100%;
    background-color: #010324;
    z-index: 1000;
    text-align: center;
    position:fixed;
    bottom: 0;
    left: 0;
}
.menu_list {
    list-style: none;
    align-items: center;
    justify-content: space-around;
    justify-content: center;
    width: 100%;
}

.menu_list_item {
  border-color: rgba(255, 255, 255, 0.233);
  border-width: 1px;
  border-style: solid;
  padding-bottom:0.5vh;
  padding-top:0.5vh;
  width:50%;
  float:left;

}

.menu_list_item_link {
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.2vw;
    font-size: 2vh;
}


}

/* Banner */

div#banner_index {
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  flex-direction: column;
}
div#banner_index::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #010324;
  opacity: 0.6;
  z-index: -1;
}

@media only screen and (orientation: landscape) {
  header {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    flex-direction: column;
}
  header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #010324;
    opacity: 0.6;
    z-index: -1;
}

  .banner_main {
    text-align: center;
    color: white;
    padding: 40px;
    text-shadow: 10px 8px 8px black;
  }

  .banner_main_title {
    font-weight: 400;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-family: copfont;
  }

  .banner_main_title {
    font-size: 8vw;
  }

  .legende_fond {
    background-color: #1b1d1e;
      text-align: center;
    padding: 10px;
      border-top-width: 5px;
    border-top-color: black;
    border-top-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: black;
    border-bottom-style: solid;
    color: white; 
    text-align: center;
    font-size: 180%;
      text-transform: uppercase;
  }
}

@media only screen and (orientation: portrait) {
  header {
    height: 25vh;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    flex-direction: column;
    border-bottom-width: 5px;
    border-bottom-color: black;
    border-bottom-style: solid;
  }
  header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #010324;
    opacity: 0.6;
    z-index: -1;
  }

  
  .banner_main {
    text-align: center;
    color: white;
    padding: 40px;
    text-shadow: 10px 8px 8px black;

  }

  .banner_main_title {
    font-weight: 400;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-family: copfont;
  }

  .banner_main_title {
    font-size: 10vw;
  }

  .legende_fond {
    display:none;
  }

}

.banner_main_index {
    text-align: center;
    color: white;
    padding: 40px;
    text-shadow: 10px 8px 8px black;
}


.banner_main_title_index {
    font-weight: 400;
    margin-bottom: 40px;
    font-family:'Cinzel Decorative', cursive;
    font-variant:small-caps;
}

.banner_main_subtitle {
    font-weight: 300;
    font-family: prisfont;
    color:rgb(214, 213, 135);
}

@media only screen and (orientation: landscape) {
  .banner_main_subtitle {
    font-size: 7vh;
  }
  .banner_main_title_index, .banner_main_title_index_to_index {
    font-size: 8vw;
  }
  .banner_main_subtitle_index_to_index{
    font-size: 4.5vw;
  }
}

@media only screen and (orientation: portrait) {
  .banner_main_title_index {
    font-size: 18vw;
    font-family:'Cinzel Decorative', cursive;
    font-variant:small-caps;

  }
  .banner_main_subtitle {
    font-size: 6vh;
    font-family: prisfont;
  }
  .banner_main_title_index_to_index {
    font-size: 18vw;
  }
  .banner_main_subtitle_index_to_index{
    font-size:8vh;
    line-height: 12vh;
  }
} 

/* index page */
.index #banner_index {
    background-image: url('../images/old_castle.jpg');
}

a.index_link {
	text-decoration: none;
  color:rgb(214, 213, 135);
	padding: 10px;
	margin: 15px;
	font-weight: bold;

}
a:hover.index_link {
	text-decoration: none;
	color: FloralWhite;
	transition: color 0.5s;
}

a.index_L1_link {
	text-decoration: none;
  color:rgb(255, 255, 255);
	padding: 10px;
	margin: 15px;
	font-weight: bold;
  transition: color 0.5s;

}
a:hover.index_L1_link {
	text-decoration: none;
	color: rgb(147, 141, 130);
	transition: color 0.5s;
}

/* index_to_index page*/
div#banner_index_to_index {
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  flex-direction: column;
}
div#banner_index_to_index::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #11112f;
  opacity: 0.5;
  z-index: -1;
}

.index_to_index #banner_index_to_index {
  background-image: url('../images/clouds.jpg');
}

a.index_to_index_link{
	text-decoration: none;
  color:rgb(255, 255, 255);
	font-weight: bold;
	transition: color 0.5s, text-shadow 0.5s;

}

a:hover.index_to_index_link {
	text-decoration: none;
	color: rgb(165, 127, 50);
  text-shadow: 0px 0px 5px rgb(0, 0, 0);
	transition: color 1s, text-shadow 1s;
}
.banner_main_subtitle_index_to_index{
  font-weight: 800;
  font-family:'Cinzel Decorative', cursive;
  font-variant: small-caps;
  color:rgb(255, 255, 255);

}

.banner_main_title_index_to_index {
  font-weight: 400;
  margin-bottom: 40px;
  font-variant: small-caps;
  font-family:'Cinzel Decorative', cursive;
}

.banner_main_title_index_to_index {
  position: relative;
    top: 30%; 
    right: 50%;
  transform: translate(50%,-50%);
  text-shadow: 1px 1px 1px #353535,
        1px 2px 1px #353535,
        1px 3px 1px #353535,
        1px 4px 1px #353535,
        1px 5px 1px #353535,
        1px 6px 1px #353535,
        1px 7px 1px #353535,
        1px 8px 1px #353535,
        1px 9px 1px #353535,
        1px 10px 1px #353535,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
    transition: color 2s;

  
}
.banner_main_title_index_to_index:hover {
  color: rgb(0, 0, 0);
	transition: color 2s;
}


.banner_main_index_to_index {
  text-align: center;
  color: white;
  padding: 40px;
  
}

/* cartes page */
.cartes #banner {
    background-image: url('../images/worldmap.png');
}


.content_cartes {
    padding: 5%;
    padding-bottom: 55px;
    background-image: url('../images/parchment.jpg');
}

@media only screen and (orientation: portrait) {
  .content_cartes {
    background-image: url('../images/parchment.jpg');
    padding-bottom:100px;
}
}


/* blasons page */
.blasons #banner {
    background-image: url('../images/papyrus.jpg');
}


.content_blasons {
    padding: 5%;
    padding-bottom: 55%;
    background-image: url('../images/parchment.jpg');
}

@media only screen and (orientation: portrait) {
  .content_blasons {
    background-image: url('../images/parchment.jpg');
    padding-bottom:100px;
}
}

div.gallery {
    font-family: 'Segoe UI';
    font-size: 95%;
    border: 1px solid #ccc;
    background-color: ivory;
    margin: 2%;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: 180px;
  }
  
  div.gallery_b {
    font-family: 'Segoe UI';
    font-size: 95%;
    border: 1px solid #ccc;
    background-color: ivory;
    margin: 2%;
  }

  div.gallery_c {
    font-family: 'Segoe UI';
    font-size: 95%;
    border: 1px solid #ccc;
    background-color: ivory;
    margin: 2%;
  }
  
  div.gallery_b:hover {
    border: 1px solid #777;
  }
  
  div.gallery_b img {
    width: 100%;
    height: 300px;
  }

  div.desc_b {
    padding: 15px;
    text-align: center;
    text-decoration:none;
    color:black;
  }

  div.desc {
    padding: 15px;
    text-align: center;
    text-decoration:none;
    color:white;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 25%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }

  @media only screen and (orientation: portrait) {
    .responsive_c {
      margin-bottom:5%;
      margin-left:14%;
      margin-right:14%;
      padding: 0 6px;
      float: left;
      width: 70%;
    }
  }

  @media only screen and (orientation: landscape) {
    .responsive_c {
      margin:1%;
      padding: 0 6px;
      float: left;
      width: 18%;
    }
  }

  /* Histoire page */
  .histoire #banner {
    background-image: url('../images/clock.jpg');
}
  .content_history {
    background-image: url('../images/parchment.jpg');
    padding-bottom:55px;
  }

  @media only screen and (orientation: portrait) {
    .content_history {
      background-image: url('../images/parchment.jpg');
      padding-bottom:100px;
  }
  }

  /* Hymnes pages */
  .hymnes #banner {
    background-image: url('../images/orchestra.jpg');
}
  .video {
    width: 80vw;
    height: 45vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .video_title {
    font-size: 4vw;
    color:rgb(0, 0, 0);
    padding-bottom:3%;
    text-align: center;
    font-family:perfont;
    text-transform:uppercase;
  }  
  .box_video{
  padding: 3vw;
  width: 90vw;
  height: 65vw;
  background-color: rgb(173, 173, 173);
  margin-left: auto;
  margin-right:auto; 
  }

  .box_video:after{
    content: "";
    clear: both;
    display: table;
  }

  .content_hymnes {
    background-image: url('../images/parchment.jpg');
    padding-top:4vw;
    padding-bottom:75px;
  }
  @media only screen and (orientation: portrait) {
    .content_blasons {
      background-image: url('../images/parchment.jpg');
      padding-bottom:100px;
  }
    .video_title {
      font-size: 6vw;
      color:rgb(0, 0, 0);
      padding-bottom:3%;
      text-align: center;
      font-family:perfont;
      text-transform:uppercase;
  }  
  }

    /* Personnages pages */
    .personnages #banner {
      background-image: url('../images/silhouettes.jpg');
  }


  .content-personnages {
    background-image: url('../images/parchment.jpg');
    padding-bottom:55px;
  }

  @media only screen and (orientation: portrait) {
    .content-personnages {
      background-image: url('../images/parchment.jpg');
      padding-bottom:100px;
  }
  }

  div.lettre {
    overflow: auto;
  }

  /* détail de personnage pages */
  .detail_perso {
    background-image: url('../images/parchment.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    padding-bottom:55px;

  }
  .detail_perso:after, div.bio:after {
    content: "";
    clear: both;
    display: table;
  }

  

  @media only screen and (orientation: landscape) {
    .perso_nom_usuel {
      color: white;
      background-image: url('../images/parchment.jpg');
      opacity: 0.9;
      text-transform: uppercase;
      font-family: papfont;
      text-align: center;
      padding:1%;
      padding-top: 2%;
      font-size: 4em;
      position: -webkit-sticky; 
      position: sticky;
      top: 0;
    }
    .gauche {
    display: inline-block;
    width:60%;
    margin-left:2%;
  }
  .droite {
    display: inline-block;
    float:right;
    width:34%;
    margin-right:2%;
  }
  div.bio, div.t1, div.t2, div.t3, div.perso_lien{
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 1.2;
    background-color: rgb(192, 192, 192);
    margin-bottom:3%;
  }

  div.t1 {
    background-color: rgb(235, 230, 163);
  }

  div.t2 {
    background-color: rgb(204, 166, 166);
  }

  div.t3 {
    background-color: rgb(166, 188, 209);
  }

  div.perso_lien {
    background-color: rgb(255, 255, 255);
    text-align: center;

  }

  .intext_link{
    text-decoration:underline;
  }

  .perso_lien_cliquable {
    font-size: 1.1em;
    text-decoration:none;
  }

  .perso_lien_cliquable:hover {
    text-decoration:underline;
  }

  #panel1, #panel2, #panel3 {
    display: none;
  }



  div.identite {
    margin-bottom:3%;
    background-color: rgb(198, 224, 238);
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 2;
    font-size: 1.1em;
  }

  h2.perso_titre {
    text-align:center;
    margin-bottom:10px;
  }

  div.physique {
    margin-bottom:3%;
    background-color: rgb(218, 199, 184);
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 2;
    font-size: 1.1em;
  }

  div.caractere {
    margin-bottom:3%;
    background-color: rgb(228, 220, 184);
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 2;
    font-size: 1.1em;
  }

  .liste_caractere {
    line-height: 1.5;
    font-size: 1em;
    padding-left:15%;
    list-style-type: circle;
  }

  div.blason_perso {
    width: 25%;
    height: auto;
    float:left;
    margin-right:2%;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    padding:5px;
    background-color:rgb(0, 0, 0);
  }

  figcaption.blason_perso {
    text-align:center;
    font-style:italic;
    color:white;
  }
}

@media only screen and (orientation: portrait) {
  .perso_nom_usuel {
    color: white;
    background-image: url('../images/parchment.jpg');
    opacity: 0.9;
    text-transform: uppercase;
    font-family: papfont;
    text-align: center;
    padding:1%;
    padding-top: 3%;
    padding-bottom:4%;
    font-size: 2em;
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
  }

  .droite {
    width:90%;
    margin-left:5%;
    padding-bottom:50px;
  }
  .gauche {
    width:90%;
    margin-left:5%;
  }

  div.bio, div.t1, div.t2, div.t3, div.perso_lien{
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 1.2;
    background-color: rgb(192, 192, 192);
    margin-bottom:3%;
  }

  div.t1 {
    background-color: rgb(235, 230, 163);
  }

  div.t2 {
    background-color: rgb(204, 166, 166);
  }

  div.t3 {
    background-color: rgb(166, 188, 209);
  }

  div.perso_lien {
    background-color: rgb(255, 255, 255);
    text-align: center;

  }

  .intext_link{
    text-decoration:underline;
  }

  .perso_lien_cliquable {
    font-size: 0.9em;
    text-decoration:none;
  }

  .perso_lien_cliquable:hover {
    text-decoration:underline;
  }

  #panel1, #panel2, #panel3 {
    display: none;
  }



  div.identite {
    margin-bottom:3%;
    background-color: rgb(198, 224, 238);
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 2;
    font-size: 0.9em;
  }

  h2.perso_titre {
    text-align:center;
    margin-bottom:10px;
  }

  div.physique {
    margin-bottom:3%;
    background-color: rgb(218, 199, 184);
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 2;
    font-size: 0.9em;
  }

  div.caractere {
    margin-bottom:3%;
    background-color: rgb(228, 220, 184);
    padding:2%;
    border-style: solid;
    border-color: black;
    line-height: 1.5;
    font-size: 0.9em;
  }

  .liste_caractere {
    line-height: 1.5;
    font-size: 0.9em;
    padding-left:15%;
    list-style-type: circle;
  }

  div.blason_perso {
    width: 25%;
    height: auto;
    float:left;
    margin-right:2%;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    padding:5px;
    background-color:rgb(0, 0, 0);
  }

  figcaption.blason_perso {
    text-align:center;
    font-style:italic;
    color:white;
  }
}
  

  /* Vocabulaire page */
  .vocabulaire #banner {
    background-image: url('../images/dictionary.jpg');
}
  .content-vocabulaire {
    background-image: url('../images/parchment.jpg');
    padding-bottom:55px;
  }

  @media only screen and (orientation: portrait) {
    .content-vocabulaire {
      background-image: url('../images/parchment.jpg');
      padding-bottom:100px;
  }
  }

  @media only screen and (orientation: landscape) {
    .signets {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      color:rgb(255, 213, 129);
      text-align:center;
      font-weight: bold;
      font-size:2.2em;
      letter-spacing: 5px;
      line-height: 1em;
      padding-left: 8%;
      padding-right: 8%;
      padding-top:20px;
      padding-bottom:20px;
      border-top-width: 5px;
      border-top-color: black;
      border-top-style: solid;
      border-bottom-width: 5px;
      border-bottom-color: black;
      border-bottom-style: solid;
      background-color: rgba(0, 0, 0, 0.507);
    }

    a.signets_link {
      text-decoration: none;
      color:rgb(255, 255, 255);
      font-weight: bold;
      padding:5px;
      
    
    }
    a:hover.signets_link {
      text-decoration: none;
      color: rgb(255, 170, 0);
      transition: color 0.2s;
    }
  
    h3.letter-title{
      color:rgb(255, 235, 197);
      font-weight: bold;
      font-size:4em;
      margin-left:20%;
      margin-top:40px;
      margin-bottom:25px;
    }
  
    .definitions {
      color:white;
      font-size:1.5em;
      word-spacing: 0.1em;
      margin:3%;
    }
  
    .b_title {
      color: rgb(255, 183, 38);
      text-transform: uppercase;
      background-color:rgba(255, 208, 0, 0.123);
      margin:5px;
      padding:5px;
     
    }
    p.p_definition{
      background-color:rgba(255, 208, 0, 0.123);
      padding:5px;
      margin:5px;
      margin-bottom:50px;
      line-height:1.2em;
  
    }
  
    .i_lieu {
      color:rgba(235, 230, 163, 0.774);
      padding:5px;
      margin:5px;
  
    }
  
  }
  
  @media only screen and (orientation: portrait) {
    .signets {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      color:rgb(255, 213, 129);
      text-align:center;
      font-weight: bold;
      font-size:6vw;
      letter-spacing: 0.2vw;
      line-height: 1.2em;
      padding-left: 1vw;
      padding-right: 1vw;
      padding-top: 3vw;
      padding-bottom:3vw;
      border-top-width: 5px;
      border-top-color: black;
      border-top-style: solid;
      border-bottom-width: 5px;
      border-bottom-color: black;
      border-bottom-style: solid;
      background-color: rgba(0, 0, 0, 0.507);
    }

    a.signets_link {
      text-decoration: none;
      color:rgb(255, 255, 255);
      font-weight: bold;
      padding:1vw;
      
    
    }
    a:hover.signets_link {
      text-decoration: none;
      color: rgb(255, 170, 0);
      transition: color 0.2s;
    }
  
    h3.letter-title{
      color:rgb(255, 235, 197);
      font-weight: bold;
      font-size:2em;
      margin-left:20%;
      margin-top:40px;
      margin-bottom:25px;
    }
  
    .definitions {
      color:white;
      font-size:1em;
      margin:3%;
      text-justify:none;
    }
  
    .b_title {
      color: rgb(255, 183, 38);
      text-transform: uppercase;
      background-color:rgba(255, 208, 0, 0.123);
      margin:5px;
      padding:5px;
     
    }
    p.p_definition{
      background-color:rgba(255, 208, 0, 0.123);
      padding:5px;
      margin:5px;
      margin-top:0.1em;
      margin-bottom:15vw;
      line-height:1.2em;
  
    }
  
    .i_lieu {
      color:rgba(235, 230, 163, 0.774);
      padding:5px;
      margin:5px;
      line-height:1.5em;
    }
  
  }