a{text-decoration: none;}

body{display: flex; flex-direction: column; min-height: 100vh;}

.black{color: #000;}

.center{text-align:center ;}

.color-white{color: #EEE;}
.color-black{color: #000;}
.contrast{color: #F0F0F0;}
.date
{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 3px;
    font-weight: 200;
}
embed{max-width: 100%;}
figure{text-align:center ;}
.footer{margin-top: auto; bottom: 0px;}


.fxlink :hover
{   
        border-radius: 10px;
        background-color: rgba(232, 245, 245, 0.411);
        color: rgb(35, 14, 151);
        font-style: italic;
        text-shadow:  none;
}
h1{margin: 0px 0px 0px 0px; text-align: center; line-height: 150px;}
h2{text-align: center;}


img{max-width: 100%; height: auto;}
iframe{max-width: 100%; height: 100%;}

.sous-titre{font-style: italic; font-size: 20px; font-family:Verdana, Geneva, Tahoma, sans-serif;

    }

table{border: 1px solid rgb(88, 103, 131); border-collapse:separate;}
td{border: 1px solid rgb(71, 84, 105);}

ul {list-style:none;}
video{max-width: 100%;height: auto;} 


/*------------------------NAVBAR----------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
.light-mode {--navbar-color: rgb(0, 0, 0); --navbar-bg-color: #F0F0F0;}
.dark-mode {--navbar-color: #FFF; --navbar-bg-color: #000;}
:root {--font-size:1rem;}
.navbar
{
display:flex;
align-items: center;
justify-content:space-between;
padding: 0px 10px 0px 10px;
font-size:1.1rem;
color:var(--navbar-color);
font-family: 'Poppins', sans-serif;}

.navbar_links{display:flex;}
.navbar_link{padding:0 10px;}
.burger{display:none;}
.navbar_link > a {color:var(--navbar-color); text-decoration:none;}
.active{font-weight: bold;}

/*hover effect*/
.navbar_link > a::after {
    display:block;
    content:"";
    width:0;
    height:1px;
    background:var(--navbar-color);
    transition:width .4s;
}
.navbar_link:hover > a::after {width:100%;}

/*------------------------NATEL----------------------------*/

@media only screen and (max-width:768px)
{
.navbar_links 
    { 
    overflow:hidden;
    display:flex;
    flex-direction:column;
    width:0;
    height:min-content;
    position:absolute;
    top:65px;
    right:0;    
    background-color: none;}

.navbar_link{transform: translateX(101%);transition: all .5s ease-in-out} /*transition text*/


.navbar_link > a /*zoom text hover*/
        {
        display:block;
        padding:1rem;
        font-size:1.2rem;
        color:white;  
        transition: all .4s ease-in-out;
        width: 0;
}
.navbar_link > a:hover{padding-left:2rem; letter-spacing:5px; 
}

/*_________BAR_________*/
.burger 
        {
        display:block;
        position:relative;
        padding:0;
        width:45px;
        height:45px;
        border:none;
        background:transparent;
        cursor:pointer;}
.bar 
        {
        display:block;    
        width:45px;
        height:3px;  
        border-radius:3px;
        background:var(--navbar-color); 
        transition: all .5s ease-in-out;}
.bar::before, .bar::after 
        {
        content:"";
        width:45px;
        height:3px;
        position:absolute; 
        left:0;  
        background:var(--navbar-color); 
        border-radius:3px;    
        transition: all .5s ease-in-out;}
.bar::before {transform:translateY(-12px)}
.bar::after {transform:translateY(12px)}

.show-nav .navbar_links{width:100%; transform: translateX(0); display: flex;} 
.show-nav .navbar_link {transform: translateX(0); background-color: black;}
.show-nav .bar {width:0;background:transparent;}
.show-nav .bar::before {transform:rotate(45deg);}
.show-nav .bar::after {transform:rotate(-45deg);}
.show-nav .index {transition: all 0.5s ease-out;} 
.show-nav .code {transition: all 0.6s ease-out;} 
.show-nav .blog {transition: all 0.7s ease-out;} 
.show-nav .images {transition: all 0.8s ease-out;} 
.show-nav .media {transition: all 0.9s ease-out;}
.show-nav .pleiades {transition: all 1.0s ease-out;}
.show-nav .contact {transition: all 1.1s ease-out;}
.show-nav .bar {width:0;background:transparent;}
.show-nav .bar::before {transform:rotate(45deg);}
.show-nav .bar::after {transform:rotate(-45deg);}
      
      /* Bonus - Animations */
/*
.show-nav .index {transition: all 1.0s ease-out;} 
.show-nav .code {transition: all 1.1s ease-out;} 
.show-nav .blog {transition: all 1.2s ease-out;} 
.show-nav .images  {transition: all 1.3s ease-out;} 
.show-nav .media {transition: all 1.4s ease-out;} 
.show-nav .pleiades {transition: all 1.5s ease-out;}  
.show-nav .contact {transition: all 1.6s ease-out;}         
*/}