/* -------------------------------- */
/* -------------------------------- */
/* ------------- CSS -------------- */
/* -------------------------------- */
/* -------------------------------- */

/* ----- GLOBAL ----- */
* {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    background-image: url("../images/f.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.littleScreen {
    display: none;
}

/* ------------------ */
/* ------------------ */

.divComputer {
    width: 26.1vw;
    height: 15.2vw;
    background: #22112554;
    position: relative;
    display: none;
}

.divName {
    display: flex;
    padding-top: 5%;
    padding-left: 5%;
}

/* ------------ */
/* -- PFNAME -- */
/* ------------ */
.pFName {
    display: none;
    position: relative;
    font-size: 2em;
    color: #ffffff00;
    padding-right: 10px;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.pFName::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    color: #ff0086;
    border-right: 0px;
    overflow: hidden;
    animation: 1.5s animPFName 1s linear forwards;
}
/* ------------ */
/* -- PSNAME -- */
/* ------------ */
.pSName {
    display: none;
    position: relative;
    font-size: 2em;
    color: #ffffff00;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.pSName::before {
    content: attr(data-text2);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    color: #ff0086;
    border-right: 0px;
    overflow: hidden;
    animation: 0.5s animPSName 2.5s linear forwards;
}

/* --------------- */
/* -- SPANPOINT -- */
/* --------------- */
.spanPoint {
    display: none;
    position: relative;
    font-size: 2em;
    color: #ffffff00;
    padding-right: 5px;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.spanPoint::before {
    content: attr(data-text3);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    color: #ff0086;
    overflow: hidden;
    animation: animSpanPoint 1s linear infinite;
}

/* ----------------- */
/* ----------------- */
.svgPlay {
    height: 3vw;
    width: 3vw;
    animation: 0.5s animSvgPlay 3.3s linear forwards;
    position: absolute;
    top: 7vw;
    left: 11.3vw;
    opacity: 0;
    cursor: pointer;
}
.pathSvgPlay {
    fill: #ff0086;
}
.svgPlay:hover {
    rotate: 269deg;
    border-radius: 25em;
    box-shadow:
        inset 0 0 0em #ff0086,
        0 0 1em #ff0086;
}

/* ------------------------ */
/* ------------------------ */
/* ------ @keyframes ------ */
/* ------------------------ */
/* ------------------------ */
/**/
@keyframes animLoader {
    0% {
        transform: scale(1);
    }
    80%,
    100% {
        transform: scale(0);
    }
}
/**/
@keyframes animPFName {
    0% {
        width: 0;
        border-right: 2px solid #ff0086;
    }
    40% {
        width: 0;
    }
    99% {
        border-right: 2px solid #ff0086;
    }
    100% {
        width: 100%;
        border-right: 0px;
    }
}
/**/
@keyframes animPSName {
    0% {
        width: 0px;
        border-right: 2px solid #ff0086;
    }
    99% {
        border-right: 2px solid #ff0086;
    }
    100% {
        width: 100%;
        border-right: 0px;
    }
}
/**/
@keyframes animSpanPoint {
    0% {
        overflow: hidden;
    }
    100% {
        overflow: visible;
    }
}
/**/
@keyframes animSvgPlay {
    0% {
        opacity: 1;
        scale: 0;
    }
    70% {
        scale: 1.1;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}
/**/
@keyframes animScreen {
    0% {
        scale: 0;
        opacity: 0;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}
/**/
@keyframes slide-inDescP {
    0% {
        translate: 150vw 0;
        scale: 200% 1;
        opacity: 0;
    }
    90% {
        opacity: 0.7;
        translate: 0 0;
        scale: 100% 1;
    }
    100% {
        opacity: 1;
    }
}
/**/
@keyframes spawnSvgSkillProfil {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/**/
@keyframes animOpaWid {
    from {
        opacity: 0;
        width: 0;
    }
    to {
        opacity: 1;
    }
}
/**/
@keyframes animOpaScalOne {
    from {
        opacity: 0;
        scale: 0;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}
/**/
@keyframes animOpaScalTwo {
    0% {
        opacity: 0;
        scale: 0;
    }
    70% {
        scale: 1.2;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}
/**/
@keyframes animOpa {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/**/
@keyframes animScal {
    from {
        scale: 0.8;
    }
    to {
        scale: 1;
    }
}
/**/
@keyframes animBubble {
    0% {
        opacity: 0;
        margin: 10px;
    }
    10% {
        margin: 20px;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
        margin: 20px;
    }
}
@keyframes animMouse {
    0% {
        opacity: 0;
        right: 50px;
        top: 50px;
    }
    30% {
        opacity: 1;
        left: 33px;
        top: 33px;
    }
    35% {
        scale: 1;
    }
    45% {
        scale: 1.5;
    }
    60% {
        scale: 1;
    }
    80% {
        opacity: 1;
        left: 33px;
        top: 33px;
    }
    100% {
        opacity: 0;
    }
}
/* ----------------- */
/* ----------------- */
/* ------ BTN ------ */
/* ----------------- */
/* ----------------- */
.btn {
    color: #fe90ca;
    cursor: pointer;
    border: 2px solid #ff0086;
    padding: 0.25em 1em;
    border-radius: 0.5em;
    text-shadow:
        0 0 0.5em #fff7,
        0 0 0em #ff0086;
    box-shadow:
        inset 0 0 0.3em #ff0086,
        0 0 0.3em #ff0086;
    background: #0000009e;
}
.btn:hover {
    background: #ff0086;
    box-shadow: 0 0 0.8em 0px #ff0086;
    color: #ffb1e8;
    scale: 1.03;
}
/* ------------------ */
/* ------------------ */
/* ---- BIGSCREEN --- */
/* ------------------ */
/* ------------------ */
.divBigScreen {
    display: none;
    border: 2px solid #ff0086;
    box-shadow:
        inset 0 0 0.5em #ff0086,
        0 0 0.5em #ff0086;
    border-radius: 25px;
    background: #00000091;
    width: 80%;
    height: 80vh;
    position: relative;
    animation: animScreen 0.3s forwards;
}
.divScreens {
    display: flex;
    width: 100%;
    height: 100%;
}

/* ---------------- */
/* ---------------- */
/* --- NAVSCREEN -- */
/* ---------------- */
/* ---------------- */
.navScreen {
    position: relative;
}
.svg {
    fill: #fe90cb;
    cursor: pointer;
}
.svgProfil {
    height: 2.5vw;
    width: 2.5vw;
    position: absolute;
    top: 1.25vw;
    left: 4.2vw;
}
.svgProfil:hover path {
    d: path(
        "M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4C62.7 98.1 32 112.2 32 128c0 14.3 25 27.1 64.6 35.9c-.4 4-.6 8-.6 12.1c0 17 3.3 33.2 9.3 48l-59.9 0C38 224 32 230 32 237.4c0 1.7 .3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7c0-58.5-28.2-110.4-71.7-143L415 242.4c.6-1.6 1-3.3 1-5c0-7.4-6-13.4-13.4-13.4l-59.9 0c6-14.8 9.3-31 9.3-48c0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9c-4.8 3.3-8.8 6.1-15.5 6.1zm56 208l-12.4 0c-16.5 0-31.1-10.6-36.3-26.2c-2.3-7-12.2-7-14.5 0c-5.2 15.6-19.9 26.2-36.3 26.2L168 224c-22.1 0-40-17.9-40-40l0-14.4c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4l0 14.4c0 22.1-17.9 40-40 40zm-88 96l16 32L176 480 128 288l64 32zm128-32L272 480 240 352l16-32 64-32z"
    );
}
.svgFolder {
    position: absolute;
    top: 1.25vw;
    left: 9.2vw;
    height: 2.7vw;
    width: 3.5vw;
}
.svgFolder:hover path {
    d: path(
        "M384 480l48 0c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224l-400 0c-11.4 0-21.9 6-27.6 15.9L48 357.1 48 96c0-8.8 7.2-16 16-16l117.5 0c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8L416 144c8.8 0 16 7.2 16 16l0 32 48 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l23.7 0L384 480z"
    );
}
.svgMail {
    position: absolute;
    top: 1.25vw;
    left: 15.4vw;
    height: 2.9vw;
    width: 2.9vw;
}
.svgMail:hover {
    height: 2.6vw !important;
}
.svgMail:hover path {
    d: path(
        "M255.4 48.2c.2-.1 .4-.2 .6-.2s.4 .1 .6 .2L460.6 194c2.1 1.5 3.4 3.9 3.4 6.5l0 13.6L291.5 355.7c-20.7 17-50.4 17-71.1 0L48 214.1l0-13.6c0-2.6 1.2-5 3.4-6.5L255.4 48.2zM48 276.2L190 392.8c38.4 31.5 93.7 31.5 132 0L464 276.2 464 456c0 4.4-3.6 8-8 8L56 464c-4.4 0-8-3.6-8-8l0-179.8zM256 0c-10.2 0-20.2 3.2-28.5 9.1L23.5 154.9C8.7 165.4 0 182.4 0 200.5L0 456c0 30.9 25.1 56 56 56l400 0c30.9 0 56-25.1 56-56l0-255.5c0-18.1-8.7-35.1-23.4-45.6L284.5 9.1C276.2 3.2 266.2 0 256 0z"
    );
}
.svgDoor {
    position: absolute;
    height: 2.5vw;
    width: 2.5vw;
    top: 1.25vw;
    right: 4.2vw;
}
.svgDoor:hover path {
    d: path(
        "M320 32c0-9.9-4.5-19.2-12.3-25.2S289.8-1.4 280.2 1l-179.9 45C79 51.3 64 70.5 64 92.5L64 448l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 192 0 32 0 0-32 0-448zM256 256c0 17.7-10.7 32-24 32s-24-14.3-24-32s10.7-32 24-32s24 14.3 24 32zm96-128l96 0 0 352c0 17.7 14.3 32 32 32l64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-320c0-35.3-28.7-64-64-64l-96 0 0 64z"
    );
}
.svgDoor:hover {
    fill: #ff0086;
}
/* ------------------ */
/* ------------------ */
/* --- RIGHTSCREEN -- */
/* ------------------ */
/* ------------------ */
.rightScreen {
    border: 2px solid #ff0086;
    box-shadow:
        inset 0 0 0.5em #ff0086,
        0 0 0.5em #ff0086;
    border-radius: 20px;
    width: 100%;
    margin: 5vw 3vw 3vw 3vw;
    background: #000000bf;
    overflow: scroll;
    scrollbar-width: none;
}
.profilRightScreen {
    height: 100%;
    display: grid;
}

/**********************************/
/* DESCRIPTION PROFIL RIGHTSCREEN */
/**********************************/
.descritpionRightScreen {
    width: 100%;
    height: 100%;
}
/********/
#divBoxPhoto {
    top: 1px;
    right: 1px;
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 60px 80px 0 60px !important;
    width: 180px;
    height: 180px;
    border: 2px solid #6b0039;
    box-shadow:
        inset 0 0 0.5em #ff0086,
        0 0 0.5em #ff0086;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    background-image: url(./images/photo_profil.png);
    background-size: 180px;
}

.pixel {
    width: 4px;
    height: 4px;
    margin: 0;
    background-color: rgb(12, 3, 27);
}
.pixelB {
    width: 4px;
    height: 4px;
    margin: 0;
    background-color: rgba(117, 38, 94, 0.433);
}
.pNomDRS,
.pPrenomDRS,
.pAgeDRS {
    font-size: 1.3em;
}
.spanUserProfil {
    color: #fe90ca;
}
/********/
.divSkills {
    display: flex;
    justify-content: center;
    grid-column: 1 / span 5;
    grid-row: 4;
    margin-bottom: 5vh;
}
.h1DescriptionRightScreen {
    color: #ff54ae;
    padding: 25px 0 25px 25px;
    grid-column: 2 / span 4;
    grid-row: 1;
    display: flex;
    padding: 0 !important;
    margin: 60px 80px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.h2DescriptionRightScreen {
    color: #fe90ca;
    grid-column: 2 / span 4;
    grid-row: 2 / span 2;
    margin: 0px 80px 0 0;
    font-size: 1em;
}
.animationDescProfil {
    animation-duration: 1.5s;
    animation-name: slide-inDescP;
}
/**/
.svgSkill {
    height: 3vw;
    width: 3vw;
    position: relative;
    fill: #fe90ca;
    cursor: pointer;
}
.svgSkillJavascript {
    height: 2.5vw;
    width: 2.5vw;
}
.skillHtml,
.skillCss,
.skillJavascript,
.skillPhp,
.skillWordpress,
.skillGithub {
    position: relative;
    height: 6vw;
    width: 6vw;
    background: conic-gradient(#ff0086 3.6deg, rgb(167 49 161 / 28%) 0deg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2vw;
    box-shadow:
        inset 0 0 0em 0px #ff0086,
        0 0 1em #ff0086;
    opacity: 0;
}
.skillHtml:before,
.skillCss:before,
.skillJavascript:before,
.skillPhp:before,
.skillWordpress:before,
.skillGithub:before {
    content: "";
    position: absolute;
    height: 5vw;
    width: 5vw;
    border-radius: 50%;
    background-color: black;
    box-shadow:
        inset 0 0 1em 0px #ff0086,
        0 0 0em #ff0086;
}
.svgSkillOpacityOne {
    opacity: 1 !important;
}
.animationSpawnSvgHtmlProfil {
    animation-duration: 1s;
    animation-name: spawnSvgSkillProfil;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
.animationSpawnSvgCssProfil {
    animation-duration: 1s;
    animation-name: spawnSvgSkillProfil;
    animation-delay: 2.25s;
    animation-fill-mode: forwards;
}
.animationSpawnSvgJSProfil {
    animation-duration: 1s;
    animation-name: spawnSvgSkillProfil;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
}
.animationSpawnSvgPhpProfil {
    animation-duration: 1s;
    animation-name: spawnSvgSkillProfil;
    animation-delay: 2.75s;
    animation-fill-mode: forwards;
}
.animationSpawnSvgWpProfil {
    animation-duration: 1s;
    animation-name: spawnSvgSkillProfil;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}
.animationSpawnSvgGitProfil {
    animation-duration: 1s;
    animation-name: spawnSvgSkillProfil;
    animation-delay: 3.25s;
    animation-fill-mode: forwards;
}

/**********************************/
/* DESCRIPTION FOLDER RIGHTSCREEN */
/**********************************/
.divFolderRightScreen {
    width: 92%;
    height: 88%;
    overflow: scroll;
    margin: 4%;
    scrollbar-width: none;
}
.h1FolderRightScreen {
    color: #ff54ae;
    font-size: 1.5em;
    margin-bottom: 2%;
    opacity: 0;
}
.h2FolderRightScreen {
    color: #ffb2da;
    font-size: 1.2em;
    opacity: 0;
}
.h3FolderRightScreen {
    color: #ff7088;
    font-size: 1em;
    opacity: 0;
}
.pFolderRightScreen {
    color: #ffb2da;
    font-size: 1em;
    opacity: 0;
}
.divSkillsFolderRightScreen {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10%;
    margin-bottom: 5%;
}
.svgSkillDisplayFolder,
.svgSkillGithubFolder {
    opacity: 0;
    height: 35px !important;
    width: 35px !important;
}
.svgSkillDisplayFolder:hover,
.svgSkillGithubFolder:hover {
    scale: 1.1 !important;
}
#svgArrowPointerBubbleDetailFolder {
    height: 15px;
    width: 15px;
    position: absolute;
    fill: #ffb2da;
    left: 50px;
    top: 50px;
    opacity: 0;
    animation: 2.5s animMouse 3s linear forwards;
    scale: 1;
}
.divSkillsFolder {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
#spanWebSiteSSD {
    cursor: pointer;
}
#spanWebSiteSSD:hover {
    cursor: pointer;
    color: #ff54ae;
}
/* ---------- */
/* animations */
/* ---------- */
.animTextDescFolder {
    animation-duration: 1s;
    animation-name: animOpa;
    animation-fill-mode: forwards;
}
.animTextDescFolderTwo {
    animation-duration: 1s;
    animation-delay: 0.25s;
    animation-name: animOpa;
    animation-fill-mode: forwards;
}
.animTextDescFolderThree {
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-name: animOpa;
    animation-fill-mode: forwards;
}
.animTextDescFolderFour {
    animation-duration: 1s;
    animation-delay: 0.75s;
    animation-name: animOpa;
    animation-fill-mode: forwards;
}
.animSvgSkillFolder {
    animation-duration: 1s;
    animation-delay: 0.75s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animSvgSkillFolderTwo {
    animation-duration: 1s;
    animation-delay: 1s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animBubbleDisplayFolder {
    animation-duration: 4s;
    animation-name: animBubble;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}
/***********************************/
/* DESCRIPTION CONTACT RIGHTSCREEN */
/***********************************/
.h1ContactRightScreen {
    color: rgb(254, 144, 203);
    font-size: 1.5em;
    margin: 2% 0% 5% 0%;
    text-align: center;
}
.formContactRightScreen {
    width: 60%;
    margin: auto;
    text-align: center;
}
.divFormContactRightScreen {
    display: flex;
    justify-content: space-between;
}
.divMessageFormContactRightScreen {
    display: flex;
    flex-direction: column;
    opacity: 0;
}
.divInputFormContactRightScreen {
    width: 47%;
    opacity: 0;
}
.inputFormContactRightScreen {
    width: 91%;
    padding: 3%;
    margin-bottom: 3vh;
    font-size: 1em;
    border: 2px solid #ff0086;
    box-shadow:
        inset 0 0 0.5em #ff0086,
        0 0 0.5em #ff0086;
    border-radius: 10px;
    background: #00000091;
    color: #ff99d0;
}
.textareaFormContactRightScreen {
    padding: 1.5%;
    min-height: 15vh;
    resize: none;
    margin: 0 0.3% 3vh 0.3%;
    font-size: 1em;
    border: 2px solid #ff0086;
    box-shadow:
        inset 0 0 0.5em #ff0086,
        0 0 0.5em #ff0086;
    border-radius: 10px;
    background: #00000091;
    color: #ff99d0;
}
.inputFormContactRightScreen::placeholder,
.textareaFormContactRightScreen::placeholder {
    color: #ff99d0;
}
.inputFormContactRightScreen:focus,
.textareaFormContactRightScreen:focus {
    outline: none;
    box-shadow:
        inset 0 0 0.5em #ff0086,
        0 0 1em #ff0086;
}
.pErrorInputFormRightScreen {
    margin-bottom: 2vh;
    margin-left: 4%;
    text-align: left;
    color: #ff0086;
    display: none;
}
.pErrorTextareaFormRightScreen {
    margin-bottom: 2vh;
    color: #ff0086;
    display: none;
}
.divInputFormContactRightScreen.error .pErrorInputFormRightScreen {
    display: block;
}
.divMessageFormContactRightScreen.error .pErrorTextareaFormRightScreen {
    display: block;
}
.buttonFormContactRightScreen {
    font-size: 1em;
    margin-bottom: 5%;
    opacity: 0;
}
.buttonFormContactRightScreen:hover {
    scale: 1.1;
}
.divSucessSendEmail {
    text-align: center;
}
.messageSucessSendEmail {
    color: #ff0086;
    margin-bottom: 2vh;
    font-size: 1em;
}
/* ---------- */
/* animations */
/* ---------- */
.animInputMail {
    animation-duration: 1s;
    animation-name: animOpaWid;
    animation-fill-mode: forwards;
}
.animInputMailTwo {
    animation-duration: 1s;
    animation-delay: 0.25s;
    animation-name: animOpaWid;
    animation-fill-mode: forwards;
}
.animInputMailThree {
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-name: animOpaScalOne;
    animation-fill-mode: forwards;
}
/* ----------------- */
/* ----------------- */
/* --- LEFTSCREEN -- */
/* ----------------- */
/* ----------------- */

.divSlider {
    border-radius: 25px;
    width: 25%;
    margin: 5vw 3vw 3vw 3vw;
    padding: 0;
    text-align: center;
    position: relative;
}
.btnPrev {
    top: 0px;
    display: none;
    border: none;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(to top, #00000000, #000000 30%, #000000 75%, #000000 75%);
}
.svgPrevIconSlider {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 10px;
}
.btnNext {
    bottom: 0px;
    background: linear-gradient(to bottom, #00000000, #000000 30%, #000000 75%, #000000 75%);
    border: none;
    border-radius: 0 0 20px 20px;
}
.svgNextIconSlider {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 50%;
    translate: -50%;
    bottom: 10px;
}
.btnScroll {
    position: absolute;
    height: 75px;
    width: 100%;
    left: 0px;
    z-index: 10000;
}
.divScroll {
    width: 100%;
    height: 100%;
    overflow: scroll;
    scroll-behavior: smooth;
}
.divProjects {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.btnUl {
    width: 85%;
    margin: 10% 7.5% 10% 7.5%;
    font-size: 1.2em;
}
/* ---------- */
/* animations */
/* ---------- */
.animBtnUl {
    animation-duration: 1.5s;
    animation-name: animScal;
    animation-fill-mode: forwards;
}
/* ----------------- */
/* ----------------- */
/* --- CLASSLIST --- */
/* ----------------- */
/* ----------------- */
.bigRightScreen {
    width: 100%;
    margin: 0;
    background-color: white;
}
.scaleBigScreen {
    width: 95%;
    height: 90vh;
}
.btnUlFolderSelec {
    background: #ff0086 !important;
    color: #ffb1e8;
    box-shadow: 0 0 0.7em 0px #ff0086;
}
.marginInputContactFormRightScreen {
    margin-bottom: 3%;
}

/* ---------------- */
/* classList Loader */
/* ---------------- */
.sectionLoader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1f0019;
    width: 100%;
}

.divLoader {
    position: relative;
    width: 120px;
    height: 120px;
}

.spanLoader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--loader)));
}

.spanLoader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ff0086;
    box-shadow: 0 0 10px #ff0086;
    animation: animLoader 2s linear infinite;
    animation-delay: calc(0.1s * var(--loader));
}

/***********************************/
/***********************************/
/********** MEDIA QUERY ************/
/***********************************/
/***********************************/
/* ----------------------------------- */
/* -- TABLET DEVICE // SMALL LAPTOT -- */
/* ----------------------------------- */
@media screen and (min-width: 800px) and (max-width: 1200px) {
    /* ----------------- */
    /* -- WINDOW LOAD -- */
    /* ----------------- */
    .spanPoint,
    .pFName,
    .pSName {
        font-size: 1.2em;
    }
    /* ------------ */
    /* -- PROFIL -- */
    /* ------------ */
    #divBoxPhoto {
        display: none;
    }
    .profilRightScreen {
        display: flex;
        flex-direction: column;
    }
    .pNomDRS,
    .pPrenomDRS,
    .pAgeDRS {
        font-size: 0.8em;
        padding-top: 10px;
    }
    .h2DescriptionRightScreen {
        font-size: 0.8em;
        margin: 0 30px 30px 30px;
    }
    .h1DescriptionRightScreen {
        margin: 30px;
    }
    .divSkills {
        padding-bottom: 5vh;
        margin: 0;
    }
    /* ------------ */
    /* -- FOLDER -- */
    /* ------------ */
    .btnUl {
        font-size: 0.8em;
    }
    .h1FolderRightScreen,
    .h1ContactRightScreen {
        font-size: 1.2em;
    }
    .h2FolderRightScreen {
        font-size: 0.8em;
    }
    .pFolderRightScreen {
        font-size: 0.8em;
    }
    .btnPrev {
        border-radius: 0.5em 0.5em 0 0;
    }
    .btnNext {
        border-radius: 0 0 0.5em 0.5em;
    }
    .svgNextIconSlider,
    .svgPrevIconSlider {
        width: 20px;
        height: 20px;
    }
    .btnScroll {
        height: 50px;
    }
    /* ------------- */
    /* -- CONTACT -- */
    /* ------------- */
    .inputFormContactRightScreen,
    .textareaFormContactRightScreen,
    .buttonFormContactRightScreen {
        font-size: 0.8em;
    }
    .formContactRightScreen {
        width: 80%;
    }
}
/* ------------------- */
/* -- TABLET DEVICE -- */
/* ------------------- */
@media screen and (min-width: 481px) and (max-width: 799px) {
    /* ----------------- */
    /* -- WINDOW LOAD -- */
    /* ----------------- */
    .spanPoint,
    .pFName,
    .pSName {
        font-size: 1em;
    }
    /* ------------ */
    /* -- PROFIL -- */
    /* ------------ */
    #bloc {
        display: none !important;
    }
    /* ------------ */
    /* -- PROFIL -- */
    /* ------------ */
    #divBoxPhoto {
        display: none;
    }
    .profilRightScreen {
        display: flex;
        flex-direction: column;
    }
    .pNomDRS,
    .pPrenomDRS,
    .pAgeDRS {
        font-size: 0.8em;
        padding-top: 10px;
    }
    .h2DescriptionRightScreen {
        font-size: 0.8em;
        margin: 0 30px 30px 30px;
    }
    .h1DescriptionRightScreen {
        margin: 30px;
    }
    .divSkills {
        padding-bottom: 5vh;
        margin: 0;
    }
    /* ------------ */
    /* -- FOLDER -- */
    /* ------------ */
    .btnUl {
        font-size: 0.7em;
    }
    .h1FolderRightScreen,
    .h1ContactRightScreen {
        font-size: 1em;
    }
    .h2FolderRightScreen {
        font-size: 0.8em;
    }
    .pFolderRightScreen {
        font-size: 0.8em;
    }
    .inputFormContactRightScreen,
    .textareaFormContactRightScreen,
    .buttonFormContactRightScreen {
        font-size: 0.7em;
    }
    .btnPrev {
        border-radius: 0.5em 0.5em 0 0;
    }
    .btnNext {
        border-radius: 0 0 0.5em 0.5em;
    }
    .svgNextIconSlider,
    .svgPrevIconSlider {
        width: 20px;
        height: 20px;
    }
    .btnScroll {
        height: 50px;
    }
    .formContactRightScreen {
        width: 80%;
    }
    .pBubbleDetail {
        border: 1px solid #ff0086;
        font-size: 0.3em;
        padding: 5px;
    }
    .svgArrowBubbleDetailFolder {
        height: 10px;
        width: 10px;
        bottom: 13px;
    }
}
/* ------------------- */
/* -- MOBILE DEVICE -- */
/* ------------------- */
@media screen and (max-width: 480px) {
    /* ------------ */
    /* -- GLOBAL -- */
    /* ------------ */
    body {
        background-image: none;
        background: linear-gradient(135deg, rgb(139 39 91) 0%, rgb(0 0 0) 50%, rgb(22 0 58) 100%);
    }

    /* ------------ */
    /* -- PROFIL -- */
    /* ------------ */
    .divBigScreen {
        background: #00000091;
        width: 100%;
        height: 100vh;
        position: relative;
        border: 0;
        box-shadow: none;
        border-radius: 0%;
    }
    .divScreens {
        height: 85vh;
    }
    #divBoxPhoto {
        display: none;
    }
    .profilRightScreen {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .pNomDRS,
    .pPrenomDRS,
    .pAgeDRS {
        font-size: 0.8em;
        padding-top: 10px;
    }
    .rightScreen {
        margin: 5% !important;
        width: 90% !important;
        height: 100%;
        border: 0;
        box-shadow: none;
        border-radius: 25px;
        background: linear-gradient(300deg, rgb(139 39 91 / 43%) 0%, rgb(120 120 120 / 4%) 50%, rgb(22 0 58 / 88%) 100%);
    }
    #bloc {
        display: none !important;
    }
    .navScreen {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: initial;
        height: 15vh;
    }
    .svg {
        position: inherit;
    }
    .svgProfil {
        width: 25px;
        height: 25px;
    }
    .svgFolder {
        width: 40px;
        height: 30px;
    }
    .svgMail {
        width: 30px !important;
        height: 30px !important;
    }
    .svgMail:hover {
        width: 30px !important;
        height: 30px !important;
    }
    /**/

    .profilRightScreen {
        display: flex;
        flex-direction: column;
    }
    .pNomDRS,
    .pPrenomDRS,
    .pAgeDRS {
        font-size: 1.2em;
        padding-top: 10px;
    }
    .h2DescriptionRightScreen {
        font-size: 0.8em;
        margin: 0 30px 30px 30px;
    }
    .h1DescriptionRightScreen {
        margin: 30px;
    }
    .divSkills {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .svgSkill {
        width: 22px;
        height: 22px;
    }
    .skillHtml,
    .skillCss,
    .skillJavascript,
    .skillPhp,
    .skillWordpress,
    .skillGithub {
        width: 50px;
        height: 50px;
        margin: 15px 20px;
    }
    .skillHtml:before,
    .skillCss:before,
    .skillJavascript:before,
    .skillPhp:before,
    .skillWordpress:before,
    .skillGithub:before {
        width: 40px;
        height: 40px;
    }

    /* ------------ */
    /* -- FOLDER -- */
    /* ------------ */
    .h1FolderRightScreen {
        font-size: 1em;
    }
    .h2FolderRightScreen,
    .h3FolderRightScreen {
        font-size: 0.7em;
    }
    .divFolderRightScreen {
        margin: 4% 4% 1% 4%;
        height: 93%;
    }
    .pFolderRightScreen {
        font-size: 0.8em;
    }
    .divScreens {
        display: flex;
        flex-direction: column;
    }
    .divSlider {
        width: 100%;
        display: block;
        margin: 0;
    }
    .divScroll {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .btnScroll {
        display: none !important;
    }
    .divScroll {
        height: 100%;
        scrollbar-width: none;
    }
    .divProjects {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .btnUl {
        box-shadow: unset !important;
        font-size: 0.7em;
        margin: 0 3% 0 3%;
    }
    .btn:hover {
        background: #0000009e;
    }
    .btnWebagency {
        margin-left: 0;
    }
    .pBubbleDetail {
        border: 1px solid #ff0086;
        font-size: 0.3em;
        padding: 5px;
    }
    .svgArrowBubbleDetailFolder {
        height: 10px;
        width: 10px;
        bottom: 13px;
    }
    .divSkillsFolderRightScreen {
        margin-top: 30%;
    }
    /* ------------- */
    /* -- CONTACT -- */
    /* ------------- */
    .h1ContactRightScreen {
        font-size: 1.2em;
        margin: 0;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3% 3% 0 3%;
    }
    .divFormContactRightScreen {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    .divContactRightScreen {
        height: 100%;
    }
    .formContactRightScreen {
        width: 100%;
        height: 85%;
        padding-top: 3%;
        overflow: scroll;
        scrollbar-width: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    .divInputFormContactRightScreen {
        width: 90%;
    }
    .inputFormContactRightScreen {
        padding: 7px;
        margin-bottom: 8.5px !important;
        font-size: 0.7em;
        border-radius: 8px;
        border: 1px solid #ff0086;
        background: #00000000;
    }
    .divMessageFormContactRightScreen {
        width: 100%;
        align-items: center;
    }
    .textareaFormContactRightScreen {
        width: 82%;
        font-size: 0.7em;
        border-radius: 8px;
        padding: 7px;
        margin-bottom: 8.5px !important;
        border: 1px solid #ff0086;
        background: #00000000;
    }
    .buttonFormContactRightScreen {
        font-size: 0.7em;
        border: 1px solid #ff0086;
    }
    .pErrorInputFormRightScreen,
    .pErrorTextareaFormRightScreen {
        font-size: 0.5em;
    }
}

/*********************/
/*********************/
/*********************/
/*********************/
/*********************/
/*********************/