/* 1DISPLAY */
.flex_center {
    display: flex;
    align-items: center;
    justify-content: center;
}
                    /* 1PADDING */
.padding_5px {
    padding: 5px 5px 10px 5px;
}
.padding_20px {
    padding: 20px 20px 90px 20px;
}
.padding_50px {
    padding: 50px 50px 50px 50px;
}
.padding_30px {
    padding: 30px;
}
                    /* 1ETOILE */
.etoile_rouge {
    color : #800020;
}
                    /* POINTILLE */
.pointille {
    border-style : solid;
    border-width: 10px;
    border-color: #800020;
}
.pointille_2 {
    border-style : solid;
    border-width: 20px;
    border-color: #800020;
}
                    /* SPAN */
.gras {
    font-weight: bold;
}
.gras:hover {
    font-style: italic;
}
                    /* 1BORDERRADIUS */
.border_radius_10 {
    border-radius: 10px; 
}
.border_radius_top_right_10 {
    border-top-right-radius: 10px; 
}
.border_radius_top_left_10 {
    border-top-left-radius: 10px;
}
.border_radius_bottom_right_10 {
    border-bottom-right-radius: 10px;
}
.border_radius_bottom_left_10 {
    border-bottom-left-radius: 10px;
}
.border_radius_top_right_0 {
    border-top-right-radius: 0px; 
}
.border_radius_top_left_0 {
    border-top-left-radius: 0px;
}
.border_radius_bottom_right_0 {
    border-bottom-right-radius: 0px;
}
.border_radius_bottom_left_0 {
    border-bottom-left-radius: 0px;
}
                    /* 1COULEURS */
.color_1 {
    color : #e8d7ce;
}
.color_2 {
    color : #9ea09e;
}
.color_3 {
    color: #3d464a;
}
.color_4 {
    color: #313e41;
}
.color_5 {
    color : #800020;
}
                    /* 1COULEURSBG */
.bgcolor_1 {
    background-color : #e8d7ce;
}
.bgcolor_2 {
    background-color : #9ea09e;
}
.bgcolor_3{
    background-color: #3d464a;
}
.bgcolor_4 {
    background-color: #313e41;
}
.bgcolor_5 {
    background-color : #800020;
}
                    /* 1POLICE*/
.orbitron {
    font-family: 'Orbitron' ;
}
.changa {
    font-family: 'changa' ;
}
.bubbler_one {
    font-family: 'Bubbler One' ;
}
.six_caps {
    font-family: "Six Caps", serif;
}
.palette_mosaic {
    font-family: "Palette Mosaic", serif;
}
.splash {
    font-family: "Splash", serif;
}
.aboreto{
    font-family: "Aboreto", serif;
}
.antonio {
    font-family: "Antonio", serif;
}
                    /* 1TAILLEPOLICE */
._370px {
    font-size: 370px;
}
._100px {
    font-size: 100px ;
}
._35px {
    font-size: 35px;
}
._90px {
    font-size: 90px ;
}
._25px {
    font-size: 25px ;
}
._20px {
    font-size: 20px ;
}
._18px {
    font-size: 18px ;
}
                    /* 1TEXTSHADOW */
.text_shadow {
    text-shadow: 5px 5px 5px #3d464a;
}
                    /* BGHOVER */
.bg_hover {
    transition:0.5s ease-in-out;
}
.bg_hover:hover {
    background-color: #800020;
    color:#e8d7ce ;
}
                    /* 1POSITION */
.position_absolute {
    position: absolute;
}
.position_relative {
    position: relative;
}
                    /* 1ZINDEX */
.zindex_10 {
    z-index: 10;
}
                    /* 1WIDTH */
.width_300px {
    width: 300px;
}
.width_40 {
    width: 40%;
}
.width_60 {
    width: 60%;
}
                    /* 1MARGIN */
.margin_40 {
    margin: 40px;
}
.margin_80 {
    margin: 80px;
}
.margin_0_auto {
    margin: 0 auto;
}
.margin_top_bottom_20px {
    margin-top: 20px;
    margin-bottom: 20px;
}
                    /* 1DISPLAY */
.display_flex {
    display : flex;
}
                    /* 1OVERFLOW */
.overflow_visible {
    overflow : visible;
}
                    /* 1BOXSHADOW */
.box_shadow {
    box-shadow: 3px 3px 10px #313e41;
}
                    /* 1JUSTIFYCONTENT */
.justify_content_center {
    justify-content: center;
}
                    /* 1ALIGNITEMS */
.align_items_center {
    align-items: center;
}
                    /* 1TEXTALIGN */
.text_align_center {
    text-align: center;
}
.text_align_left {
    text-align: left;
}
.text_align_right {
    text-align: right;
}
                    /* 1TEXTJUSTIFY */
.text_justify {
    text-align: justify;
    text-justify: inter-word;
}

                    /* 1ACTIVE */
.lien.active {
    font-weight: bold;
    color: #800020;
    border: 3px solid #800020;
    padding: 5px 10px;
    border-radius: 8px;

    
}

    /* BODY HTML */
body {
    background-color: #e8d7ce;
    width: 1080px;
}
html {
    display: flex;
    justify-content: center;
    background-color: #e8d7ce;
}
    /* GALERIE HORIZONTALE VERTICALE */
.scroll-container {
    background-color:#e8d7ce ;
    overflow: auto;
    white-space: nowrap; 
    width: 1080px; 
    margin: auto; 
}
.scroll-container img {
    margin: 15px;
    width: 350px; 
    height: 300px; 
    object-fit: cover; 
    border-radius: 5px; 
}
    /* INTEGRATION SPOTIFY */
iframe {
    border: none;
    border-radius: 10px;
}
    /* LE TABLEAU DE DONNEES */

.dataTables_wrapper {
    font-family: 'Orbitron' ;
    color: #3d464a;
}
button.dt-button:first-child {
    background-color: #800020;
    color: #e8d7ce;
    font-family: 'Orbitron';
}
button.dt-button:first-child:hover {
    color: #800020;
}
th {
    font-family: 'Orbitron';
    color : #e8d7ce;
    background-color: #800020;
}
td {
    color: #e8d7ce;
    background-color: #313e41;
    border: 3px solid #e8d7ce;
}
table {
    font-family: 'Changa';
    border: 10px solid #e8d7ce;
}
    /* ID VIDEO ET IMAGES */
#video_intro {
    position: relative;
    width: 100%;
    filter: blur(3px);
}
.video-container {
    position: relative;
    width: 100%;
    overflow: hidden; 
}
#image_joseph_cooper {
    position: relative;
    height: 100%;
    width: 60%;
    border-top-left-radius: 10px;   
    border-bottom-left-radius: 10px;
    transition:0.5s ease-in-out;
}
#image_amelia_brand {
    position: relative;
    height: 100%;
    width: 60%;
    border-top-right-radius: 10px;   
    border-bottom-right-radius: 10px;
    transition:0.5s ease-in-out;
}
#image_murphy_cooper {
    position: relative;
    height: 100%;
    width: 60%;
    border-top-left-radius: 10px;   
    border-bottom-left-radius: 10px;
    transition:0.5s ease-in-out;
}     
.zoom1 img:hover {
    transition: 1s ease;
    transform: scale(1);
    border-top-right-radius: 0px;   
    border-bottom-right-radius: 0px;
}
.zoom2 img:hover {
    transition: 1s ease;
    transform: scale(1);
    border-top-left-radius: 0px;   
    border-bottom-left-radius: 0px;
}
.zoom1 img{
    transform: scale(0.8);
    border-top-right-radius: 10px;   
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;   
    border-bottom-left-radius: 10px;
}
.zoom2 img{
    transform: scale(0.8);
    border-top-right-radius: 10px;   
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;   
    border-bottom-left-radius: 10px;
}
#toki {
    width: 150px;
    display: block;
    margin : 0 auto;
}
#arrow {
    width: 100px;
    transition:0.5s ease-in-out;
}
#arrow:hover {
    transform: scale(1.2); 
    opacity: 50%;
}
    /* GALERIE */
.galerie {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 50px; 
    margin: auto; 
    padding: 20px;
}
.galerie img {
    width: 300px;
    height: 200px; 
    object-fit: cover; 
    border-radius: 10px; 
    box-shadow: 3px 3px 5px #9ea09e;
    transition:0.3s ease-in-out;
    opacity: 50%;
}
.galerie img:hover {
    transform: scale(1.1); 
    box-shadow: 1px 1px 30px #6f706f;
    opacity: 100%;
}
    /* TABLEAU CONTACT */
.row {
    display: flex;
    gap: 10px;
    justify-content: space-evenly;
}
    
.row > div {
    flex: 1;
}
    
.row input {
    width: 100%;
    box-sizing: border-box;
}
    
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
    
textarea {
    height: 80px;
    resize: none;
    font-family: 'Bubbler One';
}
    
input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #800020;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
    
    input[type="submit"]:hover {
    background-color: #e8d7ce;
    color: #3d464a;
    box-shadow: 3px 3px 5px #6f706f;
}
form {
    width: 300px;
    background-color: #e8d7ce;
    padding : 20px;
    border-radius: 10px;
}
.radio {
    padding : 5px
}
.div_radio {
    padding-bottom: 10px;
}
    /* LES LIENS */
.lien {
    text-decoration: none;
    color : #3d464a;
    padding : 10px 10px 10px 10px;
    border-radius: 10px;
    background-color: #e8d7ce;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.lien:hover{
    color : #800020 ;
    box-shadow: 3px 3px 5px #6f706f;
}
.hover {
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.hover:hover {
    color : #800020 ;
}
.no_style_link {
    text-decoration: none;
}
ul {
    background-color: #e8d7ce;
    display: flex;
    justify-content: right;
    height : 100px;
    align-items: center;
    border-radius: 10px;
    box-shadow: 3px 3px 5px #6f706f;
}
.liste {
    font-family: Orbitron;
    font-size: 20px;
    list-style: none;
    padding-left: 30px;
    padding-right : 30px;
}
                    /* SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
  }
::-webkit-scrollbar-track {
    background: #e8d7ce;
  }
::-webkit-scrollbar-thumb {
    background: #800020;
  }
  
::-webkit-scrollbar-thumb:hover {
    background: #64021b;
  }