@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import '../css/skins/color-1.css';

:root {
    --bg-black-900: #f2f2fc; --bg-black-100: #fdf9ff; --bg-black-50: #e8dfec; --text-black-900: #302e4d; --text-black-700: #504e70;
}

body.dark {
    --bg-black-900: #151515; --bg-black-100: #222222; --bg-black-50: #393939; --text-black-900: #ffffff; --text-black-700: #e9e9e9;
}

body ul li {
    color: var(--skin-color);
}

body {     
    margin: 0; padding: 0; line-height: 1.5; font-size: 16px; font-family: 'Poppins' sans-serif;
}

* {
    margin: 0; padding: 0; outline: none; text-decoration: none; box-sizing: border-box;
}

::before, ::after {
    box-sizing: border-box;
}

/**
*   Section style configuration start
*/
.section {
    background: var(--bg-black-900); display: block; min-height: 100vh; opacity: 1; padding: 0 30px; transition: all 0.3 ease;
    position: fixed; left: 275px; top: 0; right: 0; bottom: 0; z-index: 0; overflow-x: hidden; overflow-y: auto;
}
.section.back-section {
    z-index: 1;
}
.section.active {
    z-index: 2; opacity: 1; animation: slideSection 1s ease;
}
@keyframes slideSection {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}


.hidden {
    display: none !important;
}

.shadow-dark {
    box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
}

/**
* RESPONSIVE DESIGN CONFIGURATION
*/

@media (max-width: 1385px) {
    
    .aside {
        left: -275px;
    }
    .aside.open {
        left: 0;
    }

    .aside .nav-toggler {
        display: flex; left: 30px;
    }
    .aside .nav-toggler.open {
        left: 300px;
    }

    .section .container {
        padding-top: 70px;
    }

    .section {
        left: 0;
    }
    .section.open {
        left: 275px;
    }


    .about .about-content .personal-info .info-item p span {
        display: block;
        margin-left: 0;
    }
}

@media (min-width: 1110px) {
    
    .portfolio .portfolio-item {
        margin-bottom: 30px; flex: 0 0 33.33%;
    }
}

@media (max-width: 1110px) {

    .about .about-content .experience,
    .about .about-content .education {
        flex: 0 0 100%; max-width: 100%; margin-top: 50px;
    }
    .about .about-content .timeline {
        width: 100%;
    }
    .about .about-content .skills .skill-item {
        flex: 0 0 50%; max-width: 50%; 
    }

    .home .home-info {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .home .home-img {
        display: none;
    }

    .contact .contact-info-item, .service .service-item {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .portfolio .portfolio-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
}

@media (max-width: 770px) {
    
    .about .about-content .skills, .contact .contact-info-item, .contact .contact-form .col-6,
    .service .service-item, .portfolio .portfolio-item, .about .about-content .skills .skill-item,
    .about .about-content .personal-info, .about .about-content .personal-info .info-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    h3.title720 {
        font-size: 20px;
    }
    h3.hello span {
    font-family: 'Clicker Script'; font-size: 32px; font-weight: 700; color: var(--skin-color);
    }

    .contact .contact-info-item p {
        text-align: center;
    }

    p.paragraphe720 {
        font-size: 17px; text-align: left;
    }

    p {
        font-size: 12px; text-align: justify;
    }

    h3, h4 {
        font-size: 10px;
    }

    .rdv {
        margin-left: 0px;
    }
}