@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,800;0,900;1,500&display=swap');
/*============ Variables CSS ============*/

:root{
    /*============ Couleurs ============*/
    /* cursor: none; */

    --primary-color: #25aae1;
    --secondary-color: #2bb673;
    --background-color: #121212;
    --container-color: rgb(37, 37, 37);
    --background-gradient: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    /* --background-gradient: linear-gradient(120deg, var(--first-color) 0%, var(--second-color) 100%);
    --reverse-background-gradient: linear-gradient(120deg, var(--second-color) 0%, var(--first-color) 100%); */
    --text-color: white;
    --box-shadow: 0 4px 15px 5px rgba(0, 0, 0, 0.25);
    --box-shadow-small : 0 4px 4px rgba(0, 0, 0, 0.25);

    /*============ Fonts et typo ============*/

    --main-font: "Poppins", sans-serif;
    --h1-font-size: 5rem;
    --h2-font-size: 3rem;
    --h3-font-size: 2rem;
    --bigger-font-size: 1.5rem;
    --normal-font-size: 1.25rem;
    --small-font-size: 1rem;

    /*============ Fonts weight ============*/

    --font-light: 300;
    --font-regular: 500;
    --font-medium: 800;
    --font-bold: 900;

    /*============== Effects ===============*/

    --border-radius: 15px;
    --blur: blur(10px);
    -webkit-font-smoothing: antialiased;

    /* Font */
    font-family: var(--main-font);
    font-size: var(--normal-font-size);
}

/* Responsive typo  */
@media (max-width: 1250px) {
    :root{
        --h1-font-size: 3rem;
        --h2-font-size: 2rem;
        --h3-font-size: 1.5rem;
        --bigger-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: 0.8rem;
    }
}

/*============ CSS Globale ============*/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    /* scroll-padding: 15vh; */
}

body{
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-color);
    background-color: var(--background-color);
}


/* Permet de cacher les élément possédant la class hidden */
*.hidden{
    display: none !important;
}

/* ============ Propriétés globales ============ */


/* Les flexs */
.flex{
    display: flex;
}

.flex.row{
    flex-flow: row;
}

.flex.column{
    flex-flow: column;
}

.flex.wrap{
    flex-wrap: wrap;
}

.flex.center{
    align-items: center;
    justify-content: center;
}

.flex.between{
    justify-content: space-between;
}

/* Si on veut une bordure ronde sur les composants */
.rounded{
    border-radius: var(--border-radius);
}

.circle{
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    -ms-border-radius: 45px;
    -o-border-radius: 45px;
}

/* Remplissage */

.fill-w{
    width: 100%;
}

.fill-h{
    height: 100%;
}

.no-scroll{
    overflow: hidden;
}

/*============ Styles ============*/

a.underlined,
span.underlined,
p.underlined{
    display: inline;
    text-decoration: underline;
    text-decoration-color: var(--secondary-color) ;
    -moz-text-decoration-color: var(--secondary-color) ;
}

ul{
    list-style-type: none;
}

li{
    text-decoration: none;
}

h1{
    font-size: var(--h1-font-size);
}

h2{
    font-size: var(--h2-font-size);
}

h3{
    font-size: var(--h3-font-size);
}

/*============ Extra ============*/

.blured-b{
    backdrop-filter: var(--blur);
}
.blured{
    filter: var(--blur);
}

.glass{
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: var(--blur);
}

.shadow{
    box-shadow: var(--box-shadow);
}

.shadow-small{
    box-shadow: var(--box-shadow-small);
}

.bgg{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: var(--background-gradient);
}

strong{
    color: var(--primary-color);
    /* text-shadow: 0 0 4px white; */
}

/* Pour révéler des informations */

.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 0.5s 0.2s all ease-out;
    -webkit-transition: 0.5s 0.2s all ease-out;
    -moz-transition: 0.5s 0.2s all ease-out;
    -ms-transition: 0.5s 0.2s all ease-out;
    -o-transition: 0.5s 0.2s all ease-out;
}

.reveal.active{
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

/*============ Composants Basiques ============*/

.card{
    background-color: var(--container-color);
    color: var(--primary-color);
    /* width: fit-content;
    height: fit-content; */
    padding: 1.5rem;
}

.card.effect:hover{
    box-shadow: 0px 0px 15px 0px var(--primary-color);
}

.cards-wrapper{
    gap: 1rem;
    justify-content: center;
}

/* TODO les propriétés hover et focus du bouton et du input */

/* Les liens de navigations */
a{
    color: inherit;
    text-decoration: none;
    font-weight: var(--font-regular);
    font-size: var(--normal-font-size)
}

button{
    display: flex;
    gap: 0.5rem;
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    line-height: 1.2;
    color: var(--text-color);
    border: none;
    background-size: 300% 100%;
    background-image: var(--background-gradient);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    padding: 0.8rem 1.3rem;
    cursor: pointer;
    transition: 1s all;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    -ms-transition: 1s all;
    -o-transition: 1s all;
}

button:hover{
    transition: all 1s;
    transform: translateY(-7px);
    background-position: 100% 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

/* button iconify-icon{

} */


/*============ Composants basiques divers ============*/

/* Pour rendre un composant html compatible avec une icone */
.icon{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
}

iconify-icon{
    font-size: 30px;
}

/* Hero */

.hero{
    min-height: 85vh;
    color: var(--text-color);
}

.hero img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Le curseur de la page */

#cursor{
    opacity: 0;
    pointer-events: none;
    position: absolute;
    background-color: transparent;
    border: solid 2px rgba(255, 255, 255, 0.8);
    height: 50px;
    width: 50px;
    top: -50px;
    z-index: 100;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.325);
    /* box-shadow: 0 0 2px 3px rgba(255, 255, 255, 0.564),  0 0 10px 10px rgba(255, 255, 255, 0.325); */
    /* box-shadow: 0 0 2px 3px rgba(255, 255, 255, 0.564), 0 0 5px 7px rgba(255, 255, 255, 0.632),  0 0 10px 10px rgba(255, 255, 255, 0.325); */
}

#cursor.active{
    opacity: 1;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
}

/* Icone scroll */

.scroll-icon{
    position: absolute;
    bottom: 2rem;
    width: 40px;
    height: 70px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border: solid 2px white;
}

.scroll-icon::before{
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    background-color: white;
    left: 20px;
    margin-left: -6px;
    top: 8px;
    border-radius: 4px;
    animation: scroll 1.5s infinite;
    -webkit-animation: scroll 1.5s infinite;
}

@keyframes scroll {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translateY(46px);
        -webkit-transform: translateY(46px);
        -moz-transform: translateY(46px);
        -ms-transform: translateY(46px);
        -o-transform: translateY(46px);
}
}

/*============ Composants Complexes ============*/

/* background */

#scene{
    opacity: 1;
    z-index: -1;
    perspective: 10vmin;
    overflow: hidden;
    height: 100vh;
    position: absolute;
    width: 100%;
    background-image: radial-gradient(circle at 40% 40%, hsl(342, 70%, 16%) 0%, hsla(342, 73%, 16%, 0) 40%),	radial-gradient(circle at 25% 52%, hsl(241, 70%, 22%) 0%, hsla(242, 72%, 14%, 0) 50%),	radial-gradient(circle at 65% 56%, hsl(144, 66%, 15%) 0%, hsla(143, 76%, 16%, 0) 60%);
    background-blend-mode: screen;
}

#scene div{
    opacity: 0;
    filter: blur(1px);
    --unit: 1.5vmin;
    width: var(--unit);
    height: var(--unit);
    --rotate: rotateY(90deg);
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: white;
    animation: hyper 3s infinite;
    -webkit-animation: hyper 3s infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transform: translateZ(-200vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(1);
    -webkit-transform: translateZ(-200vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(1);
    -moz-transform: translateZ(-200vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(1);
    -ms-transform: translateZ(-200vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(1);
    -o-transform: translateZ(-200vmin) var(--rotate) rotateX(var(--rx)) translateZ(var(--x)) scaleX(1);
    -webkit-filter: blur(1px);
}

/* Header */

header {
    height: 15vh;
    max-height: 15vh;
}

header > nav {
    height: 15vh;
    max-height: 15vh;
    padding: 2rem 4rem;
    width: 100%;
    animation: slideInFromTop 1s;
    -webkit-animation: slideInFromTop 1s;
}

    header > nav > a{
        opacity: 0;
        pointer-events: none;
        font-size: 2.5rem;
        font-weight: 800;
    }

    header > nav > ul {
       gap: 0.3rem;
    }

    header > nav li{
        padding: 0.5rem 1rem;
        transition: background-color 0.3s;
        -webkit-transition: background-color 0.3s;
        -moz-transition: background-color 0.3s;
        -ms-transition: background-color 0.3s;
        -o-transition: background-color 0.3s;
}

    header > nav li.active{
        backdrop-filter: var(--blur);
        background-color: rgba(255, 255, 255, 0.15);
        transition: background-color 1s;
        -webkit-transition: background-color 1s;
        -moz-transition: background-color 1s;
        -ms-transition: background-color 1s;
        -o-transition: background-color 1s;
    }

    header > nav li a {
        font-size: var(--small-font-size);
    }


@media (max-width: 1250px)  {
    header > nav{
        display: none!important;
    }
}

/* Mode fixed */

header > nav.active{
    z-index: 1;
    position: fixed;
    animation: opacityFadeIn 1s, slideInFromTop 0.5s;
    -webkit-animation: opacityFadeIn 1s, slideInFromTop 0.5s;
}

header > nav.active > a {
    opacity: 1;
    pointer-events: all;
    padding: 2rem;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: -4px -4px  rgb(255, 255, 255);
    background-image: radial-gradient(circle at 40% 40%, hsl(342, 70%, 48%) 0%, hsla(342, 80%, 45%, 0.292) 40%),	radial-gradient(circle at 25% 52%, hsl(241, 83%, 49%) 0%, hsla(242, 67%, 42%, 0.173) 50%),	radial-gradient(circle at 65% 56%, hsl(144, 67%, 51%) 0%, hsl(143, 69%, 47%) 60%);
    transition: 0.3s text-shadow;
    -webkit-transition: 0.3s text-shadow;
    -moz-transition: 0.3s text-shadow;
    -ms-transition: 0.3s text-shadow;
    -o-transition: 0.3s text-shadow;
}

header > nav.active > a:hover {
    transition: 0.3s text-shadow;
    text-shadow: 0px 0px  rgb(255, 255, 255);
    -webkit-transition: 0.3s text-shadow;
    -moz-transition: 0.3s text-shadow;
    -ms-transition: 0.3s text-shadow;
    -o-transition: 0.3s text-shadow;
}
/*============ Animations ============*/

@keyframes hyper{
	0% {
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: 
		translateZ(0vmin)
		var(--rotate)
		rotateX(var(--rx))
		translateZ(var(--x))
		scaleX(4);
	}
}

/*============ Translations ============*/

@keyframes slideInFromTop {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
      transform: translateX(+100%);
    }
    100% {
      transform: translateX(0);
    }
}


@keyframes slideInFromBottom {
    0% {
      transform: translateY(+100%);
    }
    100% {
      transform: translateY(0);
    }
}

/*============ Opacity ============*/

@keyframes opacityFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

@keyframes opacityFadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}