/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@100..900&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    font-size: 62.5%;
    font-family: "";
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

b {
    font-weight: 400;
}

body {
    background-color: #f7f7f7;
}

.body {
    background-color: #f7f7f7;
    width: 100vw;
    overflow-x: hidden;
    font-family: "neulis-neue";
}

.body--burger {
    overflow: hidden;
}

.header {
    position: relative;
}

.header__container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 3rem;
}

.header__button {
    margin-top: -20rem;
    color: #4251DE;
    font-family: "Bebas Neue";
    font-size: 2.4rem;
    border: solid 3px #4251DE;
    padding: 0.8rem 1.6rem;
    transition: 0.5s;
    position: relative;
    background-color: #f7f7f7;
    left: 0px;
}

@media (min-width: 768px) {
    .header__button {
        font-size: 3rem;
        padding: 1.2rem 1.6rem;
    }
}

.header__button:hover {
    color: #f7f7f7;
    background-color: #4251DE;
    letter-spacing: 1px;
}

.headerCompo {
    color: #070707;
    z-index: 1;
    margin: 8.8rem auto;
    position: relative;
    width: calc(100vw - 1.6rem);
}

.headerCompo__welcome {
    font-size: clamp(0.1rem, 6vw, 6rem);
    width: clamp(0.1rem, 30%, 30rem);
    position: absolute;
    bottom: clamp(0.1rem, 25vw, 30rem);
    line-height: 80%;
    left: clamp(0.1rem, 15.5vw, 18rem);
}

.headerCompo__portfolio {
    font-family: "Federo";
    font-size: clamp(0.1rem, 27vw, 30rem);
    position: relative;
    right: 2vw;
    bottom: 5vw;
    color: #4251DE;
}

.headerCompo__portfolio::after {
    margin: none;
}

.headerCompo__name {
    font-family: "Federo";
    font-size: clamp(0.1rem, 5.5vw, 6rem);
    position: relative;
    top: clamp(0.1rem, 24vw, 24rem);
    order: 2;
}

.headerCompo__domains {
    font-family: "Federo";
    font-size: clamp(0.1rem, 1.85vw, 10rem);
    text-align: right;
    position: relative;
    bottom: 7vw;
    right: clamp(0.1rem, 4vw, 8rem);
}

.header__downArrow {
    width: 4rem;
    margin-top: 6.4rem;
}

.bars {
    display: flex;
    position: fixed;
}

.bars__container {
    position: absolute;
    height: 100vh;
    width: 100vw;
    color: #f7f7f7;
    font-size: 0.1rem;
    top: 0rem;
    z-index: -1;
}

.bars--horizontal {
    flex-direction: column;
    top: -6rem;
    gap: 4rem;
}

.bars--horizontal div {
    height: 1px;
    width: 100vw;
}

.bars--vertical {
    top: -20rem;
    left: 2rem;
    flex-direction: row;
    gap: 4rem;
}

.bars--vertical div {
    height: 130vh;
    width: 1px;
}

.bars__item {
    background-color: #828190;
}

.burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    position: fixed;
    right: 2.4rem;
    top: 2.4rem;
    height: 6rem;
    width: 6rem;
    background-color: #f7f7f7;
    border-radius: 100%;
    box-shadow: 0px 0px 10px 0px rgba(7, 7, 7, 0.3);
}

.burger__line {
    width: 3rem;
    height: 4px;
    background-color: #4251DE;
    border-radius: 10px;
    position: relative;
    transition: 0.5s;
    top: 0rem;
}

.burger--selected div:nth-child(1) {
    transform: rotate(-45deg);
    top: 1rem;
}

.burger--selected div:nth-child(2) {
    opacity: 0;
}

.burger--selected div:nth-child(3) {
    transform: rotate(45deg);
    top: -1rem;
}

.nav {
    position: fixed;
    background-color: #C8CDFE;
    width: 100vw;
    right: -100vw;
    z-index: 8;
    transition: 0.5s;
}

.nav--open {
    right: 0vw;
}

.navList {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 8rem 0;
}

.navList__item {
    font-family: "Bebas Neue";
    font-size: 4rem;
    background-color: #4251DE;
    width: -moz-fit-content;
    width: fit-content;
    color: #f7f7f7;
    padding: 0.8rem 1.2rem;
    border-radius: 2px;
    margin: auto;
    box-shadow: 4px 4px 0px #1C2898;
    font-size: 6rem;
    margin: 0;
    color: #f7f7f7;
}

@media (min-width: 768px) {
    .navList__item {
        font-size: 5rem;
        padding: 1.6rem 2.4rem;
    }
}

.navList__tiret {
    display: none;
}

.about {
    padding-top: 4rem;
    overflow: hidden;
    position: relative;
}

.about__container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about__title {
    font-family: "Bebas Neue";
    font-size: 4rem;
    background-color: #4251DE;
    width: -moz-fit-content;
    width: fit-content;
    color: #f7f7f7;
    padding: 0.8rem 1.2rem;
    border-radius: 2px;
    margin: auto;
    box-shadow: 4px 4px 0px #1C2898;
}

@media (min-width: 768px) {
    .about__title {
        font-size: 5rem;
        padding: 1.6rem 2.4rem;
    }
}

.about__title--container {
    z-index: 2;
}

.aboutText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: clamp(0.1rem, 100vw - 1.6rem, 57rem);
}

.aboutText__item {
    z-index: 2;
    font-weight: 600;
    font-size: 1.3rem;
    margin: 4rem 2.4rem 1.6rem;
    border-radius: 8px;
    line-height: 150%;
    padding: 2.4rem;
    box-shadow: inset 0 0 0 3px #070707, 4px 4px 0px #4251DE;
    background-color: #f7f7f7;
}

.aboutText__cv {
    z-index: 2;
    color: #4251DE;
    font-family: "Bebas Neue";
    font-size: 2.4rem;
    border: solid 3px #4251DE;
    padding: 0.8rem 1.6rem;
    transition: 0.5s;
    position: relative;
    background-color: #f7f7f7;
    left: 0px;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}

@media (min-width: 768px) {
    .aboutText__cv {
        font-size: 3rem;
        padding: 1.2rem 1.6rem;
    }
}

.aboutText__cv:hover {
    color: #f7f7f7;
    background-color: #4251DE;
    letter-spacing: 1px;
}

.aboutMe {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aboutMe-color {
    z-index: 2;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.8rem 1.2rem;
    gap: 1.6rem;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #070707, 4px 4px 0px #4251DE;
    margin: 4rem 0 2.4rem;
    background-color: #f7f7f7;
}

.aboutMe-color__item {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 2px;
}

.aboutMe-color__item--blue {
    background-color: #6672E3;
}

.aboutMe-color__item--green {
    background-color: #8EE366;
}

.aboutMe-color__item--red {
    background-color: #E36666;
}

.aboutMe-color__item--selected {
    border: solid 1px #070707;
}

.aboutMe__img {
    z-index: 2;
    width: clamp(0.1rem, 100vw - 10.6rem, 35rem);
    border: 5px dashed;
    border-color: #6672E3;
    padding: 0 2.4rem;
    border-radius: 8px;
    margin-bottom: 4rem;
}

.aboutSkills {
    width: 100vw;
    overflow: hidden;
}

.aboutSkills__container {
    z-index: 2;
    background-color: #323DA0;
    width: -moz-fit-content;
    width: fit-content;
    padding: 1.6rem 1.2rem;
    display: flex;
    gap: 1.2rem;
    animation: carousel 20s infinite linear;
    left: 0rem;
    position: relative;
}

.aboutSkills__item {
    width: -moz-fit-content;
    width: fit-content;
    font-family: "Bebas Neue";
    font-size: 4rem;
    color: #f7f7f7;
    white-space: nowrap;
}

@keyframes carousel {
    0% {
        left: 0rem;
    }
    100% {
        left: -130.3rem;
    }
}

.bg {
    background-color: #4251DE;
    color: #f7f7f7;
    padding: 0.4rem;
    border-radius: 2px;
}

.textLink {
    color: #4251DE;
    font-weight: 1000;
    text-decoration: underline;
}

.skills {
    padding: 5.6rem 0 8rem;
    background-color: #f7f7f7;
}

.skills__title {
    font-family: "Bebas Neue";
    font-size: 4rem;
    background-color: #4251DE;
    width: -moz-fit-content;
    width: fit-content;
    color: #f7f7f7;
    padding: 0.8rem 1.2rem;
    border-radius: 2px;
    margin: auto;
    box-shadow: 4px 4px 0px #1C2898;
    transform: rotate(-1.5deg);
}

@media (min-width: 768px) {
    .skills__title {
        font-size: 5rem;
        padding: 1.6rem 2.4rem;
    }
}

.skills__list {
    display: flex;
    gap: 4rem;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
}

.skillsItem {
    box-shadow: 0px 0px 5px 0px rgba(7, 7, 7, 0.3);
    border: solid 10px #f7f7f7;
    padding: 1.6rem;
    width: 3rem;
    color: #f7f7f7;
    border-radius: 10px;
    width: clamp(28rem, 80vw, 36rem);
}

.skillsItem:nth-child(1) {
    background-color: #779D25;
    transform: rotate(1deg);
}

.skillsItem:nth-child(1) div {
    background-image: url("../assets/img/pc.webp");
    background-position: 0 3rem;
}

.skillsItem:nth-child(2) {
    background-color: #C84444;
    transform: rotate(-2deg);
}

.skillsItem:nth-child(2) div {
    background-image: url("../assets/img/cam.webp");
    background-position: 0 3rem;
}

.skillsItem:nth-child(3) {
    background-color: #D47D2C;
    transform: rotate(1deg);
}

.skillsItem:nth-child(3) div {
    background-image: url("../assets/img/design.webp");
    background-position: 0 3rem;
}

.skillsItem__container {
    height: clamp(18rem, 50vw, 23rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-size: contain;
    background-repeat: no-repeat;
}

.skillsItem__container:nth-child(1) {
    background-position: 0 3rem;
}

.skillsItem__title {
    font-family: "Bebas Neue";
    font-size: 2.6rem;
}

.skillsItem__name {
    font-size: 1.2rem;
}

.skillsContainer {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.skillsName {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
}

.skillsName--right {
    text-align: right;
}

.real {
    border-top: solid 5px #4251DE;
    border-bottom: solid 5px #4251DE;
    padding: 5.6rem 0 16rem;
    background-color: #C8CDFE;
}

.real__name {
    font-family: "Bebas Neue";
    font-size: 4rem;
    background-color: #4251DE;
    width: -moz-fit-content;
    width: fit-content;
    color: #f7f7f7;
    padding: 0.8rem 1.2rem;
    border-radius: 2px;
    margin: auto;
    box-shadow: 4px 4px 0px #1C2898;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .real__name {
        font-size: 5rem;
        padding: 1.6rem 2.4rem;
    }
}

.real__text {
    font-size: 1.3rem;
    text-align: center;
    padding: 2rem;
    line-height: 150%;
    padding: 2rem 2rem 4rem;
}

.realChoice {
    border: solid 3px #4251DE;
    border-radius: 4px;
    margin: 0 auto 6.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.6rem 3.2rem;
    border-radius: 4px;
    width: -moz-fit-content;
    width: fit-content;
    background-color: #f7f7f7;
}

.realChoice__bar {
    height: 2px;
    width: 80%;
    margin: auto;
    background-color: #4251DE;
}

.realChoice__select {
    font-size: 1.6rem;
    font-weight: 700;
    background: none;
    border: none;
    color: #f7f7f7;
    width: 100%;
    color: #070707;
    cursor: pointer;
}

.realChoice__select option {
    background-color: #f7f7f7;
    text-align: center;
}

.realList {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin: 0 1.2rem;
    align-items: center;
}

.realList__item:hover figure figcaption div:nth-child(2) img {
    transform: rotate(45deg);
}

.real__button {
    color: #4251DE;
    font-family: "Bebas Neue";
    font-size: 2.4rem;
    border: solid 3px #4251DE;
    padding: 0.8rem 1.6rem;
    transition: 0.5s;
    position: relative;
    background-color: #f7f7f7;
    left: 0px;
    display: block;
    margin: 5rem auto 0;
    width: -moz-fit-content;
    width: fit-content;
    background-color: #C8CDFE;
}

@media (min-width: 768px) {
    .real__button {
        font-size: 3rem;
        padding: 1.2rem 1.6rem;
    }
}

.real__button:hover {
    color: #f7f7f7;
    background-color: #4251DE;
    letter-spacing: 1px;
}

.figure {
    box-shadow: 0px 0px 5px 0px rgba(7, 7, 7, 0.3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0rem;
    padding: 1rem;
    background-color: #f7f7f7;
    border-radius: 15px;
    width: clamp(0.1rem, 100vw - 2.4rem, 35rem);
}

.figure__img {
    max-height: 20rem;
    border-radius: 8px 8px 0 0;
    transition: 0.5s;
    -o-object-fit: cover;
    object-fit: cover;
}

.figureFigcaption {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.2rem;
    background-color: #EBEBEB;
    border-radius: 0 0 8px 8px;
    max-height: 10rem;
}

.figureFigcaption__subtitle {
    color: #070707;
    font-size: 1.3rem;
    font-weight: 500;
}

.figureFigcaption__domain {
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: capitalize;
}

.figureFigcaption__name {
    font-family: Bebas Neue;
    color: #f7f7f7;
    font-size: 2rem;
    padding: 0.4rem 0.8rem;
}

.figureFigcaption__arrow {
    height: 2rem;
    transform: rotate(0deg);
    transition: 0.25s;
}

.figureFigcaption__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.realDev figcaption div:nth-child(1) p:nth-child(2) {
    color: #41AFC8;
}

.realDev figcaption div:nth-child(2) p {
    background-color: #41AFC8;
}

.realVideo figcaption div:nth-child(1) p:nth-child(2) {
    color: #C84444;
}

.realVideo figcaption div:nth-child(2) p {
    background-color: #C84444;
}

.realVideo figcaption div:nth-child(1) p:nth-child(2) {
    color: #C84444;
}

.realVideo figcaption div:nth-child(2) p {
    background-color: #C84444;
}

.realPhoto figcaption div:nth-child(1) p:nth-child(2) {
    color: #779D25;
}

.realPhoto figcaption div:nth-child(2) p {
    background-color: #779D25;
}

.real3D figcaption div:nth-child(1) p:nth-child(2) {
    color: #D83FDB;
}

.real3D figcaption div:nth-child(2) p {
    background-color: #D83FDB;
}

.realDev figcaption div:nth-child(1) p:nth-child(2) {
    color: #41AFC8;
}

.realDev figcaption div:nth-child(2) p {
    background-color: #41AFC8;
}

.realWeb figcaption div:nth-child(1) p:nth-child(2) {
    color: #D47D2C;
}

.realWeb figcaption div:nth-child(2) p {
    background-color: #D47D2C;
}

.realDesc {
    font-family: 'neulis-neue';
    color: #070707;
    /* height: 100vh; */
    overflow-x: hidden;
    /* width: 100vw; */
    background-color: #f7f7f7;
    /* position: fixed; */
    /* top: 0; */
    /* left: 100vw; */
    transition: 0.5s;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding-bottom: 8rem;
}

.realDesc--open {
    left: 0vw;
}

.realDesc__nav {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    position: fixed;
    background-color: #6672E3;
    border-bottom: solid 3px #4251DE;
    width: 100vw;
    padding: 2rem;
    color: #f7f7f7;
    justify-content: left;
    z-index: 2;
}

.realDesc--realVideo header h1 {
    background-color: #C84444;
    box-shadow: 4px 4px 0px #af1717;
}

.realDesc--realWeb header h1 {
    background-color: #D47D2C;
    box-shadow: 4px 4px 0px #a6580f;
}

.realDesc--realDev header h1 {
    background-color: #41AFC8;
    box-shadow: 4px 4px 0px #1d7c91;
}

.realDesc--real3D header h1 {
    background-color: #D83FDB;
    box-shadow: 4px 4px 0px #921694;
}

.realDesc--realPhoto header h1 {
    background-color: #779D25;
    box-shadow: 4px 4px 0px #4a670d;
}

.realDesc__cross {
    height: 2.5rem;
    width: 2.5rem;
    fill: white;
    cursor: pointer;
    position: relative;
    transition: 0.5s;
    left: 0rem;
}

.realDesc__cross:hover {
    left: -1rem;
}

.realDesc__arrows {
    display: flex;
    justify-content: space-between;
}

.realDesc__arrows a {
    color: #f7f7f7;
    font-size: 2rem;
    font-family: "Bebas Neue";
    cursor: pointer;
}

.realDesc__arrows a::after {
    transition: 0.5s ease-out;
    height: 2px;
    width: 0%;
    opacity: 0%;
    content: "";
    background-color: #f7f7f7;
    display: flex;
    margin: auto;
    border-radius: 2px;
}

.realDesc__arrows a:hover::after {
    width: 100%;
    opacity: 100%;
}

.realDesc__header {
    padding-top: 14rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.realDesc__title {
    font-family: "Bebas Neue";
    font-size: 4rem;
    background-color: #4251DE;
    width: -moz-fit-content;
    width: fit-content;
    color: #f7f7f7;
    padding: 0.8rem 1.2rem;
    border-radius: 2px;
    margin: auto;
    box-shadow: 4px 4px 0px #1C2898;
    font-size: 2.6rem;
    text-align: center;
    width: fit-content;
    margin-bottom: 2.4rem;
}

@media (min-width: 768px) {
    .realDesc__title {
        font-size: 5rem;
        padding: 1.6rem 2.4rem;
    }
}

.realDesc__subtitle {
    font-size: 2.4rem;
    font-family: "Bebas Neue";
    margin-bottom: 1.6rem;
    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Federo&display=swap');
    @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@100..900&display=swap");
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol,
    ul {
        list-style: none;
    }
    blockquote,
    q {
        quotes: none;
    }
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: "";
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        scroll-behavior: smooth;
    }
    html {
        font-size: 62.5%;
        font-family: "";
    }
    img {
        max-width: 100%;
    }
    a {
        text-decoration: none;
    }
    b {
        font-weight: 400;
    }
    body {
        background-color: #f7f7f7;
    }
    .body {
        background-color: #f7f7f7;
        width: 100vw;
        overflow-x: hidden;
        font-family: "neulis-neue";
    }
    .body--burger {
        overflow: hidden;
    }
    .header {
        position: relative;
    }
    .header__container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 3rem;
    }
    .header__button {
        margin-top: -20rem;
        color: #4251DE;
        font-family: "Bebas Neue";
        font-size: 2.4rem;
        border: solid 3px #4251DE;
        padding: 0.8rem 1.6rem;
        transition: 0.5s;
        position: relative;
        background-color: #f7f7f7;
        left: 0px;
    }
    @media (min-width: 768px) {
        .header__button {
            font-size: 3rem;
            padding: 1.2rem 1.6rem;
        }
    }
    .header__button:hover {
        color: #f7f7f7;
        background-color: #4251DE;
        letter-spacing: 1px;
    }
    .headerCompo {
        color: #070707;
        z-index: 1;
        margin: 8.8rem auto;
        position: relative;
        width: calc(100vw - 1.6rem);
    }
    .headerCompo__welcome {
        font-size: clamp(0.1rem, 6vw, 6rem);
        width: clamp(0.1rem, 30%, 30rem);
        position: absolute;
        bottom: clamp(0.1rem, 25vw, 30rem);
        line-height: 80%;
        left: clamp(0.1rem, 15.5vw, 18rem);
    }
    .headerCompo__portfolio {
        font-family: "Federo";
        font-size: clamp(0.1rem, 27vw, 30rem);
        position: relative;
        right: 2vw;
        bottom: 5vw;
        color: #4251DE;
    }
    .headerCompo__portfolio::after {
        margin: none;
    }
    .headerCompo__name {
        font-family: "Federo";
        font-size: clamp(0.1rem, 5.5vw, 6rem);
        position: relative;
        top: clamp(0.1rem, 24vw, 24rem);
        order: 2;
    }
    .headerCompo__domains {
        font-family: "Federo";
        font-size: clamp(0.1rem, 1.85vw, 10rem);
        text-align: right;
        position: relative;
        bottom: 7vw;
        right: clamp(0.1rem, 4vw, 8rem);
    }
    .header__downArrow {
        width: 4rem;
        margin-top: 6.4rem;
    }
    .bars {
        display: flex;
        position: fixed;
    }
    .bars__container {
        position: absolute;
        height: 100vh;
        width: 100vw;
        color: #f7f7f7;
        font-size: 0.1rem;
        top: 0rem;
        z-index: -1;
    }
    .bars--horizontal {
        flex-direction: column;
        top: -6rem;
        gap: 4rem;
    }
    .bars--horizontal div {
        height: 1px;
        width: 100vw;
    }
    .bars--vertical {
        top: -20rem;
        left: 2rem;
        flex-direction: row;
        gap: 4rem;
    }
    .bars--vertical div {
        height: 130vh;
        width: 1px;
    }
    .bars__item {
        background-color: #828190;
    }
    .burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.6rem;
        position: fixed;
        right: 2.4rem;
        top: 2.4rem;
        height: 6rem;
        width: 6rem;
        background-color: #f7f7f7;
        border-radius: 100%;
        box-shadow: 0px 0px 10px 0px rgba(7, 7, 7, 0.3);
    }
    .burger__line {
        width: 3rem;
        height: 4px;
        background-color: #4251DE;
        border-radius: 10px;
        position: relative;
        transition: 0.5s;
        top: 0rem;
    }
    .burger--selected div:nth-child(1) {
        transform: rotate(-45deg);
        top: 1rem;
    }
    .burger--selected div:nth-child(2) {
        opacity: 0;
    }
    .burger--selected div:nth-child(3) {
        transform: rotate(45deg);
        top: -1rem;
    }
    .nav {
        position: fixed;
        background-color: #C8CDFE;
        width: 100vw;
        right: -100vw;
        z-index: 8;
        transition: 0.5s;
    }
    .nav--open {
        right: 0vw;
    }
    .navList {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding: 8rem 0;
    }
    .navList__item {
        font-family: "Bebas Neue";
        font-size: 4rem;
        background-color: #4251DE;
        width: -moz-fit-content;
        width: fit-content;
        color: #f7f7f7;
        padding: 0.8rem 1.2rem;
        border-radius: 2px;
        margin: auto;
        box-shadow: 4px 4px 0px #1C2898;
        font-size: 6rem;
        margin: 0;
        color: #f7f7f7;
    }
    @media (min-width: 768px) {
        .navList__item {
            font-size: 5rem;
            padding: 1.6rem 2.4rem;
        }
    }
    .navList__tiret {
        display: none;
    }
    .about {
        padding-top: 4rem;
        overflow: hidden;
        position: relative;
    }
    .about__container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .about__title {
        font-family: "Bebas Neue";
        font-size: 4rem;
        background-color: #4251DE;
        width: -moz-fit-content;
        width: fit-content;
        color: #f7f7f7;
        padding: 0.8rem 1.2rem;
        border-radius: 2px;
        margin: auto;
        box-shadow: 4px 4px 0px #1C2898;
    }
    @media (min-width: 768px) {
        .about__title {
            font-size: 5rem;
            padding: 1.6rem 2.4rem;
        }
    }
    .about__title--container {
        z-index: 2;
    }
    .aboutText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: clamp(0.1rem, 100vw - 1.6rem, 57rem);
    }
    .aboutText__item {
        z-index: 2;
        font-weight: 600;
        font-size: 1.3rem;
        margin: 4rem 2.4rem 1.6rem;
        border-radius: 8px;
        line-height: 150%;
        padding: 2.4rem;
        box-shadow: inset 0 0 0 3px #070707, 4px 4px 0px #4251DE;
        background-color: #f7f7f7;
    }
    .aboutText__cv {
        z-index: 2;
        color: #4251DE;
        font-family: "Bebas Neue";
        font-size: 2.4rem;
        border: solid 3px #4251DE;
        padding: 0.8rem 1.6rem;
        transition: 0.5s;
        position: relative;
        background-color: #f7f7f7;
        left: 0px;
        width: -moz-fit-content;
        width: fit-content;
        margin: auto;
    }
    @media (min-width: 768px) {
        .aboutText__cv {
            font-size: 3rem;
            padding: 1.2rem 1.6rem;
        }
    }
    .aboutText__cv:hover {
        color: #f7f7f7;
        background-color: #4251DE;
        letter-spacing: 1px;
    }
    .aboutMe {
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .aboutMe-color {
        z-index: 2;
        display: flex;
        width: -moz-fit-content;
        width: fit-content;
        padding: 0.8rem 1.2rem;
        gap: 1.6rem;
        border-radius: 2px;
        box-shadow: inset 0 0 0 1px #070707, 4px 4px 0px #4251DE;
        margin: 4rem 0 2.4rem;
        background-color: #f7f7f7;
    }
    .aboutMe-color__item {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 2px;
    }
    .aboutMe-color__item--blue {
        background-color: #6672E3;
    }
    .aboutMe-color__item--green {
        background-color: #8EE366;
    }
    .aboutMe-color__item--red {
        background-color: #E36666;
    }
    .aboutMe-color__item--selected {
        border: solid 1px #070707;
    }
    .aboutMe__img {
        z-index: 2;
        width: clamp(0.1rem, 100vw - 10.6rem, 35rem);
        border: 5px dashed;
        border-color: #6672E3;
        padding: 0 2.4rem;
        border-radius: 8px;
        margin-bottom: 4rem;
    }
    .aboutSkills {
        width: 100vw;
        overflow: hidden;
    }
    .aboutSkills__container {
        z-index: 2;
        background-color: #323DA0;
        width: -moz-fit-content;
        width: fit-content;
        padding: 1.6rem 1.2rem;
        display: flex;
        gap: 1.2rem;
        animation: carousel 20s infinite linear;
        left: 0rem;
        position: relative;
    }
    .aboutSkills__item {
        width: -moz-fit-content;
        width: fit-content;
        font-family: "Bebas Neue";
        font-size: 4rem;
        color: #f7f7f7;
        white-space: nowrap;
    }
    @keyframes carousel {
        0% {
            left: 0rem;
        }
        100% {
            left: -130.3rem;
        }
    }
    .bg {
        background-color: #4251DE;
        color: #f7f7f7;
        padding: 0.4rem;
        border-radius: 2px;
    }
    .textLink {
        color: #4251DE;
        font-weight: 1000;
        text-decoration: underline;
    }
    .skills {
        padding: 5.6rem 0 8rem;
        background-color: #f7f7f7;
    }
    .skills__title {
        font-family: "Bebas Neue";
        font-size: 4rem;
        background-color: #4251DE;
        width: -moz-fit-content;
        width: fit-content;
        color: #f7f7f7;
        padding: 0.8rem 1.2rem;
        border-radius: 2px;
        margin: auto;
        box-shadow: 4px 4px 0px #1C2898;
        transform: rotate(-1.5deg);
    }
    @media (min-width: 768px) {
        .skills__title {
            font-size: 5rem;
            padding: 1.6rem 2.4rem;
        }
    }
    .skills__list {
        display: flex;
        gap: 4rem;
        flex-direction: column;
        align-items: center;
        margin-top: 4rem;
    }
    .skillsItem {
        box-shadow: 0px 0px 5px 0px rgba(7, 7, 7, 0.3);
        border: solid 10px #f7f7f7;
        padding: 1.6rem;
        width: 3rem;
        color: #f7f7f7;
        border-radius: 10px;
        width: clamp(28rem, 80vw, 36rem);
    }
    .skillsItem:nth-child(1) {
        background-color: #779D25;
        transform: rotate(1deg);
    }
    .skillsItem:nth-child(1) div {
        background-image: url("../assets/img/pc.webp");
        background-position: 0 3rem;
    }
    .skillsItem:nth-child(2) {
        background-color: #C84444;
        transform: rotate(-2deg);
    }
    .skillsItem:nth-child(2) div {
        background-image: url("../assets/img/cam.webp");
        background-position: 0 3rem;
    }
    .skillsItem:nth-child(3) {
        background-color: #D47D2C;
        transform: rotate(1deg);
    }
    .skillsItem:nth-child(3) div {
        background-image: url("../assets/img/design.webp");
        background-position: 0 3rem;
    }
    .skillsItem__container {
        height: clamp(18rem, 50vw, 23rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .skillsItem__container:nth-child(1) {
        background-position: 0 3rem;
    }
    .skillsItem__title {
        font-family: "Bebas Neue";
        font-size: 2.6rem;
    }
    .skillsItem__name {
        font-size: 1.2rem;
    }
    .skillsContainer {
        display: flex;
        align-items: end;
        justify-content: space-between;
    }
    .skillsName {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        text-transform: uppercase;
        font-weight: 600;
    }
    .skillsName--right {
        text-align: right;
    }
    .real {
        border-top: solid 5px #4251DE;
        border-bottom: solid 5px #4251DE;
        padding: 5.6rem 0 16rem;
        background-color: #C8CDFE;
    }
    .real__name {
        font-family: "Bebas Neue";
        font-size: 4rem;
        background-color: #4251DE;
        width: -moz-fit-content;
        width: fit-content;
        color: #f7f7f7;
        padding: 0.8rem 1.2rem;
        border-radius: 2px;
        margin: auto;
        box-shadow: 4px 4px 0px #1C2898;
        margin-bottom: 4rem;
    }
    @media (min-width: 768px) {
        .real__name {
            font-size: 5rem;
            padding: 1.6rem 2.4rem;
        }
    }
    .real__text {
        font-size: 1.3rem;
        text-align: center;
        padding: 2rem;
        line-height: 150%;
        padding: 2rem 2rem 4rem;
    }
    .realChoice {
        border: solid 3px #4251DE;
        border-radius: 4px;
        margin: 0 auto 6.4rem;
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
        padding: 1.6rem 3.2rem;
        border-radius: 4px;
        width: -moz-fit-content;
        width: fit-content;
        background-color: #f7f7f7;
    }
    .realChoice__bar {
        height: 2px;
        width: 80%;
        margin: auto;
        background-color: #4251DE;
    }
    .realChoice__select {
        font-size: 1.6rem;
        font-weight: 700;
        background: none;
        border: none;
        color: #f7f7f7;
        width: 100%;
        color: #070707;
        cursor: pointer;
    }
    .realChoice__select option {
        background-color: #f7f7f7;
        text-align: center;
    }
    .realList {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        margin: 0 1.2rem;
        align-items: center;
    }
    .realList__item:hover figure figcaption div:nth-child(2) img {
        transform: rotate(45deg);
    }
    .real__button {
        color: #4251DE;
        font-family: "Bebas Neue";
        font-size: 2.4rem;
        border: solid 3px #4251DE;
        padding: 0.8rem 1.6rem;
        transition: 0.5s;
        position: relative;
        background-color: #f7f7f7;
        left: 0px;
        display: block;
        margin: 5rem auto 0;
        width: -moz-fit-content;
        width: fit-content;
        background-color: #C8CDFE;
    }
    @media (min-width: 768px) {
        .real__button {
            font-size: 3rem;
            padding: 1.2rem 1.6rem;
        }
    }
    .real__button:hover {
        color: #f7f7f7;
        background-color: #4251DE;
        letter-spacing: 1px;
    }
    .figure {
        box-shadow: 0px 0px 5px 0px rgba(7, 7, 7, 0.3);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 0rem;
        padding: 1rem;
        background-color: #f7f7f7;
        border-radius: 15px;
        width: clamp(0.1rem, 100vw - 2.4rem, 35rem);
    }
    .figure__img {
        max-height: 20rem;
        border-radius: 8px 8px 0 0;
        transition: 0.5s;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .figureFigcaption {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.2rem;
        background-color: #EBEBEB;
        border-radius: 0 0 8px 8px;
        max-height: 10rem;
    }
    .figureFigcaption__subtitle {
        color: #070707;
        font-size: 1.3rem;
        font-weight: 500;
    }
    .figureFigcaption__domain {
        font-size: 1.3rem;
        font-weight: 500;
        text-transform: capitalize;
    }
    .figureFigcaption__name {
        font-family: Bebas Neue;
        color: #f7f7f7;
        font-size: 2rem;
        padding: 0.4rem 0.8rem;
    }
    .figureFigcaption__arrow {
        height: 2rem;
        transform: rotate(0deg);
        transition: 0.25s;
    }
    .figureFigcaption__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4rem;
    }
    .realDev figcaption div:nth-child(1) p:nth-child(2) {
        color: #41AFC8;
    }
    .realDev figcaption div:nth-child(2) p {
        background-color: #41AFC8;
    }
    .realVideo figcaption div:nth-child(1) p:nth-child(2) {
        color: #C84444;
    }
    .realVideo figcaption div:nth-child(2) p {
        background-color: #C84444;
    }
    .realVideo figcaption div:nth-child(1) p:nth-child(2) {
        color: #C84444;
    }
    .realVideo figcaption div:nth-child(2) p {
        background-color: #C84444;
    }
    .realPhoto figcaption div:nth-child(1) p:nth-child(2) {
        color: #779D25;
    }
    .realPhoto figcaption div:nth-child(2) p {
        background-color: #779D25;
    }
    .real3D figcaption div:nth-child(1) p:nth-child(2) {
        color: #D83FDB;
    }
    .real3D figcaption div:nth-child(2) p {
        background-color: #D83FDB;
    }
    .realDev figcaption div:nth-child(1) p:nth-child(2) {
        color: #41AFC8;
    }
    .realDev figcaption div:nth-child(2) p {
        background-color: #41AFC8;
    }
    .realWeb figcaption div:nth-child(1) p:nth-child(2) {
        color: #D47D2C;
    }
    .realWeb figcaption div:nth-child(2) p {
        background-color: #D47D2C;
    }
    .realDesc {
        font-family: 'neulis-neue';
        color: #070707;
        /* height: 100vh; */
        overflow-x: hidden;
        /* width: 100vw; */
        background-color: #f7f7f7;
        /* position: fixed; */
        /* top: 0; */
        /* left: 100vw; */
        transition: 0.5s;
        z-index: 8;
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        padding-bottom: 8rem;
    }
    .realDesc--open {
        left: 0vw;
    }
    .realDesc__nav {
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
        position: fixed;
        background-color: #6672E3;
        border-bottom: solid 3px #4251DE;
        width: 100vw;
        padding: 2rem;
        color: #f7f7f7;
        justify-content: left;
        z-index: 2;
    }
    .realDesc--realVideo header h1 {
        background-color: #C84444;
        box-shadow: 4px 4px 0px #af1717;
    }
    .realDesc--realWeb header h1 {
        background-color: #D47D2C;
        box-shadow: 4px 4px 0px #a6580f;
    }
    .realDesc--realDev header h1 {
        background-color: #41AFC8;
        box-shadow: 4px 4px 0px #1d7c91;
    }
    .realDesc--real3D header h1 {
        background-color: #D83FDB;
        box-shadow: 4px 4px 0px #921694;
    }
    .realDesc--realPhoto header h1 {
        background-color: #779D25;
        box-shadow: 4px 4px 0px #4a670d;
    }
    .realDesc__cross {
        height: 2.5rem;
        width: 2.5rem;
        fill: white;
        cursor: pointer;
        position: relative;
        transition: 0.5s;
        left: 0rem;
    }
    .realDesc__cross:hover {
        left: -1rem;
    }
    .realDesc__arrows {
        display: flex;
        justify-content: space-between;
    }
    .realDesc__arrows a {
        color: #f7f7f7;
        font-size: 2rem;
        font-family: "Bebas Neue";
        cursor: pointer;
    }
    .realDesc__arrow::after {
        transition: 0.5s ease-out;
        height: 2px;
        width: 0%;
        opacity: 0%;
        content: "";
        background-color: #f7f7f7;
        display: flex;
        margin: auto;
        border-radius: 2px;
    }
    .realDesc__arrow:hover::after {
        width: 100%;
        opacity: 100%;
    }
    .realDesc__header {
        padding-top: 14rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .realDesc__title {
        font-family: "Bebas Neue";
        font-size: 4rem;
        background-color: #4251DE;
        width: -moz-fit-content;
        width: fit-content;
        color: #f7f7f7;
        padding: 0.8rem 1.2rem;
        border-radius: 2px;
        margin: auto;
        box-shadow: 4px 4px 0px #1C2898;
        font-size: 2.6rem;
        text-align: center;
        width: fit-content;
        margin-bottom: 2.4rem;
    }
    @media (min-width: 768px) {
        .realDesc__title {
            font-size: 5rem;
            padding: 1.6rem 2.4rem;
        }
    }
    .realDesc__subtitle {
        font-size: 2.4rem;
        font-family: "Bebas Neue";
        margin-bottom: 1.6rem;
    }
    .realDesc__domain {
        font-size: 1.4rem;
        text-transform: capitalize;
        font-family: 'neulis-neue';
    }
    .realDesc__intro {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        justify-content: center;
        align-items: center;
    }
    .realDesc__content {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        justify-content: center;
        align-items: center;
    }
    .realDesc__text {
        font-size: 1.3rem;
        margin: 0rem 2.4rem;
        line-height: 125%;
        font-weight: 400;
    }
    .realDesc__video {
        width: 100vw;
        height: 56.25vw;
    }
    .realDesc__video--carre {
        height: 100vw;
    }
    .realDesc__video--vertical {
        width: 50.625vw;
        height: 90vw;
    }
    .realDesc__lienContainer {
        display: flex;
        justify-content: center;
        width: -moz-fit-content;
        width: fit-content;
        transition: 0.5s;
        color: #4251DE;
        font-family: "Bebas Neue";
        font-size: 2.4rem;
        border: solid 3px #4251DE;
        padding: 0.8rem 1.6rem;
        transition: 0.5s;
        position: relative;
        background-color: #f7f7f7;
        left: 0px;
    }
    @media (min-width: 768px) {
        .realDesc__lienContainer {
            font-size: 3rem;
            padding: 1.2rem 1.6rem;
        }
    }
    .realDesc__lienContainer:hover {
        color: #f7f7f7;
        background-color: #4251DE;
        letter-spacing: 1px;
    }
    .realDesc__links {
        margin: 2.4rem;
    }
    .realDesc__linksTitle {
        font-size: 1.6rem;
        color: #070707;
        font-weight: 800;
        margin-bottom: 1.6rem;
    }
    .realDesc__linksContainer {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }
    .realDesc__linksContainer li {
        width: -moz-fit-content;
        width: fit-content;
        margin-left: 0.8rem;
    }
    .realDesc__linksItem {
        font-size: 1.2rem;
        width: -moz-fit-content;
        width: fit-content;
        color: #4251DE;
        cursor: pointer;
    }
    .realDesc__linksItem::after {
        height: 1px;
        width: 100%;
        background-color: #4251DE;
        content: "";
        display: flex;
    }
    @media (min-width: 768px) {
        .burger {
            display: none;
        }
        .header__container {
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        .headerCompo {
            margin: 8.8rem auto;
            width: 82rem;
        }
        .headerCompo__welcome {
            font-size: 5rem;
            bottom: 21rem;
            left: 13rem;
        }
        .headerCompo__portfolio {
            font-family: "Federo";
            font-size: 22.5rem;
            position: relative;
            right: 2rem;
            bottom: 4rem;
        }
        .headerCompo__portfolio::after {
            margin: none;
        }
        .headerCompo__name {
            font-family: "Federo";
            font-size: 4.5rem;
            position: relative;
            top: 20rem;
            order: 2;
        }
        .headerCompo__domains {
            font-family: "Federo";
            font-size: 1.6rem;
            text-align: right;
            position: relative;
            bottom: 6rem;
            right: 4rem;
        }
        .nav {
            position: fixed;
            left: 0px;
            top: 4rem;
            background: none;
        }
        .navList {
            border-radius: 8px;
            border: solid 1px #070707;
            box-shadow: 4px 4px 0px #4251DE;
            background-color: #f7f7f7;
            width: -moz-fit-content;
            width: fit-content;
            height: -moz-fit-content;
            height: fit-content;
            flex-direction: row;
            margin: auto;
            gap: 2.4rem;
            padding: 1.6rem 3.2rem;
            justify-content: center;
        }
        .navList__item {
            font-size: 3rem;
            background: none;
            box-shadow: none;
            color: #070707;
            padding: 0rem;
            margin: 0rem;
            transition: 0.5s;
        }
        .navList__item::after {
            transition: 0.5s ease-out;
            display: flex;
            justify-content: center;
            content: "";
            height: 3px;
            border-radius: 2px;
            width: 0%;
            background-color: #4251DE;
            margin: auto;
            opacity: 0%;
        }
        .navList__item:hover {
            color: #4251DE;
        }
        .navList__item:hover::after {
            width: 100%;
            opacity: 100%;
        }
        .navList__tiret {
            display: flex;
            width: 2px;
            height: 2rem;
            background-color: #070707;
        }
        .about {
            padding-top: 12rem;
        }
        .about__container {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            align-items: center;
            gap: 8vw;
            margin: 8rem 0rem;
        }
        .aboutText {
            width: 40vw;
            gap: 3.2rem;
            width: 45rem;
        }
        .aboutText__item {
            font-size: 1.6rem;
            margin: 0rem;
        }
        .aboutText__cv {
            margin: 0rem;
        }
        .aboutMe {
            width: 35rem;
        }
        .aboutMe__img {
            margin: 0rem;
        }
        .aboutMe-color {
            margin-top: 0rem;
        }
        .aboutSkills__item {
            font-size: 6rem;
        }
        @keyframes carousel {
            0% {
                left: 0rem;
            }
            100% {
                left: -187rem;
            }
        }
        .skills {
            padding-top: 6rem;
        }
        .skills__title {
            margin: 6.4rem auto 8rem;
        }
        .skills__list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0rem clamp(4rem, 50vw - 60rem, 100000rem);
            gap: 4rem 5vw;
        }
        .real {
            padding-top: 12rem;
        }
        .realList {
            padding-top: 4rem;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4rem;
            margin: 0 clamp(4rem, 50vw - 60rem, 100000rem);
        }
        .real__text {
            font-size: 1.6rem;
            padding-top: 4rem;
        }
        .figure {
            border: solid 1px #f7f7f7;
            transition: 0.5s;
            width: 35rem;
        }
        .figure__img {
            height: 20rem;
            -o-object-fit: cover;
            object-fit: cover;
        }
        .figureFigcaption {
            justify-content: space-between;
            height: 10rem;
        }
        .figure:hover {
            border: solid 1px #a5a5a5;
            box-shadow: 0px 0px 20px 0px rgba(7, 7, 7, 0.8);
        }
        .realDesc__nav {
            gap: 2.4rem;
            padding: 2rem 4rem;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .realDesc__cross {
            width: 4rem;
            height: 4rem;
        }
        .realDesc__arrows {
            gap: 8rem;
        }
        .realDesc__arrows a {
            font-size: 3.2rem;
        }
        .realDesc__title {
            font-size: 3.2rem;
        }
        .realDesc__intro {
            margin: 0rem 4rem;
        }
        .realDesc__content {
            margin: 0rem clamp(4rem, 4vw, 4000rem);
            flex-direction: row;
            flex-wrap: wrap;
            align-items: start;
            gap: 4vw;
            justify-content: center;
        }
        .realDesc__text {
            font-size: 1.6rem;
            margin: 0rem;
            width: calc(100vw - 8rem);
            text-align: left;
        }
        .realDesc__video {
            width: 60vw;
            height: 33.75vw;
        }
        .realDesc__video--carre {
            height: 40vw;
            width: 40vw;
        }
        .realDesc__video--vertical {
            width: 33.75vh;
            height: 60vh;
        }
        .realDesc__img {
            width: 37vw;
            -o-object-fit: cover;
            object-fit: cover;
        }
        .realDesc__img--mobile {
            width: 28vw;
        }
        .realDesc__img--desktop {
            width: 60vw;
        }
        .realDesc__lien {
            font-size: 2.6rem;
        }
        .realDesc__linksTitle {
            font-size: 2.4rem;
        }
        .realDesc__linksItem {
            font-size: 1.6rem;
        }
    }
    /*# sourceMappingURL=main.css.map */
    .aboutText__item div a {
        text-decoration: underline;
    }
    strong {
        background-color: #4251DE;
        color: #f7f7f7;
        padding: 0.4rem;
        border-radius: 2px;
    }
}

.realDesc__domain {
    font-size: 1.4rem;
    text-transform: capitalize;
    font-family: 'neulis-neue';
}

.realDesc__intro {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    justify-content: center;
    align-items: center;
}

.realDesc__content {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    justify-content: center;
    align-items: center;
}

.realDesc__text {
    font-size: 1.3rem;
    margin: 0rem 2.4rem;
    line-height: 125%;
    font-weight: 400;
}

.realDesc__video {
    width: 100vw;
    height: 56.25vw;
}

.realDesc__video--carre {
    height: 100vw;
}

.realDesc__video--vertical {
    width: 50.625vw;
    height: 90vw;
}

.realDesc__lienContainer {
    display: flex;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content;
    transition: 0.5s;
    color: #4251DE;
    font-family: "Bebas Neue";
    font-size: 2.4rem;
    border: solid 3px #4251DE;
    padding: 0.8rem 1.6rem;
    transition: 0.5s;
    position: relative;
    background-color: #f7f7f7;
    left: 0px;
}

@media (min-width: 768px) {
    .realDesc__lienContainer {
        font-size: 3rem;
        padding: 1.2rem 1.6rem;
    }
}

.realDesc__lienContainer:hover {
    color: #f7f7f7;
    background-color: #4251DE;
    letter-spacing: 1px;
}

.realDesc__links {
    margin: 2.4rem;
}

.realDesc__linksTitle {
    font-size: 1.6rem;
    color: #070707;
    font-weight: 800;
    margin-bottom: 1.6rem;
}

.realDesc__linksContainer {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.realDesc__linksContainer li {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: 0.8rem;
}

.realDesc__linksItem {
    font-size: 1.2rem;
    width: -moz-fit-content;
    width: fit-content;
    color: #4251DE;
    cursor: pointer;
}

.realDesc__linksItem::after {
    height: 1px;
    width: 100%;
    background-color: #4251DE;
    content: "";
    display: flex;
}

@media (min-width: 768px) {
    .burger {
        display: none;
    }
    .header__container {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    .headerCompo {
        margin: 8.8rem auto;
        width: 82rem;
    }
    .headerCompo__welcome {
        font-size: 5rem;
        bottom: 21rem;
        left: 13rem;
    }
    .headerCompo__portfolio {
        font-family: "Federo";
        font-size: 22.5rem;
        position: relative;
        right: 2rem;
        bottom: 4rem;
    }
    .headerCompo__portfolio::after {
        margin: none;
    }
    .headerCompo__name {
        font-family: "Federo";
        font-size: 4.5rem;
        position: relative;
        top: 20rem;
        order: 2;
    }
    .headerCompo__domains {
        font-family: "Federo";
        font-size: 1.6rem;
        text-align: right;
        position: relative;
        bottom: 6rem;
        right: 4rem;
    }
    .nav {
        position: fixed;
        left: 0px;
        top: 4rem;
        background: none;
    }
    .navList {
        border-radius: 8px;
        border: solid 1px #070707;
        box-shadow: 4px 4px 0px #4251DE;
        background-color: #f7f7f7;
        width: -moz-fit-content;
        width: fit-content;
        height: -moz-fit-content;
        height: fit-content;
        flex-direction: row;
        margin: auto;
        gap: 2.4rem;
        padding: 1.6rem 3.2rem;
        justify-content: center;
    }
    .navList__item {
        font-size: 3rem;
        background: none;
        box-shadow: none;
        color: #070707;
        padding: 0rem;
        margin: 0rem;
        transition: 0.5s;
    }
    .navList__item::after {
        transition: 0.5s ease-out;
        display: flex;
        justify-content: center;
        content: "";
        height: 3px;
        border-radius: 2px;
        width: 0%;
        background-color: #4251DE;
        margin: auto;
        opacity: 0%;
    }
    .navList__item:hover {
        color: #4251DE;
    }
    .navList__item:hover::after {
        width: 100%;
        opacity: 100%;
    }
    .navList__tiret {
        display: flex;
        width: 2px;
        height: 2rem;
        background-color: #070707;
    }
    .about {
        padding-top: 12rem;
    }
    .about__container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        gap: 8vw;
        margin: 8rem 0rem;
    }
    .aboutText {
        width: 40vw;
        gap: 3.2rem;
        width: 45rem;
    }
    .aboutText__item {
        font-size: 1.6rem;
        margin: 0rem;
    }
    .aboutText__cv {
        margin: 0rem;
    }
    .aboutMe {
        width: 35rem;
    }
    .aboutMe__img {
        margin: 0rem;
    }
    .aboutMe-color {
        margin-top: 0rem;
    }
    .aboutSkills__item {
        font-size: 6rem;
    }
    @keyframes carousel {
        0% {
            left: 0rem;
        }
        100% {
            left: -187rem;
        }
    }
    .skills {
        padding-top: 6rem;
    }
    .skills__title {
        margin: 6.4rem auto 8rem;
    }
    .skills__list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0rem clamp(4rem, 50vw - 60rem, 100000rem);
        gap: 4rem 5vw;
    }
    .real {
        padding-top: 12rem;
    }
    .realList {
        padding-top: 4rem;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4rem;
        margin: 0 clamp(4rem, 50vw - 60rem, 100000rem);
    }
    .real__text {
        font-size: 1.6rem;
        padding-top: 4rem;
    }
    .figure {
        border: solid 1px #f7f7f7;
        transition: 0.5s;
        width: 35rem;
    }
    .figure__img {
        height: 20rem;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .figureFigcaption {
        justify-content: space-between;
        height: 10rem;
    }
    .figure:hover {
        border: solid 1px #a5a5a5;
        box-shadow: 0px 0px 20px 0px rgba(7, 7, 7, 0.8);
    }
    .realDesc__nav {
        gap: 2.4rem;
        padding: 2rem 4rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .realDesc__cross {
        width: 4rem;
        height: 4rem;
    }
    .realDesc__arrows {
        gap: 8rem;
    }
    .realDesc__arrows a {
        font-size: 3.2rem;
    }
    .realDesc__title {
        font-size: 3.2rem;
    }
    .realDesc__intro {
        margin: 0rem 4rem;
        font-family: 'neulis-neue';
    }
    .realDesc__content {
        margin: 0rem clamp(4rem, 4vw, 4000rem);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: start;
        gap: 4vw;
        justify-content: center;
    }
    .realDesc__text {
        font-size: 1.6rem;
        margin: 0rem;
        width: calc(100vw - 8rem);
        text-align: left;
        font-family: 'neulis-neue';
    }
    .realDesc__video {
        width: 60vw;
        height: 33.75vw;
    }
    .realDesc__video--carre {
        height: 40vw;
        width: 40vw;
    }
    .realDesc__video--vertical {
        width: 33.75vh;
        height: 60vh;
    }
    .realDesc__img {
        width: 37vw;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .realDesc__img--mobile {
        width: 28vw;
    }
    .realDesc__img--desktop {
        width: 60vw;
    }
    .realDesc__lien {
        font-size: 2.6rem;
    }
    .realDesc__linksTitle {
        font-size: 2.4rem;
    }
    .realDesc__linksItem {
        font-size: 1.6rem;
    }
}


/*# sourceMappingURL=main.css.map */

.aboutText__item div a {
    text-decoration: underline;
}

strong {
    background-color: #4251DE;
    color: #f7f7f7;
    padding: 0.4rem;
    border-radius: 2px;
}