/*VARIABLES*/

:root{

    --main-black: #1E1E1E;

    --second-black: #2C2C2C;

    --main-gray: #7B7B7B;

    --main-red: #FF0B56;

    --main-blue: #08FDD8;

    --main-white: #fff;

    --main-yellow: #FDD808;

    --main-purple: #D808FD;

    --main-green:rgb(9, 255, 0);

    --second-blue: #0b56ff;

    

            



    --navbar-size: 160px;

    --navbar-size-margin: 180px;

}

@font-face{

    font-family: 'batman';

    src: url('../font/batman.ttf') format('truetype');

}

@font-face{

    font-family: 'aurore';

    src: url('../font/LaBelleAurore.ttf') format('truetype');

}











/*INITIALISATION*/

    .parcoursup{

        font-family: "Roboto" !important;

    }

    body{

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        font-family: "Roboto";

        background-color: var(--main-black);

    }

    .little{

        display: none;

    }

    .little-800{

        display: none;

    }











/*STRUCTURE ELEMENTS COMMUNS*/

    .margin-l40{

        margin-left: 20px;

    }

    .margin-l-40{

        margin-left: -20px;

    }

    .h2-blue{

        color: var(--main-blue);

        font-size: 90px;

        letter-spacing: 7px;

        margin: 0;

    }

    .h2-red{

        color: var(--main-red);

        font-size: 70px;

        letter-spacing: 7px;

        margin: 0;

    }

    .text-align{

        text-align: center;

    }

    .text-blue{

        color: var(--main-blue)!important;

        font-size: 20px!important;

        text-decoration: none!important;

    }

    .text-red{

        color: var(--main-red);

        font-size: 20px;

        text-decoration: none;

    }

    .hand{

        font-family: "aurore";

        font-size: 20px;

        color: var(--main-gray);

        line-height: 20px;

        text-align: left;

    }

    .is-scroll{

        display: none;

    }











/*BOUTTONS*/

    .btn{

        text-decoration: none;

        color: var(--main-blue);

        border: solid 2px var(--main-blue);

        font-size: 16px;

        padding: 10px 30px;

        position: relative;

        display: inline-block;

        letter-spacing: 3px;

        text-transform: uppercase;

        transition: 0.5s;

        overflow: hidden;

    }

    .btn:hover{

        color: #000;

    }

    .btn span{

        position: absolute;

        display: block;

        width: 0px;

        height: 0px;

        transform: translate(-50%,-50%);

        border-radius: 50%;

        border-bottom: 50%;

        background-color: var(--main-blue);

        transition: width 0.7s, height 0.7s;

        z-index: -1;

    }

    .btn:hover span{

        width: 400px;

        height: 300px;

    }

    .min-width-btn{

        width: 163px;

        text-align: center;

    }











/*ANIMATION SOURIS*/

    #animation-start{

        position: relative;

        width: 100%;

        height: 920px;

        display: flex;

        justify-content: center;

        align-items: center;

        flex-wrap: wrap;

        overflow: hidden;

        animation: animateColors 15s linear infinite;

        opacity: 1;

        background: var(--main-black);

    }

    #animation-start .mouse{

        position: relative;

        display: block;

        width: 40px;

        height: 40px;

        background: var(--main-black);

    }

    #animation-start .mouse::before{

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: var(--main-red);

        box-shadow: 0 0 10px var(--main-red),

        0 0 40px var(--main-red),

        0 0 60px var(--main-red),

        0 0 80px var(--main-red);

        border-radius: 50%;

        transition: 2s;

        transform: scale(0);

        z-index: 1;

    }

    #animation-start .mouse:hover::before{

        transition: 0s;

        transform: scale(1);

        opacity: 1;

    }













/*MATERIAL DESIGN FORM CONTACT*/

    .field{

        position: relative;

        height: 72px;

        padding: 16px 0 8px 0;

        width: 90%;

        min-width: 300px;

        margin: auto;

    }

    .field-big{

        position: relative;

        height: 200px;

        padding: 16px 0 8px 0;

        width: 90%;

        min-width: 300px;

        margin: auto;

    }

    .field-label{

        position: relative;

        margin: 0;

        display: block;

        color:  var(--main-gray);

        line-height: 16px;

        font-size: 16px;

        font-weight: 400;

        transform: translateY(24px);

        transition: transform 0.3s, color 0.3s;

        transform-origin: 0 50%;

        z-index: 50;

    }

    .field-input{

        position: relative;

        display: block;

        width: 100%;

        height: 32px;

        padding: 8px 0;

        line-height: 16px;

        font-family: Roboto;

        font-size: 16px;

        background: transparent;

        border: none;

        -webkit-appearance: none;

        outline: none;

        background-color: var(--second-black);

        color: #fff;

    }

    .field-input-big{

        height: 160px;

    }

    .field-area{

        height:auto;

        padding-top:5px;

        width:90%;

    }



    .field::after, .field::before{

        content:'';

        height: 2px;

        width: 100%;

        position: absolute;

        bottom: 6px;

        left: 0;

        background-color: var(--second-gray);

    }



    .field::after{

        background-color: var(--main-blue);

        transform: scaleX(0);

        transition: transform 0.3s;

    }

    .has-label .field-label{

        transform: translateY(0) scale(0.75);

    }

    .has-label .field-label2{

        transform: translateY(0) scale(0.75);

    }

    .field2::after{

        background-color: var(--main-blue);

        transform: scaleX(0) !important;

        transition: transform 0.3s;

    }

    .is-focused .field-label{

        color: var(--main-blue);

    }

    .field.is-focused::after{

        transform: scaleX(1);

    }

    .field.error .field-label{

        color: var(--main-red);

    }

    .field.error::after{

        background-color: var(--main-red);

    }

    .field.error .field-label{

        color: var(--main-red);

    }

    .field.error::after{

        background-color: var(--main-red);

    }

    button{

        padding: 0;

        border: none;

        background: none;

        text-align: center;

        position: relative;

        top: 10px;

    }

    form{

        text-align: center;

    }











/*BIG CONTAINER*/

    #container{

        font-family: "Roboto";

        margin-left: var(--navbar-size-margin);

        margin-right: 1%;

    }







/*FIX NAVBAR*/

    #navbar-container{

        width: var(--navbar-size);

        height: 100vh;

        position: fixed;

        top: 0;

        left: 0;

        background-color: #000;

    }



        /*NAVBAR*/

            #navbar{

                width: 100%;

                height: 100%;

                text-align: center;

                display: flex;

                flex-direction: column;

                align-items: center;

                justify-content: space-evenly;

            }

            .navbar-item{

                width: 100%;

            }



            /*SVG AW*/

                /*CHILD 1*/

                #svg-container{

                    list-style-type: none;

                    text-decoration: none;

                    width: 100%;

                    height: 100%;

                }

                #svg-container:hover{

                    background-color: var(--main-gray);

                    opacity: 0.5;

                }

                .svg-letters{

                    font-size: 80px;

                    height: 150px;

                    width: 200px;

                }

                .svg-letters-red{

                    fill: var(--main-red);

                }

                .svg-letters-blue{

                    fill: var(--main-blue);

                }



                /*CHILD 2*/

                #navbar-list{

                    list-style-type: none;

                    text-decoration: none;

                    margin: 0;

                    padding: 0;

                    font-size: 20px;

                }

                .navbar-item-item2{

                    padding: 10px 0;

                    width: 100%;

                    border-bottom: solid 1px var(--main-gray);

                }

                .navbar-item-item2-first{

                    border-top: solid 1px var(--main-gray);

                }

                .nav-link{

                    text-decoration: none;

                    color: var(--main-gray);

                    letter-spacing: 1px;

                    position: relative;

                    padding: 3px 0;

                }

                .nav-link:hover{

                    color: var(--main-blue);

                }

                .nav-link::before,

                .nav-link::after{

                    content: "";

                    width: 100%;

                    height: 2px;

                    background-color: var(--main-red);

                    position: absolute;

                    left: 0;

                    transform: scaleX(0);

                    transition: transform 0.5s;

                }

                .nav-link::after{

                    bottom: 0;

                    transform-origin: right;

                }

                .nav-link::before{

                    top: 0;

                    transform-origin: left;

                }



                .nav-link:hover::before,

                .nav-link:hover::after{

                    transform: scaleX(1);

                }



                /*CHILD 3*/

                #navbar-item3{

                    color: var(--main-gray);

                    display: flex;

                    justify-content: center;

                    margin-bottom: 5px;

                    /*height: 300px;*/

                }

                #navbar-item4{

                    color: var(--main-gray);

                    display: flex;

                    justify-content: center;

                    margin-bottom: 5px;

                    list-style-type: none;

                    /*height: 300px;*/

                }

                .social-icon{

                    height: 50px;

                    width: 50px;

                    display: flex;

                    justify-content: center;

                    align-items: center;

                    margin: 0 0.5rem;

                    color: var(--main-gray);

                    border: 1px solid var(--main-gray);

                    border-radius: 50%;

                    text-decoration: none;

                    font-size: 1.5rem;

                  }

                  .social-icon:hover{

                    color: var(--main-blue);

                    border-color: var(--main-blue);

                  }





    

/*TITLE CONTAINER*/

    #title-container{

        display: flex;

        color: #fff;   

    }

    #section-title{

        margin-top: -800px;

        margin-left: 1%;

        font-size: 70px;

        font-weight: 900;

        z-index: 500;

        min-width: 1050px;

        height: fit-content;

    }

    #title{

        margin-left: 1%;

    }

    .text-home{

        font-family: "batman";

    }

    .text-home1{

        position: relative;

        top: 20px;

    }

    .svg-letters-home{

        font-size: 110px;

        height: 90px;

        width: 80px;

    }

    .text-home-lex{

        margin-left: -22px;

    }

    .typing{

        color: var(--main-red);

    }

    #button-container{

        display: flex;

        color: #fff;   

    }

    #section-button{

        margin-top: -300px;

        margin-left: 1%;

        font-size: 70px;

        font-weight: 900;

        z-index: 500;

        height: fit-content;

    }

    #scroll-container{

        display: flex;

        color: var(--main-gray);   

    }

    #section-scroll{

        font-size: 30px;

        font-weight: 900;

        z-index: 500;

        writing-mode: vertical-rl;

        text-orientation: mixed;

        position: fixed;

        top: 600px;

        right: 50px;

    }



/*SECTION PORTFOLIO*/

.flip-card{

    background-color: transparent;

    width: 100%;

    height: 100%;

    perspective: 1000px;

}

.flip-card-inner{

    position: relative;

    width: 100%;

    height: 100%;

    text-align: center;

    transition: transform 0.6s;

    transform-style: preserve-3d;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

.flip-card:hover .flip-card-inner{

    transform: rotateY(180deg);

}

.flip-card-front,

.flip-card-back{

    position: absolute;

    width: 100%;

    height: 100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.flip-card-front{

    background-color: var(--main-blue);

    color: black;

}

.flip-card-back{

    background-color: var(--main-red);

    color: white;

    transform: rotateY(180deg);

}

.img-flip{

    width: 150px;

    height: 150px;

    border-radius: 50%;

}

.img-flip-back{

    width: 100%;

    height: 100%;

}

.flip-card-back p{

    margin: 0;

    padding: 0;

}





    #section-portfolio{

        margin-left: 0px;

    }

        .text-portfolio{

            color: #fff;

            width: 800px;

            margin-left: 20px;

        }

        .portfolio-works{

            display: grid;

            grid-template-columns: repeat(5, 1fr);

            grid-template-rows: repeat(6, 1fr);

            gap: 5px 5px;

        }

        .works-item{

            width: 100%;

            height: 200px;

            display: flex;

            justify-content: center;

            align-items: center;

            font-weight: 900;

            font-size: 24px;

            color: #000;

            opacity: 0.6;

        }

        .works-item.item1{

            grid-column: 1 / 2;

            grid-row: 3 / 5;

            height: 100%;

        }

        .works-item.item1:hover{

            opacity: 1;

        }

        .works-item.item2{

            grid-column: 2 / 3;

            grid-row: 2 / 4;

            height: 100%;

        }

        .works-item.item2:hover{

            opacity: 1;

        }

        .works-item.item3{

            grid-column: 2 / 3;

            grid-row: 4 / 6;

            height: 100%;

        }

        .works-item.item3:hover{

            opacity: 1;

        }

        .works-item.item4{

            grid-column: 3 / 4;

            grid-row: 5 / 7;

            height: 100%;

        }

        .works-item.item4:hover{

            opacity: 1;

        }

        .works-item.item5{

            grid-column: 3 / 4;

            grid-row: 1 / 3;

        }

        .works-item.item5:hover{

            opacity: 1;

        }

        .works-item.item6{

            grid-column: 3 / 4;

            grid-row: 3 / 5;

        }

        .works-item.item6:hover{

            opacity: 1;

        }

        .works-item.item7{

            grid-column: 4 / 5;

            grid-row: 2 / 4;

        }

        .works-item.item7:hover{

            opacity: 1;

        }

        .works-item.item8{

            grid-column: 4 / 5;

            grid-row: 4 / 6;

        }

        .works-item.item8:hover{

            opacity: 1;

        }

        .works-item.item9{

            grid-column: 5 / 6;

            grid-row: 3 / 5;

        }

        .works-item.item9:hover{

            opacity: 1;

        }
        .works-title-section{
            text-align: center;
            color: var(--main-blue);
        }
        .works-title-section2{
            text-align: center;
            color: var(--main-blue);
            font-size: 18px;
        }
        .works-title-section3{
            text-align: center;
            color: var(--main-red);
            font-size: 15px;
        }

        













/*SECTION TIMELINE ET RESTONSIVE*/

    #section-timeline{

        margin-top: 200px;

        margin-bottom: 200px;

    }

    .timeline {

         display: flex;

         margin: 0 auto;

         flex-wrap: wrap;

         flex-direction: column;

         max-width: 700px;

         position: relative;

    }

     .timeline-content-title {

         font-weight: normal;

         font-size: 66px;

         margin: -10px 0 0 0;

         transition: 0.4s;

         padding: 0 10px;

         box-sizing: border-box;

         color: #fff;

    }

     .timeline-content-desc {

         margin: 0;

         font-size: 15px;

         box-sizing: border-box;

         color: rgba(255, 255, 255, .7);

         font-family: Cardo;

         font-weight: normal;

         line-height: 25px;

    }

     .timeline:before {

         position: absolute;

         left: 50%;

         width: 2px;

         height: 100%;

         margin-left: -1px;

         content: "";

         background: rgba(255, 255, 255, .07);

    }

     @media only screen and (max-width: 767px) {

         .timeline:before {

             left: 40px;

        }

    }

     .timeline-item {

         padding: 40px 0;

         opacity: 0.3;

         filter: blur(2px);

         transition: 0.5s;

         box-sizing: border-box;

         width: calc(50% - 40px);

         display: flex;

         position: relative;

         transform: translateY(-80px);

    }

     .timeline-item:before {

         content: attr(data-text);

         letter-spacing: 3px;

         width: 100%;

         position: absolute;

         color: var(--main-blue);

         font-size: 13px;

         border-left: 2px solid rgba(255, 255, 255, .5);

         top: 70%;

         margin-top: -5px;

         padding-left: 15px;

         opacity: 0;

         right: calc(-100% - 56px);

    }

     .timeline-item:nth-child(even) {

         align-self: flex-end;

    }

     .timeline-item:nth-child(even):before {

         right: auto;

         text-align: right;

         left: calc(-100% - 56px);

         padding-left: 0;

         border-left: none;

         border-right: 2px solid rgba(255, 255, 255, .5);

         padding-right: 15px;

    }

     .timeline-item--active {

         opacity: 1;

         transform: translateY(0);

         filter: blur(0px);

    }

     .timeline-item--active:before {

         top: 50%;

         transition: 0.3s all 0.2s;

         opacity: 1;

    }

     .timeline-item--active .timeline-content-title {

         margin: -50px 0 20px 0;

    }

     @media only screen and (max-width: 767px) {

         .timeline-item {

             align-self: baseline !important;

             width: 100%;

             padding: 0 30px 150px 80px;

        }

         .timeline-item:before {

             left: 10px !important;

             padding: 0 !important;

             top: 50px;

             text-align: center !important;

             width: 60px;

             border: none !important;

        }

         .timeline-item:last-child {

             padding-bottom: 40px;

        }

    }

     .timeline-img {

         max-width: 100%;

         box-shadow: 0 10px 15px rgba(0, 0, 0, .4);

    }

     .timeline-container {

         width: 100%;

         position: relative;

         padding: 80px 0;

         transition: 0.3s ease 0s;

         background-attachment: fixed;

         background-size: cover;

    }

     .timeline-container:before {

         position: absolute;

         left: 0;

         top: 0;

         width: 100%;

         height: 100%;

         background: rgba(99, 99, 99, 0.8);

         content: "";

    }

     .timeline-header {

         width: 100%;

         text-align: center;

         margin-bottom: 80px;

         position: relative;

    }

     .timeline-header-title {

         font-size: 46px;

         font-weight: normal;

         margin: 0;

    }

     .timeline-header-subtitle {

         font-size: 16px;

         letter-spacing: 5px;

         margin: 10px 0 0 0;

         font-weight: normal;

    }

     .demo-footer {

         padding: 60px 0;

         text-align: center;

    }

     .demo-footer a {

         color: #999;

         display: inline-block;

         font-family: Cardo;

    }

     











/*SECTION CONTACT*/

    #section-contact{

        margin-top: 2%;

        margin-bottom: 100px;

    }

    #section-contact-big-container{

        margin-top: 100px;

        margin-bottom: 100px;

    }

        .contact-container{

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-direction: row-reverse;

            

        }

        .map-container{

            background: url("../img/map.png");

            background-size: cover;

            background-position: center center;

            background-repeat: no-repeat;

            width: 100%;

            height: 400px;

        }

        .contact-map{

            width: 100%;

            min-width: 600px;

            height: 500px;

        }

        .form-contact-container{

            width: 50%;

        }

        .form-contact{

            width: 100%;

        }

        .location{

            color: white;

            float: right;

            background-color: #000;

            padding: 70px 20px;

        }

        /*PHP MODIF*/

        .modif-contact-php{

            margin-bottom: 198px !important;

        }

















/*SECTION ABOUT AND SKILLS*/

.section-left{

    text-align: center;

}

.section-right{

    width: 100%;

    height: 100%;

}

.about-skills-text{

    color: #fff;

    opacity: 0.8;

}

.section-content{

    margin: 0 10px;

    color: var(--main-red);

    font-weight: 400;

    position: relative;

    display: inline-block;

}

.section-content::before{

    content: '';

    position: absolute;

    left: -175%;

    top: 50%;

    transform: translateY(-50%);

    width: 170%;

    height: 2px;

    background: var(--main-blue);

}

.section-content::after{

    content: '';

    position: absolute;

    right: -175%;

    top: 50%;

    transform: translateY(-50%);

    width: 170%;

    height: 2px;

    background: var(--main-blue);

}





    /*SECTION ABOUT*/

        #about{

            display: grid;

            grid-template-columns: 45% 45%;

            align-items: center;

            height: 100vh;

        }

        #myCanvasContainer{

            width: 100%;

            height: 100%;

            text-align: center;

        }

        #myCanvas{

            width: 100%;

            height: 100%;

        }





    /*SECTION SKILLS*/

        #skills{

            height: 100vh;

            display: grid;

            grid-template-columns: 45% 45%;

            align-items: center;

            

        }

        .section-right.skills{

            width: 100%;

            margin-top: 5%;

            height: 90vh;

            display: flex;

            flex-wrap: wrap;

            justify-content: space-around;

        }

        .section-right.skills .card{

            position: relative;

            width: 250px;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 250px;

            border-radius: 4px;

            text-align: center;

            overflow: hidden;

            transition: 0.5s;

        }

        .section-right.skills .card:hover{

            box-shadow: 0 15px 35px rgba(0,0,0,.5);

            transform: translateY(-10px);

        }

        .section-right.skills .card:before{

            content: '';

            position: absolute;

            top: 0;

            left: -50%;

            width: 100%;

            height: 100%;

            pointer-events: none;

            z-index: 1;

        }

        .percent{

            position: relative;

            width: 150px;

            height: 150px;

            border-radius: 50%;

            box-shadow: inset 0 0 50px #000;

            background: #222;

            z-index: 100;

        }

        .percent .number{

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            border-radius: 50%;

        }

        .percent .number h2{

            color: #777;

            font-weight: 700;

            font-size: 40px;

            transition: 0.5s;

        }

        .card:hover .percent .number h2{

            color: #fff;

            font-size: 60px;

        }

        .percent .number h2 span{

            font-size: 24px;

            color: #777;

        }

        .text{

            color: #777;

            margin-top: 20px;

            font-weight: 700;

            font-size: 18px;

            letter-spacing: 1px;

            text-transform: uppercase;

            transition: 0.5s;

        }

        .card:hover .text{

            color: #fff;

        }

        .svg-skills{

            position: relative;

            width: 150px;

            height: 150px;

            z-index: 1000;

        }

        circle{

            width: 100%;

            height: 100%;

            fill: none;

            stroke: #191919;

            stroke-width: 10;

            stroke-linecap: round;

            transform: translate(5px, 5px);

        }

        circle:nth-child(2){

            stroke-dasharray: 440;

            stroke-dashoffset: 440;

        }

        .card:nth-child(1) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 60) / 100);

            stroke: var(--main-purple);

        }

        .card:nth-child(2) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 60) / 100);

            stroke: var(--main-yellow);

        }

        .card:nth-child(3) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 30) / 100);

            stroke: var(--main-purple);

        }

        .card:nth-child(4) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 30) / 100);

            stroke: var(--main-yellow);

        }

        .card:nth-child(5) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 30) / 100);

            stroke: var(--main-red);

        }

        .card:nth-child(6) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 60) / 100);

            stroke: var(--main-yellow);

        }

        .card:nth-child(7) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 60) / 100);

            stroke: var(--main-purple);

        }

        .card:nth-child(8) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 30) / 100);

            stroke: var(--main-yellow);

        }
        .card:nth-child(9) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 20) / 100);

            stroke: var(--main-purple);

        }
        .card:nth-child(10) .svg-skills circle:nth-child(2){

            stroke-dashoffset: calc(440 - (440 * 80) / 100);

            stroke: var(--main-red);

        }













/*DOUBLE SECTIONS*/

        .container-title-content{

            /*width: fit-content;*/

            display: flex;

            justify-content: center;

            align-items: center;

            flex-direction: column;

        }

        .section-content.interest{

            width: fit-content;

        }

        .hand.align-left{

            align-self: flex-start;

        }

        p.double-section{

            color: #fff;
            /*50% sans text-align*/
            width: 100%;

            margin-top: 25px;
            text-align: center;

        }



    /*SECTION INTEREST*/

        #interest{

            display: grid;

            align-items: center;

            height: 100vh;

        }

            .container-title-content{

                display: flex;

                justify-content: center;

                align-items: center;

                flex-direction: column;

            }

            .section-content.interest{

                width: fit-content;

            }

            .hand.interest{

                align-self: flex-start;

            }

            



    /*SECTION  WORKS*/

        #works{

            margin-bottom: 2%;

        }

            #container-carousel{

                margin-top: 4%;

            }

            .hand.works{

                margin-bottom: 50px;

            }

            .max-width{

                max-width: 1300px;

                margin: auto;

                background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(61, 61, 61, 0.25));

                box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),

                 -8px -8px 12px 0 rgba(70, 70, 70, 0.3);

                border-radius: 10px;

                padding: 20px 20px;

            }

            .container-carousel .carousel .card{

                border-radius: 6px;

                padding: 25px 35px;

                margin: 20px 20px;

                text-align: center;

                overflow: hidden;

                transition: all 0.3s ease;

                background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(90, 90, 90, 0.25));

                box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),

                 -8px -8px 12px 0 rgba(71, 71, 71, 0.3);

                border-radius: 10px;

                background: linear-gradient(135deg, rgba(0,0,0,0.22), rgba(59, 59, 59, 0.25));

            }

            .container-carousel .carousel .card:hover{

                background: rgba(220, 20, 60, .8);

            }

            .container-carousel .carousel .card .box{

                display: flex;

                flex-direction: column;

                align-items: center;

                justify-content: center;

                transition: all 0.3s ease;

            }

            .container-carousel .carousel .card:hover .box{

                transform: scale(1.05);

            }

            .container-carousel .carousel .card .text{

                font-size: 25px;

                font-weight: 500;

                margin: 10px 0 7px 0;

                padding-bottom: 10px;

                color: #fff;

                border-bottom: solid 2px var(--main-gray);

                width: 100%;

            }

            .container-carousel .carousel .card p{

                font-size: 16px;

                font-weight: 500;

                margin: 10px 0 7px 0;

                padding-bottom: 15px;

                color: #fff;

                opacity: 0.9;

                border-bottom: solid 2px var(--main-gray);

                width: 100%;

            }

            .container-carousel .carousel .card img{

                height: 150px;

                width: 150px;

                object-fit: cover;

                border-radius: 50%;

                border: 5px solid crimson;

                transition: all 0.3s ease;

            }

            .container-carousel .carousel .card:hover img{

                border-color: #fff;

            }

            .owl-dots{

                text-align: center;

                margin-top: 20px;

            }

            .owl-dot{

                height: 13px;

                width: 13px;

                margin: 0 5px;

                outline: none!important;

                border-radius: 50%;

                border: 2px solid crimson!important;

                transition: all 0.3s ease;

            }

            .owl-dot.active{

                width: 35px;

                border-radius: 14px;

            }

            .owl-dot.active,

            .owl-dot:hover{

                background: crimson!important;

            }

            .a-carousel{

                margin-top: 10px;

                width: 100px;

            }



/*FOOTER START*/

footer{

    bottom: 0;

    background-color: #000;

    width: 100%;

    text-align: center;

    padding: 5px 0;

}

#footer{

    color: white;

    font-size: 12px;

}













/*RESPONSIVE*/



/*1500px * 800px*/

@media (max-width: 1500px){

    #section-scroll{

        top: 200px;

        right: 20px;

     }

    #container{

        margin-left: 2%;

    }

    #section-title{

        min-width: 95%;

    }



    /*NAVBAR*/

    #navbar-container{

        display: none;

    }

    .menu-item{

        display: flex;

        align-items: center;

        justify-content: center;

        position: fixed;

        right: 50px;

        top: 50px;

        padding: 40px;

        background-color: rgba(0, 0, 0, .7);

        z-index: 9999999;

    }

    .navbar{

        width: 100%;

        height: 100%;

        background-color: var(--second-black);

        position: fixed;

        top: 0;

        left: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        text-align: center;

        transition: left 0.6s cubic-bezier(1, 0, 0, 1);

        z-index: -1;

    }

    .nav-list{

        text-decoration: none;

        list-style-type: none;

        width: 100%;

        height: 100vh;

        margin: 0;

        padding: 0;

        display: flex;

        justify-content: space-evenly;

        align-items: center;

        flex-direction: column;

        font-size: 30px;

    }

    .change{

        left: 0;

    }

    .hamburger-menu{

        width: 35px;

        height: 30px;

        position: fixed;

        cursor: pointer;

        display: flex;

        flex-direction: column;

        justify-content: space-around;

    }

    .line{

        width: 100%;

        height: 3px;

        background-color: white;

        transition: all 0.8s;

    }

    .line-1.change {

        transform: rotateZ(-405deg) translate(-8px, 6px);

    }

    .line-2.change {

        opacity: 0;

    }

    .line-3.change {

        transform: rotateZ(405deg) translate(-8px, -6px);

    }

    #svg-container{

        width: 100%;

        height: 30%;

        display: flex;

        justify-content: center;

        align-items: center;

        background-color: #000;

        

    }

    #navbar-list2{

        width: 100%;

    }

    #navbar-list3{

        width: 100%;

        display: flex;

        justify-content: center;

        height: 5%;

    }

    

}





@media (max-width: 1150px){

    #section-scroll{

        top: 200px;

        right: 20px;

     }

    #skills{

        display: grid;

        grid-template-columns: 1fr;

        align-items: center;

        height: 100vh;

    }

}





/*1000px * 800px*/

@media (max-width: 1000px){

    #section-scroll{

        top: 200px;

        right: 20px;

     }



    .h2-blue{

        color: var(--main-blue);

        font-size: 70px;

        letter-spacing: 7px;

        margin: 0;

    }

    .h2-red{

        color: var(--main-red);

        font-size: 50px;

        letter-spacing: 7px;

        margin: 0;

    }

#container{

    margin-top: 5%;

}

#section-timeline{

    margin-left: 0;

}



    /*MENU*/

        .menu-item{

            display: flex;

            align-items: center;

            justify-content: center;

            position: fixed;

            right: 20px;

            top: 20px;

            padding: 30px;

            background-color: rgba(0, 0, 0, .7);

            z-index: 9999999;

        }



        /*TITLE*/

        #title{

            font-size: 50px;

        }



        /*PORTFOLIO*/

        .text-portfolio{

            width: 90%;

        }

        .img-flip{

            width: 140px;

            height: 140px;

        }

        /*CONTACT*/

            .contact-container{

                flex-direction: column;

                margin-right: 1%;

            }





        /*ABOUT*/

            #about{

                display: grid;

                grid-template-columns: 1fr;

                align-items: center;

                height: 100vh;

            }

            #myCanvasContainer{

                width: 90%;

                height: 90%;

                margin: auto;

                text-align: center;

            }

            #myCanvas{

                width: 100%;

                height: 100%;

            }







        /*PORTFOLIO AND INTEREST*/

        .portfolio-works{

            display: grid;

            grid-template-columns: repeat(6, 1fr);

            grid-template-rows: repeat(5, 1fr);

            gap: 5px 5px;

        }

        .works-item{

            width: 100%;

            height: 200px;

            display: flex;

            justify-content: center;

            align-items: center;

            font-weight: 900;

            font-size: 20px;

            color: #000;

            opacity: 0.6;

        }

        .works-item.item1{

            grid-row: 1 / 2;

            grid-column: 3 / 5;

            height: 100%;

        }

        .works-item.item1:hover{

            opacity: 1;

        }

        .works-item.item2{

            grid-row: 2 / 3;

            grid-column: 2 / 4;

            height: 100%;

        }

        .works-item.item2:hover{

            opacity: 1;

        }

        .works-item.item3{

            grid-row: 2 / 3;

            grid-column: 4 / 6;

            height: 100%;

        }

        .works-item.item3:hover{

            opacity: 1;

        }

        .works-item.item4{

            grid-row: 3 / 4;

            grid-column: 5 / 7;

            height: 100%;

        }

        .works-item.item4:hover{

            opacity: 1;

        }

        .works-item.item5{

            grid-row: 3 / 4;

            grid-column: 1 / 3;

        }

        .works-item.item5:hover{

            opacity: 1;

        }

        .works-item.item6{

            grid-row: 3 / 4;

            grid-column: 3 / 5;

        }

        .works-item.item6:hover{

            opacity: 1;

        }

        .works-item.item7{

            grid-row: 4 / 5;

            grid-column: 2 / 4;

        }

        .works-item.item7:hover{

            opacity: 1;

        }

        .works-item.item8{

            grid-row: 4 / 5;

            grid-column: 4 / 6;

        }

        .works-item.item8:hover{

            opacity: 1;

        }

        .works-item.item9{

            grid-row: 5 / 6;

            grid-column: 3 / 5;

        }

        .works-item.item9:hover{

            opacity: 1;

        }

}





/*800px * 800px*/

@media (max-width: 800px){



    body{

        overflow-x: hidden;

    }

    #section-scroll{

        top: 380px;

        right: 20px;

     }

    .big-800{

        display: none;

    }

    .little-800{

        display: inline;

    }

    #animation-start{

        display: none;

    }

    .h2-blue{

        font-size: 50px;

    }

    .margin-top-form{

        margin-top: 20px;

    }

    .nav-list{

        font-size: 20px;

    }



    /*BUTTON*/

    .btn{

        font-size: 10px;

    }

    .min-width-btn{

        width: 50px;

    }

    #section-button{

        margin-top: -500px;

    }





    /*TITLE*/

        #title{

            font-size: 40px;

        }

        #section-title{

            min-width: 390px;

            margin-top: 15%;

        }

        #section-button{

            margin-top: 0;

        }

        .svg-letters-home{

            height: 50px;

            font-size: 60px;

        }

        .text-home-lex{

            margin-left: -40px;

        }



    /*PORTFOLIO*/

        .section-portfolio{

            margin-top: 250px;

        }



        .form-contact-container{

            width: 100%;

        }

        .field{

            min-width: 100%;

        }

}



/*600px * 800px*/

@media (max-width: 600px){



    

    #section-scroll{

        top: 290px;

        right: 20px;

     }



#container{

    margin: 0;

}

.h2-blue{

     font-size: 35px;

}

.h2-blue{

    font-size: 35px;

}

.text-portfolio{

    font-size: 14px;

}

.text-red{

    font-size: 16px;

}

.text-blue{

    font-size: 16px;

}

 #title{

     font-size: 32px;

     max-width: 350px;

}

.min-width-btn{

    width: 100px !important;

}

.btn{

    width: 32px;

}



 .section-portfolio{

     margin-top: 200px;

 }

 .img-flip{

     width: 90px;

     height: 90px;

 }



 #contact-container{

     margin-right: 0;

 }



 .timeline-container{

     padding: 0;

     margin: 0;

 }

 .btn-600{

     width: max-content;

 }

 

}





@media (max-width: 400px){

    .h2-blue{

        font-size: 25px;

    }

   .h2-blue{

       font-size: 25px;

    }

   .hand{

       display: none;

    }

   .text-portfolio{

       font-size: 14px;

    }

   .text-red{

       font-size: 16px;

    }

   .text-blue{

       font-size: 16px;

    }

    #title{

        font-size: 25px;

        max-width: 250px;

    }

   #section-scroll{

       top: 200px;

       right: 20px;

    }

   .btn{

    width: 20px;

    text-align: center;

    }

    .btn-600{

    width: max-content;

    text-align: center;

    }

    .a-carousel{

        margin-top: 10px;

        width: 40px;

        text-align: center;

    }

   .flip-card-front{

       font-size: 14px;

   }

   .flip-card-back{

    font-size: 14px;

    }   

    .section-portfolio{

        margin-top: 100px;

    }

    .img-flip{

        width: 60px;

        height: 60px;

    }

   

    #contact-container{

        margin-right: 0;

    }

   

    .timeline-container{

        padding: 0;

        margin: 0;

    }

    

    

    

   }