body {
    background-image: url("../images/starry_background.gif");
    background-repeat: repeat; 
    background-position: top left;
    min-height: 100vh; 
    margin: 0;  
    
}

#BandeNoire {
    width: 1080px;
    background-color: rgba(0, 0, 0, 0.75);
    margin: 0 auto;
    min-height: 100vh; 
}


@font-face {
    font-family: DuneRise;
    src: url("css_elements/dune_rise/Dune_Rise.ttf");
}
@font-face {
    font-family: BankPrinter;
    src: url("css_elements/f25_bank_printer/F25_Bank_Printer.ttf");
}
h1{
    font-family: DuneRise;
    color:white;

}

h2{
    font-family: DuneRise;
    color:white;

}

.footerh2{
    font-size:90%;
}

h3{
    font-family: BankPrinter;
    color:white;

}

p{
    font-family: BankPrinter;
}
#footstar {
    position:static;
    top:0;
    width: 80vw;           
    background-image: url("../images/starry_background.gif");
    height: 170px;  
    z-index:2; 
    
} 

#footstar2 {
    position:static;
    top:0;
    width: 80vw;           
    background-image: url("../images/starry_background.gif");
    height: 170px;  
    z-index:2; 
    
} 
#nav {
    position:static;
    top:0;
    width: 1080px;           
    background-color: rgb(0, 8, 255, 0.4);
    height: 170px;
    display: flex;           
    justify-content: space-between; 
    align-items: center;  
    z-index: 1000;  
    
} 




.logoone{
    width: 90%;
    height:auto;
    position:relative;
    left: 60px;
}

#liens ul{

    list-style-type: none;
    display: flex; 
    padding-right: 80px; 
}

#liens ul li {
    margin-left: 30px;
    color: white;
    transition: text-shadow 0.3s ease-in-out; 
    font-size: 10px;
    transition: transform 0.3s ease-in-out;
}

#liens ul li:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
    transform: scale(1.2); 
    
}

#liens ul li a.active {
    text-decoration: underline;
    font-weight: bold; 
    color: #f986ff; 
}
p{
    color:white;
}
a {

    text-decoration: none; 
    color: white;
}
a:visited {
    color: inherit;
    text-decoration: none;
}



.bannièremizisua {
    width: 100%; 
    height: 495px;
}

#center{
    text-align:center;
}
#center2{
    text-align:center;
}

#center3{
    text-align:center;
}
#center4{
    text-align:center;
}


#vivimeng_section {

    display:flex;
    justify-content: space-around;
    height:390px;
    width:auto;
    margin-bottom: 30px;

}


#alien_stage_bio{

    overflow-wrap: break-word;
    font-size: 23px;
    margin-left: 4%;
    margin-right: 20px;
    width: 145%;



}

#vivimeng_section img {
    width:40%;
    height:auto;
    margin-top:20px;
    transition: transform 0.3s ease;
    margin-right:20px;
}

#vivimeng_section img:hover {
    
    transform: scale(1.2); 
    cursor: pointer; 
    
}

#vivimeng_profiles{
    margin-left:66px;
}

#about_and_pitch {
    margin-left:10px;
    display:flex;
    justify-content: space-around;
    height:420px;
    width:100%;
}

#pitch{

    width:40%;
    height:auto;
    overflow-wrap: break-word;
    font-size: 26px;
    margin-right:23px;
    max-height:90%;
    margin-top: -31px;
    
}

#about_alnst{
   
    overflow:hidden;
    width:auto;
    bottom: -12%;
    position: relative;
    
}


#intro_alnst{

  display:flex;
  justify-content: space-around;
  height: auto;
  max-height: 100%;
  margin-bottom: -142px;
  width: 64%;
  margin-left:10px;
}

#intro_alnst p{
    
    overflow-wrap: break-word;
    font-size: 23px;
    margin-left: 4%;
    margin-right: 85px;
    margin-top: 12%;

    
  }
.anakt, .sua_machine {
    width: 344%;
    height: 372px;
    border-radius: 130px;
    transition: transform 0.3s ease;
    position: relative;
    right: -19%;
    top: 3%;
}
.anakt:hover{
  transform: scale(1.2);


}
.anakt{
    top:10%;
}
.sua_machine{
    top:-40%;
    opacity: 0;
}

.sua_machine:hover{

    opacity:1;
    transform: scale(1.2);
}










/* TABLE STUFF */
.table{
    margin-top: 100px; 
    margin-bottom:50px;
    font-family:BankPrinter;

}

#mytable {
    color: white; 

}

#mytable th {
    background-color: rgb(19, 21, 91); 
    color: white; 
}

#mytable td {
    color: white; 
}


div.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: white;
    font-size: 14px;
}


div.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
   
    background-color: rgb(54, 61, 190);
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.current {
   
    background-color: rgb(168, 172, 243);
}


div.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    background-color: rgb(54, 61, 190);
}

div.dataTables_wrapper .dataTables_paginate .paginate_button{
    background-color: rgb(54, 61, 190);
}

.dataTables_info {
    color: white !important;
}

.dataTables_wrapper .dataTables_filter {
    text-align: right;
    color: white !important;
  }

  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: white !important;
  }

  .dataTables_paginate {
    color:rgb(54, 61, 190);
  }

  .dataTables_wrapper .dataTables_length select {
    background-color: black !important;
    color: white;
    font-family:BankPrinter;
  }
  .dataTables_wrapper .dataTables_filter input{
    font-family:BankPrinter;

  }
  select{

    background-color: rgb(54, 61, 190);
  }
/* END OF TABLE STUFF */

/* formulaire stuff */

#en-tête{
    display:flex;
    gap: 10%;

}

#contactez_moi {
    margin-left: 20%;
    display:flex;
    justify-content: space-around;
    width:60%;
    align-items: center;
    max-width: 1080px;
    font-size: 34px;
    margin-bottom:5px;
}

#contactez_moi img{
    height:22vw;
    width:auto;
    max-height:200px;
}

#formulaire {
    position: absolute;
    display: block;
    background-color: rgba(28, 77, 182, 0.6);
    font-size: 150%;
    padding: 20px;
    border-radius: 15px;
    width: 461px;
    height: 600px;


   

}

#formulaire:hover {
    box-shadow: 0 4px 10px rgba(196, 179, 255); 
    transition: box-shadow 0.3s ease-in-out;
}

#formulaire input[type="submit"] {
    background-color: rgb(54, 61, 190); 
    color: white; 
    padding: 10px 20px;     
    cursor: pointer;          
    border-radius: 5px;        
    transition: 0.3s ease; 
    width:100%;
    height:65px;
    font-family: BankPrint;
    
    
    
}

#formulaire input, textarea{

    border-radius:10px;
}
#formulaire input[type="submit"]:hover {
    background-color: rgba(196, 179, 255); 
}

#formulaire_center{

    display: flex;
    justify-content: center;
    height: 64vh;
    width: auto;


}

#formulaire textarea{
    width: 97%;
    height:100px;

}

#formulaire input[type="email"] {
    width: 97%;
    height:25px;
}


#Mizisua_sing{

    display: flex;
    justify-content: center;   
    align-items: center;       
    width: 100%;              
    height: 100%;
    gap: 395px;
    position: relative;
    bottom:-14px;

}

#Mizi_sing{
    position:relative;
    bottom:-24px;

}

#radiodiv{

    font-family: BankPrinter;
    color:white;
    margin-left:12%;
}













#footer {
    position: relative;  
    bottom: 0;  
    width: 1080px;         
    background-color: rgb(0, 8, 255, 0.4);
    height: 170px;
    display: flex;           
    justify-content: center; 
    align-items: center;   
    overflow:hidden;
    
} 

#footer h2{
    text-align: center;
} 

.chibi{
   
    width:15%;
    height:auto;
    height: 100%
}

/* ici est le CSS de mon slider!!! */

#slider {
    margin: 0 auto;
    width: 1000px;
    height:620px;
    text-align: center;
    margin-top:200px;
}


#slider input[type=radio] {

    display:none;
}


#slider label {
    cursor:pointer;
    text-decoration: none;
}

#slides {
    height:100%;
    padding: 20px;
    border : 1px;
    background: rgb(0, 8, 255, 0.4);
    position: relative;
    z-index: 1;
    

}

#overflow {

width:100%;
overflow:hidden;
}


#slide1:checked ~ #slides .inner {
    margin-left:0;
}

#slide2:checked ~ #slides .inner {
    margin-left:-100%;
}
#slide3:checked ~ #slides .inner {
    margin-left:-200%;
}
#slide4:checked ~ #slides .inner {
    margin-left:-300%;
}
#slide5:checked ~ #slides .inner {
    margin-left:-400%; 
}
#slide6:checked ~ #slides .inner {
    margin-left: -500%; 
}
#slide7:checked ~ #slides .inner {
    margin-left: -600%;
}

#slides .inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 700%; 
    line-height: 0;
    height: 100%;
}

#slides .slide {
    width: 14.2857%;
    float: left;
    display: block;
    height: 100%;
    color: #fff;
}

#slides .slide_1 {
    background-repeat: no-repeat;   
    background-size: cover;         
    background-position: center;
    animation: gifSequence 15s infinite;
}

@keyframes gifSequence {
    0% {
        background-image: url("../images/clematis_1.gif");
    }
    50% {
        background-image: url("../images/clematis_2.gif"); 
    }
    100% {
        background-image: url("../images/clematis_3.gif");
    }
}

#slides .slide_2 {
    background-repeat: no-repeat;   
    background-size: cover;         
    background-position: center;
    animation: gifSequence2 15s infinite;
}

@keyframes gifSequence2 {
    0% {
        background-image: url("../images/unknown_3.gif");
    }
    50% {
        background-image: url("../images/unknown_2.gif"); 
    }
    100% {
        background-image: url("../images/unknown_1.gif");
    }
}

#slides .slide_3 {
    background-repeat: no-repeat;   
    background-size: cover;         
    background-position: center;
    animation: gifSequence3 15s infinite;
}

@keyframes gifSequence3 {
    0% {
        background-image: url("../images/black_sorrow_2.gif");
    }
    60% {
        background-image: url("../images/black_sorrow_1.gif"); 
    }
    100% {
        background-image: url("../images/black_sorrow_3.gif");
    }
}

#slides .slide_4 {
    background-repeat: no-repeat;   
    background-size: cover;         
    background-position: center;
    animation: gifSequence4 15s infinite;
}

@keyframes gifSequence4 {
    0% {
        background-image: url("../images/romh_2.gif");
    }
    50% {
        background-image: url("../images/romh_1.gif"); 
    }
    100% {
        background-image: url("../images/romh_2.gif");
    }
   
}

#slides .slide_5 {
    background-repeat: no-repeat;   
    background-size: cover;         
    background-position: center;
    animation: gifSequence5 15s infinite;
}

@keyframes gifSequence5 {
    0% {
        background-image: url("../images/allin_1.gif");
    }
    80% {
        background-image: url("../images/allin_2.gif"); 
    }
    100% {
        background-image: url("../images/allin_3.gif");
    }
   
}

#slides .slide_6 {
    background-repeat: no-repeat;   
    background-size: cover;         
    background-position: center;
    animation: gifSequence6 15s infinite;
}

@keyframes gifSequence6 {
    0% {
        background-image: url("../images/cure_1.gif");
    }
    50% {
        background-image: url("../images/cure_2.gif"); 
    }
    100% {
        background-image: url("../images/cure_3.gif");
    }
   
}

#slides .slide_7 {
    background-repeat: no-repeat;   
    background-size: cover;         
    background-position: center;
    animation: gifSequence7 15s infinite;
}

@keyframes gifSequence7 {
    0% {
        background-image: url("../images/blinkgone_1.gif");
    }
    50% {
        background-image: url("../images/blinkgone_2.gif"); 
    }
    100% {
        background-image: url("../images/blinkgone_1.gif");
    }
   
}

#bullets {
    margin: 50px 0 0;
    text-align: center;
}

#bullets label {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius:100%;
    background: #ccc;
    margin: 0 10px;
}

#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4),
#slide5:checked ~ #bullets label:nth-child(5),
#slide6:checked ~ #bullets label:nth-child(6),
#slide7:checked ~ #bullets label:nth-child(7){
    background: #443;

}

#slides iframe{
    margin-top:400px;
}


#découvrir{
    margin-top:20%;
    align-items: center;
    margin-bottom: -10%;
}

/* GALERIE STUFF */

#image_form {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-left: 5%;
    margin-top: 10%;
}

#image_form img{

    width: 260px;
    height: 340px;
    transition: transform 0.3s ease;
    border-radius:4px;

}

#image_form img:hover{
    transition: transform 0.3s ease;
    transform: scale(1.2);
    

}

#section1{

    margin-left:50px;
    margin-top:50px;

}

#choisir_personnages {
    position:relative;
    width:1080px;
    height:auto;
    margin-bottom:1%;
    left: 3%;
 
} 

#section_mizi, #section_sua, #section_ivan u:hover {
    color:rgba(28, 77, 182, 0.6);
 
} 


#choisir_personnages img{
    width: 90%;
    height: auto;
    transition: transform 0.3s ease;

    
} 

#choisir_personnages img:hover{
    transition: transform 0.3s ease;
    transform: scale(1.2);

    
} 

#choisir_personnages ul{

    list-style-type: none;
    display: flex; 
    padding-right: 80px; 
}

.splashart{
    position:relative;
    width:480px;
    height:auto;
    transition: all 0.3s ease;

}


.splashart:hover{
    transition: all 0.3s ease;
    transform: scale(1.2);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
    
}


#Charapics{
    display:flex;
}

#stats{

  position: relative;

}

#stats p{

    margin-left: 35px;
  
  }

.stats{
    width: 85%;
    border-radius: 65px;
}


#desc_gardien{
    margin-left: 45px;
    display:flex;
}

#gardien{
    width:50%;
    right: -9%;
    position: relative;
}
.gardien{
    width: 319px;
    height: 295px;
    border-radius:20px;
    margin-bottom: 40px;
}

#gardien p{

    left: 25%;
    position: relative;
    
}


marquee{
    margin-bottom: 10%;
    margin-top: 10%;
    
}

#section_mizi u:hover{
    color:rgb(116, 129, 243)


}

#section_sua u:hover{
    color:rgb(116, 129, 243)


}

#section_ivan u:hover{
    color:rgb(116, 129, 243)

}

#section_till u:hover{
    color:rgb(116, 129, 243)

}

#section_luka u:hover{
    color:rgb(116, 129, 243)

}

#section_hyuna u:hover{
    color:rgb(116, 129, 243)

}



#persos_principaux {
    margin-left: 25%; 
    display:flex;
    
}


.pop_up_store{
    position: relative;
    width:70%;
    height:auto;
    border-radius: 45px;
    transition: transform 0.3s ease;
    margin-bottom:20%;
    filter: blur(3px); 
    transition: all 0.3s ease;
    opacity:40%;
}

.pop_up_store:hover{
    transition: transform 0.3s ease;
    transform: scale(1.2);
    filter: none;
    filter: drop-shadow(0 0 45px rgb(116, 129, 243));
    opacity:1;
    
}

.arrowl{
    font-size: 189px;
    position: absolute;
    margin-left: 25px;
}

.arrowr{
    font-size: 189px;
    position: absolute;
    margin-left: 640px;
}

#page_Accueil{
    width:67%;
}

#page_Galerie{
    width:72%;
}

#pages_div{
    display:flex;

}

#page_partenaires{

    width:72%;
}
#page_alnst_cast{

    width:70%;
}

#page_Credits{

    width:70%;
}


.bunny{
    height: auto;
    width: 321px;
    margin-top: 138%;
}


.bunny_sua{
    height: auto;
    width: 321px;
}

.bunny_ivan{
    width: 211px;
    height: auto;
    margin-top: 5%;
}

.bunny_till{
    width: auto;
    height: 485px;

}


.bunny_luka{
    width: 20%;
    height: 460px;
    margin-top: 906px;

}


.bunny_hyuna{

    width: 20%;
    height: 450px;
    margin-top: 540px;


}








.part-content {
    padding: 50px;
}

.part-content h1 {
    margin-bottom: 30px;
}

.part-pers-g, .part-pers-d {
    border-radius: 23px;
    display: flex;
    margin-bottom: 50px;
    background-color: rgba(28, 77, 182, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.part-pers-g:hover, .part-pers-d:hover {
    transform: scale(1.05);
}

.part-pers-g img {
    width: 250px;
    object-fit: cover;  
    border-bottom-left-radius: 23px;
    border-top-left-radius: 23px;
}

.part-pers-d img {
    width: 250px;
    object-fit: cover;  
    border-bottom-right-radius: 23px;
    border-top-right-radius: 23px;
}

.part-pers-g .part-text, .part-pers-d .part-text {
    width: 100%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.part-pers-d .part-text {
    align-items: flex-end;
}

.part-text {
    text-align: justify ;
}

.part-text button { 
    padding: 12px 20px;
    font-size: 16px;
    color: white;
    background-color: rgba(103, 146, 239, 0.6);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.part-text button:hover { 
    background-color: rgba(196, 179, 255); 
}

.part-nom {
    font-size: 25px;
    font-weight: bold;
}

.part-desc {
    font-weight: 300;
    margin-bottom: 10px;
}

.desc-groupe {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
}

.part-button-1{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.part-button-2{
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.part-button-2 p {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
}

.part-button-2 button {
    padding: 12px 20px;
    font-size: 16px;
    color: white;
    background-color: rgba(28, 77, 182, 0.6);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.part-button-2 button:hover { 
    background-color: rgba(196, 179, 255); 
}

.img-margaux, .img-lauren, .img-enzo, .img-charlotte {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
}

.img-margaux{
    background-image: url("../images/pfp/soccer.png");
    transform: rotate(336deg);
    width: 400px;
    height: 400px;
    bottom: -78px;
    right: -63px;
}
.img-lauren{
    background-image: url("../images/pfp/alnst_logo1.png");
    transform: rotate(25deg);
    width: 600px;
    height: 600px;
    bottom: -159px;
    right: 566px;
}
.img-enzo{
    background-image: url("../images/pfp/nerv.png");
    transform: rotate(336deg);
    width: 400px;
    height: 400px;
    bottom: -70px;
    right: -50px;
}
.img-charlotte{
    background-image: url("../images/pfp/conanlogo.png");
    transform: rotate(35deg);
    width: 600px;
    height: 600px;
    bottom: -188px;
    right: 546px;
}