@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;900&family=Noto+Sans:wght@300&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
:root {
    --primary: #e9e9e9;
    --secondary: #1f1d1d59;
    --tertiary: #F4FF00;
    --dark: #000;
    --light: #ffffff54;
    --font:
    'Barlow';
    --font_body:
    'Noto Sans';
}

* {
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

footer {
    display: flex;
    justify-content: center;
    padding: 10px;
    background: #1f1d1d59;
    align-items: center;
    text-align: center;
    position: relative;
    color: var(--primary);
    letter-spacing: 2px;
}
footer p{position: relative;display: contents;}
section#education .item:hover p.description {
    color: var(--dark);
}

section#education {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
}

main section {
    padding: 5% 5%;
}

section#contact .container {
    display: flex;
    gap: 40px;
    padding: 4% 0;
}

section#contact .container form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 50%;
}

form input, form textarea {
    background: transparent;
    padding: 10px 20px 20px 12px;
    width: 100%;
    border: 1px solid #ffffff24;
    font-size: 20px;
    font-family: var(--font);
    color: var(
    --primary);
    letter-spacing: 2px;
}

input.submit {
    color: var(--primary);
    background: var(--secondary);
    border: none;
    /* width: auto; */
    padding: 18px 32px;
    transition: all .3s linear;
    cursor: pointer;
}

input.submit:hover {
    background: var(--tertiary);
    color: var(--dark);
    font-weight: bold;
}

section#contact .container .infos {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: var(--secondary);
    padding: 40px;
}

section#contact .container .infos h3 {
    font-size: 40px;
}

section#contact .container .infos .head p {
    font-size: 20px;
    font-family: var(--font);
    color: var(--light);
}

section#contact .container .infos p i {
    font-size: 18px;
    color: var(--tertiary);
    padding-right: 6px;
}

section#contact .container .infos p {
    font-size: 16px;
}

section#hobbies .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

section#hobbies .container .item {
    padding: 20px 40px;
    transition: all .3s linear;
    background: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 18px;
    height: 100px;
    font-family: var(--font);
}

section#hobbies .container .item i {
    font-size: 50px;
    color: var(--tertiary);
}

section#hobbies .container .item:hover {
    background: var(--tertiary);
    color: var(--dark);
    font-weight: 900;
    font-size: 25px;
}

section#hobbies .container .item:hover i {
    color: var(--dark);
}

section#skills {}

section#skills .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px;
}

section#skills .container div {
    display: flex;
    flex-direction: column;
}

section#skills .container h2 {
    color: var(--primary);
    -webkit-text-fill-color: var(--light);
    -webkit-text-stroke: var(--light);
    line-height: 1;
    font-size: 30px;
    letter-spacing: 0px;
    padding: 20px 0;
    display: block;
    text-align: center;
}

section#skills .container span {padding: 12px 0;font-family: var(--font);}

section#skills .container span.level {height: 2px;background: var(--light);padding: 0;margin-bottom: 20px;position: relative;}

section#skills .container span.level:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tertiary);
}

section#skills .container span.level:after {
    content: "100%";
    position: absolute;
    right: 0;
    top: -38px;
}
/* html & css */
section#skills .container .technical-skills span.level.level-1:before{width: 90%;}
section#skills .container .technical-skills span.level.level-1::after{content: '90%';}
/* Professional-skills */
section#skills .container .professional-skills span.level:before{width: 80%;}
section#skills .container .professional-skills span.level::after{content: '80%';}
/* javascript */
section#skills .container .technical-skills span.level.level-2:before{width: 60%;}
section#skills .container .technical-skills span.level.level-2::after{content: '60%';}
/* Jquery */
section#skills .container .technical-skills span.level.level-3:before{width: 60%;}
section#skills .container .technical-skills span.level.level-3::after{content: '60%';}
/* ReactJS */
section#skills .container .technical-skills span.level.level-4:before{width: 40%;}
section#skills .container .technical-skills span.level.level-4::after{content: '40%';}
/* Php & MySql */
section#skills .container .technical-skills span.level.level-5:before{width: 70%;}
section#skills .container .technical-skills span.level.level-5::after{content: '70%';}
/* Microsoft Office */
section#skills .container .technical-skills span.level.level-6:before{width: 80%;}
section#skills .container .technical-skills span.level.level-6::after{content: '80%';}
/* Adobe Photoshop / Figma */
section#skills .container .technical-skills span.level.level-7:before{width: 80%;}
section#skills .container .technical-skills span.level.level-7::after{content: '80%';}

section#experience {
    padding-top: 20px;
}

section#experience .container {
    justify-content: space-between;
    display: flex;
    gap: 20px;
}

section#experience .container .item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: var(--secondary);
    padding: 30px 20px;
}

section#experience .container .item .title {
    font-weight: 700;
    font-family: var(--font);
    font-size: 18px;
}

section#experience .container .item .date {
    color: var(--tertiary);
}

section#education .container {
    display: flex;
    gap: 20px;
}

section#education .container .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--secondary);
    padding: 30px 40px;
    gap: 0px;
    text-align: left;
    transition: all .3s linear;
}

section#education .container .item:hover {
    background: var(--tertiary);
}

section#education .container .item .date {
    color: var(--light);
    font-size: 20px;
    font-weight: 100;
    font-family: var(--font);
}

section#education .container .item:hover .date {
    color: var(--dark);
}

section#education .title {
    text-align: center;
    color: var(--primary);
    font-family: var(--font);
    font-weight: 700;
    font-size: 20px;
    position: relative;
    padding-bottom: 10px;
    text-align: left;
}

section#education .item:hover .title {
    color: var(--dark);
}

body {
    background-color: var(--dark);
    color: var(--primary);
    font-family: var(--font_body);
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 1.7;
    scroll-behavior: smooth;
}

h1 {
    font-weight: 700;
}

a {
    text-decoration: none;
    color: var(--primary);
}

div.title {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
    position: relative;
    align-items: center;
}

div.title h2 {
    text-align: center;
    line-height: 1;
    position: relative;
    font-size: 4rem;
    -webkit-text-fill-color: var(--primary);
    -webkit-text-stroke-color: var(--primary);
    -webkit-text-stroke-width: thin;
    letter-spacing: 2px;
    text-transform: uppercase;
}

div.title h2:before {
    content: "";
    height: 1px;
    width: 70px;
    background: var(--tertiary);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%);
}

.title p {
    position: absolute;
    bottom: 0;
    letter-spacing: 2px;
    color: var(--primary);
}

div.title span {
    font-weight: 700;
    color: var(--tertiary);
    position: absolute;
    font-family: var(--font);
    top: -35px;
    font-size: 20px;
    white-space: nowrap;
}

.text-bloc {
    text-align: justify;
}

section#about {
    display: grid;
    grid-gap: 5%;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 2fr;
}

main {
    position: relative;
    left: 260px;
    display: block;
    width: calc(100% - 320px);
    overflow-x: hidden;
}

div.img {
    position: relative;
    width: 400px;
    height: 400px;
    background: #000000;
}

header div.img {
    border: 1px solid var(--tertiary);
}

div.img:before {
    content: "";
    width: 80px;
    height: 80px;
    border: 1px solid var(--tertiary);
    position: absolute;
    right: 40px;
    top: -45px;
    /* border: 10px solid #000000; */
    transform: rotate(45deg);
}

header div.img:before {
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
}

header div.img:after {
    top: 60px;
    left: 87%;
    background: #f4ff00;
}

div.img:after {
    content: "";
    width: 70px;
    height: 70px;
    background: var(--tertiary);
    position: absolute;
    left: -60px;
    bottom: -50px;
    border-radius: 50%;
    border: 10px solid #000000;
}

div.img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding-top: 10%;
}

.btns {
    margin: 20px 0;
    display: flex;
    gap: 20px;
}

.btns a.btn {
    background: transparent;
    border: 1px solid #ffffff1a;
    padding: 15px 20px;
    font-size: 20px;
    letter-spacing: 4px;
    color: var(--light);
    position: relative;
    overflow: hidden;
    font-weight: 700;
    transition: all .3s linear;
}

.btns a.btn:hover {
    color: var(--dark);
}

.btns a.btn:before {
    content: "";
    inset: 0;
    background: var(--tertiary);
    position: absolute;
    left: 0;
    transition: all 0.8s cubic-bezier(0.77, 0.2, 0.05, 1);
    width: 0;
    z-index: -1;
}

.btns a.btn:hover:before {
    left: 0;
    width: 100%;
}

h1 span.subtitle {
    color: var(--tertiary);
    display: block;
}

span.subtitle:nth-child(2) {
    color: var(--tertiary);
    font-size: 22px;
    text-transform: uppercase;
    padding: 25px 0 34px;
    letter-spacing: 5px;
    font-weight: 100;
    font-family: var(--font);
}

.slogan {
    display: flex;
    flex-direction: column;
}

.slogan h1,
h2 {
    font-size: 4rem;
    /* -webkit-text-fill-color: transparent; */
    /* -webkit-text-stroke-color: var(--light); */
    /* -webkit-text-stroke-width: thin; */
    letter-spacing: 5px;
    font-family: var(--font);
}

.slogan h1 {
    line-height: 1;
}

.count-particles {
    display: none;
}

div#stats {
    display: none;
}

nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0e0e0e;
    padding: 2% 40px;
    align-items: center;
    position: fixed;
    height: 100%;
    width: 200px;
}

div#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

a.logo img {
    max-width: 100px;
}

header {
    position: relative;
    height: 100vh;
}

section#header {
    height: 100%;
    display: flex;
    z-index: 9;
    position: relative;
}

section#header:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000000bd;
}

.banner {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 10%;
    position: relative;
    left: 20%;
}

nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 40px;
    letter-spacing: 1px;
}

nav ul li a {
    font-size: 24px;
    transition: all .3s linear;
    position: relative;
    font-weight: 700;
    font-family: var(--font);
    color: var(--light);
}

nav ul li a:hover {
    color: var(--tertiary);
}

nav ul li a:before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--tertiary);
    left: -200px;
    top: 50%;
    position: absolute;
    transition: all .3s linear
}

nav ul li a:hover:before {
    left: -33px;
}

.social {
    display: flex;
    gap: 8px;
}

section#contact .social {gap: 25px;}

section#contact .social a {
    border-color: #ffffff17;
    width: 45px;
    font-size: 20px;
    height: 45px;
}

.social a {
    width: 35px;
    height: 35px;
    border: 1px solid #c7c7c726;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: all .3s linear;
}

.social a:hover {
    color: var(--dark);
    background: var( --tertiary);
    border-color: var( --dark);
    transform: rotate(360deg);
}


/* =======================================
The juicy stuff
======================================= */

.filter-section {
    padding: 30px 60px;
    transition: 1.3s;
}

.controls ul {
    text-align: center;
}

.controls ul li {
    color: #f1f1f1;
    opacity: .7;
    background: transparent;
    display: inline;
    padding: 12px 16px;
    margin: 0 5px;
    cursor: pointer;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    -webkit-tap-highlight-color: transparent;
    font-size: 20px;
}

.controls ul li:hover,
.controls ul li.active {
    text-decoration: underline solid white 2px;
    text-underline-offset: 0.5rem;
    opacity: 1;
    color: var(--tertiary);
}

.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

.item-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
    gap: 1rem;
}

.item-grid .item {
    display: none;
    overflow: hidden;
    background: #1d1d1d;
    position: relative;
}

.item-grid .item a {
    position: absolute;
    inset: 0;
    background: #000000d6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-family: var(--font);
    font-weight: 100;
    gap: 20px;
    z-index: 9;
    letter-spacing: 2px;
    transform: scale(0);
    transition: all .3s linear;
}

.item-grid .item:hover a {
    transform: scale(1);
}

.item-grid .item img {
    width: 100%;
    transition: all .3s linear;
    height: 100%;
    object-fit: contain;
}

.item-grid .item.websites img {
    object-fit: cover;
}

.item-grid .item:hover img {
    transform: scale(1.5) rotate(5deg)
}


/* Media Queries */

@media only screen and (min-width: 768.1px) and (max-width: 991px) {
    .item-grid {
        grid-template-columns: repeat(2, 1fr);
    }
} 
@media (max-width: 768px) {
    .item-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    div.img{display: none;}
    .banner{left: 30%;}
    section#about{grid-template-columns: 1fr;}
    main{left: 220px;width: calc(100% - 240px);}
    main section{padding: 10% 5%;}
    section#education .container,section#experience .container,section#contact .container{flex-wrap: wrap;}
    div.title h2{font-size: 3rem;}
    section#skills .container,section#hobbies .container{grid-template-columns: 1fr;}
    section#contact .container form,section#contact .container .infos{width: 100%;}
}
@media (max-width: 576px){
    nav{display: none;}
    .banner{left: 0px;width: 100%;padding: 10%;}
    span.subtitle:nth-child(2){font-size: 16px;letter-spacing: 4px;padding: 12px 0;}
    .slogan h1, h2{font-size: 40px;letter-spacing: 2px;}
    .btns{flex-wrap: wrap;}
    .btns a.btn{width: 100%;text-align: center;}
    .slogan h1{text-align: center;}
    header{height: 70vh;}
    main {
        left: 0;
        width: 100%;
    }
    div.title h2 {
        font-size: 25px;
    }
}