/*Base File Styling*/
:root {
  /* Couleurs par défaut (Light mode) */
  --hero-gradient-start: rgba(10, 10, 10, 0);
  --hero-gradient-end: rgba(10, 10, 10, 1);
  --hero-url: url("/media/banner/gradient_portal.png");
  --drop-shadow: drop-shadow(-2px 2px 0px #4f70b9);
  --drop-shadow-side: drop-shadow(2px 2px 0px #4f70b9);
  --arrow-filter: brightness(200%);
  --arrow-hue: hue-rotate(0deg);
}
/* Si tu veux forcer le changement via une classe ou un attribut précis */
[data-theme="light"] {
  --hero-gradient-start: rgba(244,239,231,0.0);
  --hero-gradient-end: rgba(244,239,231,1);
  --hero-url: url("/media/banner/inverted_gradient_portal.png");
  --drop-shadow: drop-shadow(-2px 2px 0px #dac69e);
  --drop-shadow-side: drop-shadow(2px 2px 0px #dac69e);
  --arrow-filter: brightness(0%);
  --arrow-hue: hue-rotate(180deg);
}
.index {
  overflow-x: clip;
  width: 100%;
  position: relative;
}
* {
  box-sizing: border-box;
  font-family: "Poppins";
}
p {
  color: light-dark(black, white);
  font-size: 20px;
  /*text-align: justify;*/
  font-family: "Poppins";
}
h1, h2, h3, h4, h5, h6 {
  color: light-dark(black, white);
}
/*Table Styling*/
table {
  color: white;
  font-size: 20px;
  /*text-align: justify;*/
  font-family: "Poppins";
  border-collapse: collapse;
  border: 2px solid;
  border-color: light-dark(#211b11, #dac69e);
}
caption {
  caption-side: top;
  margin-top: 0px;
}
/*thead,
tfoot {
  background-color: rgb(228 240 245);
}*/
th,
td {
  border: 1px solid #4f70b9;
  padding: 8px 10px;
  color: light-dark(black, white);
}
tbody > tr:nth-of-type(even) {
  background-color: rgba(0,0,0,0);
}
tfoot th {
  text-align: right;
}
/* Table Styling*/


ul {
  color: light-dark(black, white);
  font-size: 20px;
  /*text-align: justify;*/
  font-family: "Poppins";
}
li{
  margin-left: 25px;
}
::marker {
  color: light-dark(#211b11, #dac69e);
}
.link {
  color: light-dark(#4f70b9, #dac69e);
  cursor: pointer;
  transition: all 0.2s;
}
.link:hover {
  color: light-dark(black, white);
  transition: all 0.2s;
  cursor: pointer;
}
.link:active{
  color: light-dark(#dac69e, #4f70b9;)
  transition: all 0.2s;
  cursor: pointer;
}
body:has(dialog[open]) {
  overflow: hidden;
}
html:has(dialog[open]) {
  overflow: hidden;
}
.base {
  width: 100vw;
  background-color: light-dark(#f4efe7, #0a0a0a);
  margin: 0px 0px 0px 0px;
  display: flex;
  flex-flow: column;
  overflow-x: clip;
  position: relative;
}
/*Base File Styling*/


/*Big Content Styling*/
.syt {
  border: 1px solid;
  border-image: linear-gradient(#31314f, #3f3c34) 1;
  width: 100%;
  margin-top: 50px;
}
.hero {
  background-image: linear-gradient(var(--hero-gradient-start), var(--hero-gradient-end)), 
                    var(--hero-url);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  position: relative;
}
.banner{
  max-width:100%;
  align-items:center;
}
.banner-header{
  font-family: "Disolve";
  font-size: 64px;
  max-width: 100%;
  text-align: center;
  color: #dac69e;
  padding: 10px;
  backdrop-filter: blur(10px);
  background-color: rgba(0,0,0,0.7);
  text-shadow: 1px 1px 1px #4f70b9, -1px 1px 1px #4f70b9, -1px -1px 1px #4f70b9, 1px -1px 1px #4f70b9;
  transition: all 0.2s;
}
.parallax {
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.entropy{
  min-height: 300px;
  width: 80%;
}
.flex{
  display: flex;
  align-items: center;
  justify-content: center;
}
footer{
  width: 100%;
  background-color: light-dark(#211b11, #030408);
  display: flex;
  flex-flow: row;
}
.ftext {
  color: white;
  font-size: 15px;
  margin: 2px 0px 2px 0px;
}
.ficon {
  width: 60px;
  padding: 5px;
  transform: scale(0.9);
  transition: all 0.2s;
}
.ficon:hover {
  transform: scale(1);
  transition: all 0.2s;
}
header{
  position: fixed;
  visibility: hidden;
  opacity: 0%;
  transition: all 0.2s;
  background-color: light-dark(#211b11, #030408);
  border-bottom: 1px solid;
  border-color: light-dark(#4f70b9, #dac69e);
  width: 100vw;
  max-width: 100vw;
  height: 50px;
  top: 0px;
  z-index: 10;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}
.syt-header {
  width: 200px;
  height: auto;
  display: block;
  cursor: pointer;
  transition: all 0.2s;
}
.divider{
  position: relative;
  width: 100%;
  border: 25px solid transparent;
  padding: 0px;
  margin: 5px 0px 5px 0px;
  border-image: url("/media/borders/H-borders.png") 25;
  border-image-repeat: repeat;
  transition: all 0.2s;
}
.side-divider{
  position: relative;
  border: 25px solid transparent;
  padding: 0px;
  margin: 5px 35px 5px 0px;
  border-image: url("/media/borders/H-border.png") 25;
  border-image-repeat: repeat;
  transition: all 0.2s;
}
.act-divider{
  display: flex;
  width: 100%;
  align-self: center;
  transition: all 0.2s;
}
.act-float{
  position: sticky;
  top: 50px;
  align-self: flex-start;
}
.act-n{ 
  width: 30px;
  height: 30px;
  position: absolute;
  top: -19px;
  left: 0px;
  font-size: 20px;
  text-align: center;
}
.act-container{
  margin: -14px -14px -14px -14px;
}
.nav-float{
  display: flex;
  flex-flow: column;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 8;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.2s;
}
.sidenav {
  height: 100%;
  width: 0; 
  position: fixed;
  background-color: light-dark(#211b11, #030408);
  z-index: 9; 
  top: 0px; 
  left: 0; 
  overflow-x: hidden; 
  overflow: hidden;
  padding-top: 60px; 
  transition: all 0.2s;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.sidenav .closebtn {
  position: relative;
  top: 10px;
  right: 10px;
  font-size: 36px;
  font-family: "Disolve";
  align-self: end;
  margin-bottom: 10px;
}
.sidenav a {
  text-decoration: none;
}
#top{
  opacity: 0%;
  visibility: hidden;
  transition: all 0.2s;
}
.nav-text {
  font-size: 24px;
  text-align: center;
  margin: 0px 0px 0px 0px;
  color: #dac69e;
  font-family: "Disolve";
}
.car-text {
  font-size: 32px;
}
.nav-h {
  width: 220px;
  height: 100px;
  background-position: center;
  background-size: cover;
  justify-content: center;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  border: 1px solid;
  border-image: linear-gradient(#111630, #433a2b) 1;
}
.nav-v {
  height: 220px;
  margin: 0px 11px 0px 11px;
  border: 1px solid;
  border-image: linear-gradient(#31314f, #3f3c34) 1;
  flex: 0 0 484px;
}
.nav-h:hover {
  transform: scale(1.1);
}
.nav-h:active {
  transform: scale(0.9);
}
.bar{
  width: 22px;
  height: 2px;
  background-color: light-dark(black, white);
  margin: 3px 0;
  cursor: pointer;
}
#up{
  filter: var(--arrow-filter);
  transition: all 0.2s;
}
#theme-toggle {
  border: none;
  background: transparent;
}
/* Logique d'affichage des icônes */
.icon-moon, [data-theme="dark"] .icon-sun {
  display: none; /* Cache la lune par défaut et le soleil en mode sombre */
}
.icon-moon, .icon-sun {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}
[data-theme="dark"] .icon-moon {
  display: inline-block; /* Affiche la lune en mode sombre */
}
.bg-bt{
  margin: 2px 2px 2px 2px;
  display: flex;
  flex-flow: column;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  transition: all 0.2s;
  border: 2px solid;
  border-color: light-dark(#4f70b9, #dac69e);
  background-color: light-dark(#f4efe7, #0a0a0a);
  cursor: pointer;
}
.bg-bt:hover {
  background-color: light-dark(#4f70b9, #dac69e);
  transform: translateX(2px) translateY(-2px);
  filter: var(--drop-shadow);
  transition: all 0.2s;
}
.bg-bt:hover .bar{
  background-color: #4f70b9;
  transition: all 0.2s;
}
.bg-bt:hover #up{
  filter: brightness(100%);
  transition: all 0.2s;
}
.bg-bt:active {
  background-color: light-dark(#dac69e, #4f70b9);
  border-color: light-dark(#dac69e, #4f70b9);
  transform: translateX(0px) translateY(0px);
  filter: drop-shadow(0px 0px 0px #4f70b9);
  transition: all 0.2s;
}
.bg-bt:hover .bar{
  background-color: black;
  transition: all 0.2s;
}
.bg-bt:hover #up{
  filter: brightness(0%);
  transition: all 0.2s;
}
#target2 {
  opacity: 0%;
}
.tri-head{
  display: flex;
  width: 95%;
  align-self: center;
  justify-content: center;
}
.tri{
  border: 2px solid;
  border-image: linear-gradient(#31314f, #3f3c34) 2;
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  padding: 10px;
  margin: 50px 10px 50px 10px;
  display: flex;
  flex-flow: column;
}
.act-carousel {
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: scroll;
  padding: 20px;
}
.act-table {
  width: 95%;
  align-self: center;
}
/*Big Content Styling*/


/*Cards Rows and Columns styling*/
.coll-d{
  display: flex;
  flex-flow: row;
  width: 90%;
  align-self: center;
}
.b-coll{
  padding: 5px;
  width: 50%;
}
.cards-grid{
  display: grid;
  /* "auto-fill" va créer autant de colonnes de 338px que possible */
  grid-template-columns: repeat(auto-fill, minmax(300px, 338px));
  gap: 10px;
  justify-content: center;
  width: 100%;
  transition: all 0.2s;
}
.cards-column {
  width: 100%; /*changé*/
  padding: 5px;
  display: flex;
  flex-flow: column;
  align-items: center;
  overflow: hidden;
  height: auto;
  flex: 0 1 auto;
  top: 0%;
  justify-content: flex-start;
  transition: all 0.2s;
}
/*Cards Rows and Columns styling*/


/*Card and Title Hovering Styling and Animations*/
.card-stack {
  position: relative;
  width: 100%;
  max-width: 338px; /* Aligné sur votre classe .card */
  /*aspect-ratio: 338 / 600; /* Optionnel : conserve le ratio si les images chargent mal */
  display: flex;
  justify-content: center;
  align-items: center;
}
/* On force les deux images à occuper le même espace */
#card-art, #card-bg, #ent-bg, #ent-text {
  width: 100%;
  height: auto;
  display: block;
}
/* L'art (00_in) est au-dessus et un peu plus petit si nécessaire */
#card-art, #ent-text {
  position: absolute;
  width: 98%; /* Comme défini dans votre CSS original pour .cardart */
  transition: all 0.2s;
  z-index: 1;
  filter: drop-shadow(0px 0px 1px black);
  cursor: pointer; /*url("/media/cursor.svg") 4 12, pointer;*/
}
#card-bg, #ent-bg {
  position: relative; /* Il "pousse" les parois du parent .card-stack */
  z-index: 0;
}
#ent-text {
  z-index: 2;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
  cursor: auto;
  font-size: 20px;
}
.card {
  z-index: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 338px;
  max-height: 600px;
  display: block;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  padding: 3px;
}
#ent-bg {
  cursor: default;
}
.cards-column:hover #ent-text {
  visibility: visible;
  opacity: 1;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
  background-color: light-dark(rgba(244,239,231,0.8), rgba(10,10,10,0.7));
}
.cards-column:hover #card-art {
  transform: scale(1.15) translatey(-8px);
  transition: all 0.2s;
  filter: drop-shadow(0 0 1px black);
}
.cards-column:hover #card-bg {
  opacity: 0%;
  transform: scale(0.95);
  transition: all 0.2s;
}
.card-title {
  margin-top: 0px; /*En a systématiquement si aucune définie*/
  margin-bottom: 0px;
  min-height: 40px;
  max-width: 338px;
  z-index: 2;
  transition: all 0.2s;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cards-column:hover #cardtitle {
  transform: translateY(-80px);
}
.cards-column:hover .card {
  transform: scale(1.03) translateY(10px);
  transition: all 0.2s;
}
.cards-column:hover #ent-bg {
  transform: scale(0.95);
  filter: blur(2px);
  transition: all 0.2s;
}
.c-title{
  margin: 0px 0px 0px 0px;
  font-family: "Decoy";
  font-size: 28px;
  padding: 8px;
  text-align: center;
  transition: all 0.2s;
}
.cards-column:hover #ctitle {
  backdrop-filter: blur(10px);
  background-color: light-dark(rgba(244,239,231,0.8), rgba(10,10,10,0.7));
}
.note {
  font-size: 20px;
  padding: 5px;
  margin: 0px 0px 0px 0px;
  transition: all 0.2s;
}
.a-note{
  text-decoration-line: none;
}
.below-buttons {
  display: flex;
  flex-flow: row;
  width: 100%;
  justify-content: center;
  z-index: 2;
  margin-top: auto;
  padding-bottom: 10px;
}
.bbut-text{
  font-size: 20px;
  width: 100%;
  text-align: center;
  background-color: #00000000;
  color: light-dark(black, white);
  margin: 0px 5px 0px 5px;
  padding: 5px;
  border: 2px solid;
  border-color: light-dark(#4f70b9, #dac69e);
  border-radius: 12px;
  cursor: pointer;
  text-decoration-line: none;
  transition: all 0.2s;
}
.bbut-text:hover {
  color: #0a0a0a;
  background-color: light-dark(#4f70b9, #dac69e);
  transform: translateX(-2px) translateY(-2px);
  filter: var(--drop-shadow-side);
  transition: all 0.2s;
}
.bbut-text:active {
  color: black;
  border-color: light-dark(#dac69e, #4f70b9);
  background-color: light-dark(#dac69e, #4f70b9);
  transform: translateX(0px) translateY(0px);
  filter: drop-shadow(0px 0px 0px #4f70b9);
  transition: all 0.2s;
}
.bt-disabled {
  color: light-dark(white, black);
  background-color: light-dark(grey, #2a2a2a);
  cursor: default;
  border-color: #1a1a1a;
}
.bt-disabled:hover {
  color: light-dark(white, black);
  background-color: light-dark(grey, #2a2a2a);
  cursor: default;
}
.characters {
  color: light-dark(#17406d, #478beb); /*changer les couleurs pour les officiels des cartes*/
}
.stories {
  color: light-dark(#851c00, #ff5757); /*changer les couleurs pour les officiels des cartes*/
}
.history {
  color: light-dark(#632e62, #9947eb); /*changer les couleurs pour les officiels des cartes*/
}
.interlude {
  color: light-dark(#478532, #7beb47);
}
.antidate {
  color: light-dark(#ad6606, #eb9947);
}
/*Card and Title Hovering Styling and Animations*/


/*Collapsible head titles*/
.collapsible {
  background-color: #00000000;
  color: light-dark(black, white);
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  border-bottom: solid;
  text-align: left;
  font-size: 26px;
  transition: all 0.2s;
}
.spin-off{
  font-family: "Disolve";
  font-size: 32px;
  width: 100%;
  border: none;
}
.hidd{
  cursor: default;
  padding: 0px;
  color: #00000000;
  border: none;
}
.spin {
  background-color: light-dark(rgba(244,239,231,0.8), rgba(10,10,10,0.8));
}
.coll-round {
  border: 2px solid;
  border-radius: 12px;
  border-color: light-dark(#4f70b9, #dac69e);
  margin: 10px 0px 10px 0px;
}
.collapsible.active{
  background: light-dark(#211b11, #030408);
  color: light-dark(#dac69e, #4f70b9);
  border-color: light-dark(#dac69e, #4f70b9);
}
.collapsible:hover {
  background: light-dark(#4f70b9, #dac69e);
  color: light-dark(white, black);
  transition: all 0.2s;
  border-color: light-dark(#dac69e, #4f70b9);
}
.hidd:hover {
  background: #00000000;
  color: #00000000;
  border-color: #00000000;
}
.coll-round:hover {
  background-color: light-dark(#4f70b9, #dac69e);
  border-color: light-dark(#4f70b9, #dac69e);
  color: light-dark(white, black);
}
.content {
  overflow: hidden;
  max-height: 0;
  transition: all 0.2s;
}
.collapsible.active + .c-border{
  border: 2px solid;
  border-image: linear-gradient(#31314f, #3f3c34) 2;
}
.collapsible + .c-border {
  border: none;
}
.collapsible:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 28px;
  float: right;
  margin-left: 5px;
}
.collapsible.active:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
}
.collapsible.active + .content {
  max-height: 0;
  overflow: hidden;
}

/*Collapsible head titles*/


/*Dedicated Styling to External html and notes*/
.note-content {
  width: 100%;
  height: 100%;
}
.note-h {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}
#borderimg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 80px solid transparent;
  padding: 0px;
  border-image: url("/media/borders/Borders.png") 380;
  border-image-repeat: round;
  top: 2px;
  z-index: -1;
  transition: opacity 0.2s ease-out;
}
#bdhistory {
  border: 80px solid transparent;
  padding: 0px;
  border-image: url("/media/borders/Violet Borders square.png") 380;
  border-image-repeat: repeat;
}
#bdcharacters {
  border: 80px solid transparent;
  padding: 0px;
  border-image: url("/media/borders/Blue Borders square.png") 380;
  border-image-repeat: repeat;
}
#bdstories {
  border: 80px solid transparent;
  padding: 0px;
  border-image: url("/media/borders/Red Borders square.png") 380;
  border-image-repeat: repeat;
}
#bdinterludes {
  border: 80px solid transparent;
  padding: 0px;
  border-image: url("/media/borders/Green Borders square.png") 380;
  border-image-repeat: repeat;
}
#bdantidate {
  border: 80px solid transparent;
  padding: 0px;
  border-image: url("/media/borders/Orange Borders square.png") 380;
  border-image-repeat: repeat;
}
.anot {
  display: block;
  font-style: italic;
  text-align: center;
  border: dashed 1pt;
  margin: 50px -35px 50px -35px;
  font-family: "Decoy";
  font-size: 28px;
}
.entitle {
  display: block;
  text-align: center;
  border: solid 1pt;
  font-family: "Decoy";
  font-size: 32px;
  margin: 50px -35px 50px -35px;
}
.title-note {
	text-align: center;
	font-family:"Decoy";
	font-size: 48px;
	font-weight: bold;
	position: relative;
  z-index: 101;
  backdrop-filter: none;
  background-color: transparent; /* Pour éviter de cacher la bordure au début */
  margin: 60px 20px 60px 20px;
  margin-top: 60px;
  margin-bottom: 60px;
  transition: all 0.2s;
}
.notes-text{
  margin: 0px -35px 20px -35px;
  text-indent: 20px;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.decoy {
  font-family: "Decoy";
}
.head{
  margin-top: -35px;
}
/*.foot {
  margin-bottom: -35px;
}*/
.date-note{
  display: block;
  text-align: center;
  border: solid 1pt;
  margin: 10px -35px 0px -35px;
  font-family: "Decoy";
  font-size: 28px;
}
.note-styling{
  background-color: light-dark(rgba(244,239,231,0.8), rgba(10,10,10,0.8));
  margin: 2px 2px 2px 2px;
}
.details-ct{
  padding: 0px;
  transition: all 0.2s;
  margin-bottom: -50px;
}
summary{
  cursor: pointer;
  font-weight: bold;
  list-style: none;
  border-bottom: 2px solid;
  border-color: #4f70b9;
}
summary p , .details-ct p{
  margin-bottom: 0px;
}
/*Dedicated Styling to External html and notes*/


/*Dedicated Styling to Timeline Content*/
.t-align{
  display: flex;
  flex-flow: row;
  justify-content: center;
}
.line-r{
  border-left: 1px solid;
  color: light-dark(black, white);
  padding: 10px;
}
.line-l{
  border-right: 1px solid;
  color: white;
  padding: 10px;
}
.time-date {
  border: 1px solid;
  color: #4f70b9;
  width: max-content;
  margin: 15px 0px -5px -9px;
}
.t-date{
  margin: 0px 10px 0px 10px;
}
.attach-time-content{
  display: flex;
  flex-flow: column;
  border: 1px solid;
  color: light-dark(#211b11, #dac69e);
  width: max-content;
  margin: -1px 0px 0px -9px;
}
.time-content{
  display: flex;
  flex-flow: column;
  border: 1px solid;
  color: light-dark(#211b11, #dac69e);
  width: max-content;
  margin: 10px 0px 0px -9px;
}
.t-content{
  align-self: start;
  margin: 5px 5px 5px 5px;
}
.t-act{
  align-self: end;
  margin: 5px 5px 5px 5px;
}
.song-flex{
  max-width: 100%;
  display: flex;
  align-items: start;
}


/*Modal window Styling*/
.note-arrow {
  position: absolute;
  z-index: 100;
  top: 50%;
  width: 60px;
  height: 60px;
  transition: all 0.2s;
  filter: var(--arrow-filter);
  transition: all 0.2s;
}
.note-arrow:hover {
  filter: var(--arrow-hue);
  transition: all 0.2s;
}
.note-arrow:active {
  filter: brightness(0%);
  transition: all 0.2s;
}
.close-bt{
  object-position: top;
  position: absolute;
  top: 0%;
  /*left: -16px;*/
  right: 1px;
  font-family: "Disolve";
  border: 1px solid;
  background-color: rgba(0,0,0,0);
  color: light-dark(black, white);
  font-size: 30px;
  z-index: 100;
  padding: 8px 6px 0px 8px;
  transition: all 0.2s;
}
.close-bt:hover {
  color: light-dark(#4f70b9, #dac69e);
}
.close-bt:active {
  color:red;
}
/*Dialog Animation*/
dialog:open {
  max-width: 100%;
  max-height: 100%;
  border: 0px;
  opacity: 1;
  transition: all 0.2s;
}
dialog {
  opacity: 0;
  transition: all 0.2s;
}
@starting-style {
  dialog:open {
    opacity: 0;
  }
}
dialog::backdrop {
  background-color: transparent;
}

dialog:open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

@starting-style {
  dialog:open::backdrop {
    background-color: transparent;
  }
}
/**/
::backdrop {
  background-image: linear-gradient(
    45deg,
    #dac69e,
    #4f70b9    
  );
  opacity: 0.5;
}
:modal {
 backdrop-filter: blur(10px);
 width:100%;
 height:100%;
}
.object-cont object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
  z-index: 0;
}
/*Modal window Styling*/


@media screen and (max-width: 780px){/*responsive to 780px view size*/
  p{
    font-size: 15px;
  }
  #bdhistory {
    border-image: url("/media/borders/Violet Borders cropped.png") 380;
  }
  #bdstories {
    border-image: url("/media/borders/Red Borders cropped.png") 380;
  }
  #bdcharacters {
    border-image: url("/media/borders/Blue Borders cropped.png") 380;
  }
  #bdinterludes {
  border-image: url("/media/borders/Green Borders cropped.png") 380;
  }
  #bdiantidate {
  border-image: url("/media/borders/Orange Borders cropped.png") 380;
  }
  .tri-head{
    display: block;
  }
  .tri{
    margin: 0px 0px 20px 0px;
  }
  .head{
    margin-top: -5px;
  }
  .notes-text{
    margin: 0px -70px 10px -70px;
  }
  .ftext {
    font-size: 12px;
  }
  bbut-text{
    font-size: 20px;
  }
  .b-coll{
    padding: 0px;
    width: 100%;
  }
  .banner-header{
    font-size: 54px;
    transition: all 0.2s;
  }
  .note-arrow {
    top: 93%;
    width: 40px;
    height: 40px;
  }
  .nav-v {
    height: 150px;
    flex: 0 0 330px;
  }
  footer {
    display: block;
  }
  .title-note{
    font-size: 38px;
  }
  .note {
    font-size: 20px;
  }
}
/*style pour le dev*/
.red{
  font-size: 32px;
  color: red;
}

@font-face {
  font-family: 'Decoy';
  src: url('/media/fonts/Decoy.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Disolve';
  src: url('/media/fonts/Disolve_regular.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Infrarouge';
  src: url('/media/fonts/Infrarouge-Regular.otf') format('opentype');
  font-style: normal;
  font-display: swap;
}