@font-face {
    font-family: open sans;
    src: url("./assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf");
}
@font-face {
    font-family: CrimsonText;
    src: url("./assets/fonts/Crimson_Text/CrimsonText-SemiBold.ttf");
}

@font-face {
    font-family: CrimsonTextRegular;
    src: url("./assets/fonts/Crimson_Text/CrimsonText-Regular.ttf");
}

@font-face {
    font-family : Spectralsc;
    src: url("./assets/fonts/Spectral_SC/SpectralSC-Regular.ttf");
}

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

    /*Main*/
    /*Main - Section 1*/
    #section1 {
        height: 100vh;
        position: relative;
        background: url("./assets/images/bg_mainpage_l.svg") no-repeat;
        background-color:#000000;
        background-position: bottom right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #section1 .alignment {
        width: 100%;
        margin: 0 8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .alignment h1 {
        color:white;
        font-family: SpectralSC;
        font-size:56px;
        letter-spacing: 7px;
        margin-bottom: 16px;
        font-weight: normal;
    }
    
    .alignment h3 {
        font-family: open sans;
        font-size: 20px;
        font-weight:normal;
        color: #D9D9D9;
        line-height : 1.5;
    }
    
    .no-wrap {
        white-space: nowrap;
    }
    
    #container-btn {
        width:256px;
        height:80px;
        position:absolute;
        bottom: 40px;
        margin:auto;
        animation: dragit 2s ease-in infinite;
        cursor: pointer;
    }
    
    #container-btn a {
        width:256px;
        height:80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color:white;
        font-family: SpectralSC;
        font-size: 18px;
        letter-spacing: 2px;
    }
    
    .icon-arrow {
        margin:10px 0;
        width: 32px;
        height: 32px;
        stroke: currentColor;
        fill: none;
    }

    @keyframes dragit {
        from{
            bottom: 40px;
            opacity: 1;
        }
    
        to{
            bottom: 10px;
            opacity:0;
        }
    }
    
    /*Main -- Section 2*/
    #section2 {
        position: relative;
        width:100%;
        padding:10% 0;
        background-color:#f0f0f0;
    }
    
    .section-title {
        font-family: SpectralSC;
        color:#353535;
        font-size:36px;
        letter-spacing: 4px;
        text-align: center;
        margin:0 8%;
        padding: 0 0 1% 0;
        font-weight: normal;
    }
    
    .container-gradient {
        background-image: linear-gradient(#f0f0f0, #d9d9d9);
    }
    
    .container-mywork {
        width:84%;
        margin: 0 8%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items:center;
    }

    #section2 figure {
        display:block;
        width:340px;
        height:272px;
        margin: auto;
        margin-top: 80px;
        overflow: hidden;
    }
    
   
    
    
    /*Section 3*/
    /*Section 3 Part Left*/
    #section3 {
        position: relative;
        width:100%;
        padding:10% 0;
        background-color:#f0f0f0;
    }
    
    .container-aboutme {
        width: 84%;
        margin: 0 8%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    #avatar-small {
        display: none;
    }

    .card {
        width:400px;
        height:600px;
        perspective:1000;
        margin:5% auto;
    }
    
    .card .inner {
        position:relative;
        width:400px;
        height:600px;
    }
    .oneside_card {
        display:none;
    }

    .front,.back {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        overflow: hidden;
        border-radius: 24px;
        box-shadow: 0 0 50px 2px rgba(0, 0, 0, 0.1);
        color:#AC9C8D;
        font-family: CrimsonText;
        letter-spacing: 0.8px;
        background: url(./assets/images/card-v2/bg-dark.png) no-repeat;
        background-size: cover;
        border:none;   
    }
    
    .avatar {
        width:400px;
        height:auto;
    }

    .back {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .logo-complet {
        height: 144px;
        margin-bottom: 50px;
    }
    
    #section3 .back h4 {
        font-size: 20px;
        margin:10px 0;
        font-weight: normal;
    }
    
    .tel,.email {
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        margin-top: 20px;
    }
    
    .email a {
        text-decoration: none;
        color:#AC9C8D;
    }
    
    .icons-contact {
        width: 20px;
        height: 20px;
        margin:12px;
    }
    
    .back {
        transform:rotateY(180deg);
    }
    
    .card:hover .inner{
        transform:rotateY(180deg);
    }
    
    .card .inner {
        transition: transform 0.5s ease-in-out;
        transform-style:preserve-3d;
    }
    
    .back {
        backface-visibility: hidden;
    }
    
    /*Section 3 Part Right*/
    .right-side {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 400px;
        height: 600px;
        margin: 5% auto;
    }
    
    .sous-titre {
        font-family: open sans;
        font-size: 24px;
        color:#353535;
        letter-spacing: 1px;
    }
    
    #section3 .right-side ul {
        list-style: none;
        font-family: open sans;
        font-size: 18px;
        width:400px;
    }
    
    .animebar {
        margin:48px 0;
        position:relative;
    }
    
    .animebar::before {
        content:"";
        display: block;
        height:16px;
        width:100%;
        background-color:#d9d9d9;
        position: absolute;
        bottom:-28px;
        border-radius: 6px;
    }

    #ui {
        content:"";
        display: block;
        height:16px;
        width:0%;
        background-color:rgb(204, 204, 204);
        position: absolute;
        bottom:-28px;
        border-radius: 6px;
        background-color:#353535;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
        
    }
    
    #ux {
        content:"";
        display: block;
        height:16px;
        width:0%;
        background-color:rgb(204, 204, 204);
        position: absolute;
        bottom:-28px;
        border-radius: 6px;
        background-color:#353535;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }

    #frontend {
        content:"";
        display: block;
        height:16px;
        width:0%;
        background-color:rgb(204, 204, 204);
        position: absolute;
        bottom:-28px;
        border-radius: 6px;
        background-color:#353535;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }

    #designthinking {
        content:"";
        display: block;
        height:16px;
        width:0%;
        background-color:rgb(204, 204, 204);
        position: absolute;
        bottom:-28px;
        border-radius: 6px;
        background-color:#353535;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }

    #communication {
        content:"";
        display: block;
        height:16px;
        width:0%;
        background-color:rgb(204, 204, 204);
        position: absolute;
        bottom:-28px;
        border-radius: 6px;
        background-color:#353535;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }
    
    @keyframes ui {
        from{
            width:0;
        }
        to{
            width:100%;
        }
    }
    
    @keyframes ux {
        from{
            width:0;
        }
        to{
            width:90%;
        }
    }
    
    @keyframes frontend {
        from{
            width:0;
        }
        to{
            width:60%;
        }
    }
    
    @keyframes designthinking {
        from{
            width:0;
        }
        to{
            width:90%;
        }
    }
    
    @keyframes communication {
        from{
            width:0;
        }
        to{
            width:90%;
        }
    }
    
    .espace-btn {
        margin-top: 64px;
    }
    
    .btn-contact {
        width:200px;
        height: 52px;
        background-color:#353535;
        border: none;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: center;
        border-radius: 12px;
        text-decoration: none;
    }
    
    #section3 .right-side .btn-contact p {
        font-family: open sans;
        font-size: 18px;
        color:#f0f0f0;
    }
    
    #section3 .icon-cta {
        margin-left:16px;
        width: 20px;
        height:20px;
    }
    

/*For Extra Big Screen - PC classic screen*/
@media screen and (min-width:1640px) {

        
        /*For Section 2*/
        .preview-work-l {
            display: none;
        }

        .preview-work-m {
            display: none;
        }

        .preview-work-s {
            display: none;
        }

        .container-mywork2 {
            width:44%;
            margin: 0 28%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items:center;
        }

        #section2 figcaption {
            font-family: open sans;
            font-size: 18px;
            color:#303030;
            letter-spacing: 3px;
            text-align: center;
            transform: translateY(300%);
            opacity:0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height:84px;
        }
        
        .works-preview {
            width:340px;
            height: auto;
            transform: translateY(10%);
            filter:brightness(0.93);
        }
        
        #section2 figure:hover {
            overflow: none;
        }
        
        #section2 figure:hover .works-preview{
            transform: scale(0.99) translateY(0);
            transition-duration: 0.5s;
            filter:brightness(1);
        }
        
        #section2 figure:hover figcaption{
            transform: translateY(0);
            transition-duration: 0.5s;
            opacity: 1;
        }
}


/*For Big Screen - laptop screen*/
@media screen and (min-width:1220px) and (max-width:1639px) {
    
    /*For Section 2*/
    
    .preview-work-xl {
        display: none;
    }

    .preview-work-m {
        display: none;
    }

    .preview-work-s {
        display: none;
    }

    #section2 figcaption {
        font-family: open sans;
        font-size: 18px;
        color:#6D6D6D;
        letter-spacing: 3px;
        text-align: center;
        transform: translateY(300%);
        opacity:0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height:84px;
    }
    
    .works-preview {
        width:340px;
        height: auto;
        transform: translateY(10%);
        filter:brightness(0.93);
    }
    
    #section2 figure:hover {
        overflow: none;
    }
    
    #section2 figure:hover .works-preview{
        transform: scale(0.99) translateY(0);
        transition-duration: 0.5s;
        filter:brightness(1);
    }
    
    #section2 figure:hover figcaption{
        transform: translateY(0);
        transition-duration: 0.5s;
        opacity: 1;
    }
}



/*For medium screen - iPad Horizontal Screen*/
@media screen and (min-width:900px) and (max-width:1219px) {

/*For Section2*/
    #section2 .container-gradient {
        background-image: linear-gradient(#f0f0f0, #d9d9d9);
    }

    .preview-work-xl {
        display: none;
    }

    .preview-work-l {
        display: none;
    }

    .preview-work-s {
        display: none;
    }

    #section2 figure {
        height:220px
    }

    #section2 figcaption {
        font-family: open sans;
        font-size: 18px;
        color:#6D6D6D;
        letter-spacing: 3px;
        text-align: center;
    }
    
    .works-preview {
        width:340px;
        height: auto;
        transform: translateY(10px);
    }

/* For Section3  */
    .card {
        display:none;
    }

    .oneside_card {
        width:400px;
        height:600px;
        margin:5% auto;
        position:relative;
        display:block;
    }

    .frontside {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        overflow: hidden;
        border-radius: 24px;
        box-shadow: 0 0 50px 2px rgba(0, 0, 0, 0.1);
        color:#AC9C8D;
        font-family: CrimsonText;
        letter-spacing: 0.8px;
        background: url(./assets/images/card-v2/bg-dark.png) no-repeat;
        background-size: cover;
        border:none;   
    }
    
}

/*For small screen - iPad Vertical Screen*/
@media screen and (min-width:600px) and (max-width:899px) {
   
    /*For Section2*/
        #section2 .container-gradient {
            background-image: linear-gradient(#f0f0f0, #d9d9d9);
        }
    
        .preview-work-xl {
            display: none;
        }
    
        .preview-work-l {
            display: none;
        }
    
        .preview-work-m {
            display: none;
        }

        #section2 figure {
            height:220px
        }

        #section2 figcaption {
            font-family: open sans;
            font-size: 18px;
            color:#6D6D6D;
            letter-spacing: 3px;
            text-align: center;
        }
        
        .works-preview {
            width:340px;
            height: auto;
            transform: translateY(10px);
        }
    
    /* For Section3  */
        .card {
            display:none;
        }
    
        .oneside_card {
            width:400px;
            height:600px;
            margin:5% auto;
            position:relative;
            display:block;
        }
    
        .frontside {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height: 100%;
            overflow: hidden;
            border-radius: 24px;
            box-shadow: 0 0 50px 2px rgba(0, 0, 0, 0.1);
            color:#AC9C8D;
            font-family: CrimsonText;
            letter-spacing: 0.8px;
            background: url(./assets/images/card-v2/bg-dark.png) no-repeat;
            background-size: cover;
            border:none;   
        }
        
    }

/*For Extra-Small Screen - Mobile Phone Screen*/
@media screen and (max-width:599px) {

/*For Section 1*/
    #section1 {
        height: 100vh;
        position: relative;
        background: url("./assets/images/bg_mainpage_s.svg");
        background-position: bottom center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }    

    #section1 .alignment {
        width: 68%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .alignment h1 {
        font-size: 36px;
        margin-bottom: 12px;
        letter-spacing: 4px;
    }

    .alignment h3 {
        font-size: 14px;
    }

    #container-btn {
        width: 208px;
        height: 65px;
    }

    #container-btn a {
        width: 208px;
        height: 65px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .icon-arrow {
        margin:10px 0;
        width: 24px;
        height: 24px;
    }

/*For Section2*/
    .section-title {
        font-size: 28px;
    }

    #section2 .container-gradient {
        background-image: linear-gradient(#f0f0f0, #d9d9d9);
    }

    .preview-work-xl {
        display: none;
    }

    .preview-work-l {
        display: none;
    }

    .preview-work-m {
        display: none;
    }

    #section2 figure {
        display:block;
        width:100%;
        height:100%;
        margin: auto;
        margin-top: 70px;
        overflow: hidden;
    }

    #section2 figcaption {
        font-family: open sans;
        font-size: 16px;
        color:#6D6D6D;
        letter-spacing: 3px;
        text-align: center;
    }
    
    .works-preview {
        width:100%;
        height: auto;
        transform: translateY(10px);
    }

/*For Section 3*/
    .card {
        display:none;
    }

     #avatar-small {
        display: block;
        width: 100%;
        margin-top: 8%;
        overflow: hidden;
    }

    .avatar-s {
        width: 50%;
        height: auto;
        display: block;
        margin: auto;
        object-fit: cover;
    }

    .container-aboutme {
        width: 84%;
        margin: 0 8%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .right-side {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 12% auto;
        width:auto;
        height:auto;
    }

    .sous-titre {
        font-size: 20px;
    }

    #section3 .right-side ul {
        list-style: none;
        font-family: open sans;
        font-size: 14px;
        width: 320px;
        height: 320px;
    }

    .btn-contact {
        width: 100%;
    }

    #section3 .right-side .btn-contact p {
        font-family: open sans;
        font-size: 16px;
        color: white;
    }

}