/* FONT FACE */
/* Appelle les polices de la page */
@font-face {
    font-family: 'MaskedHeroDemo';
    src: url('../fonts/MaskedHeroDemo/MaskedHeroDemo.eot');
    src: url('../fonts/MaskedHeroDemo/MaskedHeroDemo.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MaskedHeroDemo/MaskedHeroDemo.woff2') format('woff2'),
        url('../fonts/MaskedHeroDemo/MaskedHeroDemo.woff') format('woff'),
        url('../fonts/MaskedHeroDemo/MaskedHeroDemo.ttf') format('truetype'),
        url('../fonts/MaskedHeroDemo/MaskedHeroDemo.svg#MaskedHeroDemo') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/****************************************/
/***************** HTML *****************/
/****************************************/

html, body {
    font-family: 'Roboto', sans-serif;    
    /*font-size: 10px;*/
    font-size: 62.5%;
    min-height: 500px;
    overflow-x: hidden;
}

html {
    --scrollbarBG: white;
    --thumbBG: #322775;    
}

body::-webkit-scrollbar {
    width: 15px;
}

body {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 1px;
    border: 4px solid var(--scrollbarBG);
}

h1, h2, h3, h4, h5, .navbar>.container-fluid {
    font-family: 'MaskedHeroDemo', sans-serif;
    text-shadow: 2px 2px 5px #11064C;
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65);
}

h1:hover, h2:hover, h3:hover, h4:hover, h5:hover {
    text-shadow: 2px 2px 5px #86D1F8;    
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65); 
}

a, #navbarNav > ul > li > a, footer .btn-night {
    text-decoration: none;
    color: white;
    text-shadow: 2px 2px 5px #11064C;
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65);
}

a:hover, #navbarNav > ul > li > a:hover, footer .btn-night:hover {    
    text-shadow: 2px 2px 5px #86D1F8;
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65);
}

#navbarNav > ul > li.nav-item.mx-1 > a {
    text-decoration: none;
    color: red;
    text-shadow: 2px 2px 5px #11064C;
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65); 
}

#navbarNav > ul > li.nav-item.mx-1 > a:hover {    
    text-shadow: 2px 2px 5px #86D1F8;
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65); 
}

#scrollUp
{
    position: fixed;
    bottom : 10px;
    right: -100px;
    opacity: 0.8;
    z-index: 8;
}

#scrollUp img {
    width: 70px;    
}

/* *********************************************** */
/* ******************* GRAFIKART ***************** */
/* *********************************************** */



[class*="slide-in-fwd-"] {
    opacity: 0;
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);    
}

.slide-in-fwd-visible {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    transition: 1s cubic-bezier(0.45, 0.25, 0.25, 0.95);
    opacity: 1;   
}

.slide-in-fwd-top {
    transition-delay: 0.1s;
}
.slide-in-fwd-left {
    transition-delay: 0.3s;
}
.slide-in-fwd-right {
    transition-delay: 0.5s;
}
.slide-in-fwd-bottom {
    transition-delay: 0.6s;
}

.slide-in-fwd-center {
    transition-delay: 0.2s;
}

.slide-in-fwd-gm {
    transition-delay: 1s;
}
.slide-in-fwd-cons {
    transition-delay: 2s;
}
.slide-in-fwd-offi {
    transition-delay: 3s;
}


.slide-in-fwd-1 {
    transition-delay: 1s;
}
.slide-in-fwd-2 {
    transition-delay: 1.75s;
}
.slide-in-fwd-3 {
    transition-delay: 2.25s;
}
.slide-in-fwd-4 {
    transition-delay: 3s;
}
.slide-in-fwd-late {
    transition-delay: 4s;
}


/* *********************************************** */
/* ******************** ANIMISTA ***************** */
/* *********************************************** */


/* Class & Animation slide-in-fwd-top */

.slide-in-fwd-title {
    -webkit-animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-fwd-title {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-fwd-title {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}



/****************************************/
/**************** HEADER ****************/
/****************************************/

nav {
    background-color: #11064c;
}

/* HEADER ET SECTION */

#header-page {
    height: 200px;
    
    background: hsla(201, 89%, 75%, 1);
    background: linear-gradient(90deg, hsla(201, 89%, 75%, 1) 0%, hsla(249, 85%, 16%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(201, 89%, 75%, 1) 0%, hsla(249, 85%, 16%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(201, 89%, 75%, 1) 0%, hsla(249, 85%, 16%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#86D1F8", endColorstr="#11064C", GradientType=1 );
}


/* SECTION PRESENTATION */

.presentation img {
    margin-top: -36em;
    width: 300px;
}


/****************************************/
/************** index page **************/
/****************************************/


/* SECTION OPEN-DOORS */

/* SECTION CAROUSEL */

#carousel {
  /*background-color: #2526271a; /* gris avec opacité */
    
    background: hsla(265, 53%, 29%, 1);
    background: linear-gradient(45deg, hsla(265, 53%, 29%, 1) 0%, hsla(24, 93%, 73%, 1) 100%);
    background: -moz-linear-gradient(45deg, hsla(265, 53%, 29%, 1) 0%, hsla(24, 93%, 73%, 1) 100%);
    background: -webkit-linear-gradient(45deg, hsla(265, 53%, 29%, 1) 0%, hsla(24, 93%, 73%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#432371", endColorstr="#faae7b", GradientType=1 );
}


/* SECTION ACTIVITEES */

#activitees {    
    text-align: justify;
}

#activitees .card {    
    background-color: #f1f1f1; /* petit gris */
    text-align: center;
    margin-right: 3.5em;
    border: 1px solid rgba(0,0,0,.125);
}  

#activitees .card-group {
    display: block;
}

#activitees .card-img-top {
    width: 100%; /* width: 362px;*/
    height: 180px;
}

#activitees .card-body {
    width: 100%; /*width: 362px;*/
}


/* SECTION REJOINDRE */

#rejoindre {
    background: hsla(217, 100%, 50%, 1);
    background: linear-gradient(90deg, hsla(217, 100%, 50%, 0.7) 40%, hsla(186, 100%, 69%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(217, 100%, 50%, 0.7) 40%, hsla(186, 100%, 69%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(217, 100%, 50%, 0.7) 40%, hsla(186, 100%, 69%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0061FF", endColorstr="#60EFFF", GradientType=1 );
}

.btn-jubo, .btn-contact {
    text-shadow: none;
    color: #11064c;
    border-color: #11064c;    
}

.btn-jubo:hover, .btn-contact:hover {
    color: #86D1F8;
    border-color: #86D1F8; 
}


/* SECTION CONTACT */

#contact {
    /*background-color: darkgrey;*/
    border-color: #86D1F8;
}

#contact form {
    background: hsla(211, 96%, 62%, 0.5);
    background: radial-gradient(circle, hsla(211, 96%, 62%, 0.5) 40%, hsla(261, 84%, 45%, 0.5) 100%);
    background: -moz-radial-gradient(circle, hsla(211, 96%, 62%, 0.5) 40%, hsla(261, 84%, 45%, 0.5) 100%);
    background: -webkit-radial-gradient(circle, hsla(211, 96%, 62%, 0.5) 40%, hsla(261, 84%, 45%, 0.5) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#439CFB", endColorstr="#5612d6", GradientType=1 );
    
    padding: 2em;
    border-radius: 4px;
    border: 1px solid black;
}

.form-control {
    box-shadow: inset 0 0 6px #11064c;
}


/****************************************/
/************* membres page *************/
/****************************************/

/* SECTION MEMBRES */

#membres {
    background: hsla(0, 0%, 100%, 1);
    background: linear-gradient(270deg, hsla(0, 0%, 100%, 1) 0%, hsla(216, 41%, 79%, 1) 100%);
    background: -moz-linear-gradient(270deg, hsla(0, 0%, 100%, 1) 0%, hsla(216, 41%, 79%, 1) 100%);
    background: -webkit-linear-gradient(270deg, hsla(0, 0%, 100%, 1) 0%, hsla(216, 41%, 79%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#b5c6e0", GradientType=1 );
}

#membres li {
    text-align: justify;
}

#membres-card {
    background: hsla(192, 80%, 51%, 1);
    background: linear-gradient(90deg, hsla(192, 80%, 51%, 1) 0%, hsla(355, 85%, 63%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(192, 80%, 51%, 1) 0%, hsla(355, 85%, 63%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(192, 80%, 51%, 1) 0%, hsla(355, 85%, 63%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#1dbde6", endColorstr="#f1515e", GradientType=1 );
}



/****************************************/
/************ objectifs page ************/
/****************************************/

/* SECTION OBJECTIFS */

#objectifs #accordionExample .accordion-button:not(.collapsed) {
    color: #322775;
}


/****************************************/
/************** medias page *************/
/****************************************/

/* SECTION MEDIAS */

#medias-discord .card-body {
    text-align: center;
}

#medias-stream #alivestream {
   height: 400px; 
}

#medias-stream iframe {
    border: 1px solid black;
    border-radius: 4px;
}


/****************************************/
/************** nodes page *************/
/****************************************/

/* SECTION NODE-WARS */

#node-wars .container-node-won, #node-wars .container-node-lost {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075); 
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65);
}

#node-wars .container-node-won:hover {
    box-shadow: 1px 2px 3px 0px limegreen; 
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65);
}

#node-wars .container-node-lost:hover {
    box-shadow: 1px 2px 3px 0px red;
    transition: all 0.3s cubic-bezier(0.69, 0.43, 0.43, 0.65);
}

#node-wars img {
    width: 100px;
}

#node-wars img.versus {
    width: 50px;
}


/****************************************/
/**************** FOOTER ****************/
/****************************************/

footer {
    background: hsla(201, 89%, 75%, 1);
    background: linear-gradient(270deg, hsla(201, 89%, 75%, 1) 0%, hsla(249, 85%, 16%, 1) 100%);
    background: -moz-linear-gradient(270deg, hsla(201, 89%, 75%, 1) 0%, hsla(249, 85%, 16%, 1) 100%);
    background: -webkit-linear-gradient(270deg, hsla(201, 89%, 75%, 1) 0%, hsla(249, 85%, 16%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#86D1F8", endColorstr="#11064C", GradientType=1 );
}


.links, .auction {
    text-align: center;
}

footer svg {
    vertical-align: top;
}


/* ---------------------------------------------------------- */
/* ---------------------- TAB VERSION ----------------------- */
/* ---------------------------------------------------------- */

@media only screen and (min-width: 568px) {
    
    html, body {        
        font-size: 1.0rem;
    } 
  
    #header-page {
        height: 300px;
    }
    
    /* SECTION PRESENTATION */

    .presentation img {
        margin-top: -19em;
        width: 400px;
    }
    
    /* SECTION NODE-WARS */
    
    #node-wars img {
        width: 150px;
    }
    
    #node-wars img.versus {
        width: 100px;
    }
}


/* ---------------------------------------------------------- */
/* --------------------- TAB 2 VERSION ---------------------- */
/* ---------------------------------------------------------- */

@media only screen and (min-width: 768px) {
    
    #header-page {
        height: 350px;
    }
    
    /* SECTION PRESENTATION */

    .presentation img {
        margin-top: -21em;
        width: 450px;
    }
    
    /* SECTION MEDIAS */
    
    #medias-stream #alivestream {
       height: 500px; 
    }
    
    /* SECTION NODE-WARS */
    
    #node-wars img {
        width: 200px;
    }
    
    #node-wars img.versus {
        width: 150px;
    }

    
}

/* ---------------------------------------------------------- */
/* -------------------- Mini PC VERSION --------------------- */
/* ---------------------------------------------------------- */

@media only screen and (min-width: 992px) {
    
    /* SECTION PRESENTATION */

    .presentation img {
        margin-top: -24em;
        width: 500px;
    }
    
    /* SECTION ACTIVITEES */
    
    #activitees .card-group {
        display: flex;
    }
    
    /* SECTION MEDIAS */
    
    #medias-discord .card-horizontal {
        display: flex;
        flex: 1 1 auto;
    }
    
    #medias-discord .card-body {
        text-align: justify;
    }
    
    /* SECTION NODE-WARS */
    
    #node-wars img {  
        width: 225px;
    }
    
    #node-wars img.versus {
        width: 175px;
    }
}

/* ----------------------------------------------------------- */
/* ---------------------- PC VERSION ------------------------- */
/* ----------------------------------------------------------- */

@media only screen and (min-width: 1200px) {
    
    html, body {        
        font-size: 1.1rem;
    } 
    
    
    /* SECTION PRESENTATION */

    .presentation img {
        margin-top: -21em;
        width: 550px;
    }
    
    /* SECTION NODE-WARS */
    
    #node-wars img {  
        width: 250px;
    }
    
    #node-wars img.versus {
        width: 225px;
    }
    
}