/* Copyright (C) 2026 Yassine LADRAM * https://yassineladram.fr/ */

:root {
    --fullBlackColor: 5 5 5;
    --blackColor: 15 15 15;
    --fullWhiteColor: 255 255 255;
    --whiteColor: 255 255 255;

    --linkedInColor: 10 102 194;

    --focusColor: 39 107 255;
    --invalidColor: 255 23 68;

    --projectNiniCosyColor: 85 53 45;
    --projectStatrentColor: 20 130 255;
    --projectPiscinelleColor: 87 87 87;
    --projectPiscinelleAccessoiresColor: 225 0 122;
    --projectRollingDeckColor: 0 152 136;
    --projectRollingDeckAltColor: 255 69 0;
    --projectBazConsultingColor: 1 175 239;
    --projectBazConsultingAltColor: 0 112 191;
    --projectTheSpoonColor: 28 233 181;
    --projectMastermindColor: 254 27 72;
    --projectTouitteurColor: 46 129 184;
    --project2048Color: 170 0 255;

    --expBDFColor: 13 110 253;
    --expBNPColor: 3 145 90;
}

:root[data-theme=light] {
    --bgColor: 255 255 255;

    --ultraWhiteGrey: 245 245 248;
    --whiteGrey: 230 230 235;
    --altWhiteGrey: 242 242 245;
    --lightGrey: 190 195 205;
    --regularGrey: 120 125 140;
    --mediumGrey: 70 75 85;
    --blackGrey: 30 30 35;
}

:root[data-theme=dark] {
    --bgColor: 30 30 36;

    --ultraWhiteGrey: 36 36 43;
    --whiteGrey: 48 48 58;
    --altWhiteGrey: 40 40 48;
    --lightGrey: 70 73 86;
    --regularGrey: 110 114 130;
    --mediumGrey: 170 172 185;
    --blackGrey: 220 220 228;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    width: 100vw;
    position: relative;
    margin: 0;
    background-color: rgb(var(--blackColor) / 1);
    color: rgb(var(--fullWhiteColor) / 1);
    padding: 0;
}

body.is-loading {
    overflow: hidden;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0);
}

::selection {
    background-color: rgb(var(--blackGrey) / 1);
    color: rgb(var(--bgColor) / 1);
}

#hero-section *::selection,
footer *::selection,
div.experiences > div *::selection {
    background-color: rgb(250 250 250 / 1);
    color: rgb(0 0 0 / 1);
}

#message-me > ul li.msg-sent::selection {
    background-color: rgb(var(--bgColor) / 1);
    color: rgb(var(--blackGrey) / 1);
}

h1, h2, h3,
div.skills ul li,
div.skills ul + span,
div.experiences b {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@keyframes focus-appearing {
    0% { outline-offset: 0; }
    30% { outline-offset: 5px; }
    100% { outline-offset: 2px; }
}

a.project-link:focus-visible,
a:focus-visible,
button.cta:focus-visible,
#message-me > div > button:focus-visible,
footer nav button:focus-visible {
    outline: 2px solid rgb(var(--focusColor) / 1);
    outline-offset: 2px;
    animation: focus-appearing .3s ease forwards;
    border-radius: 2px;
    z-index: 100 !important;
}

@keyframes modal-appearing {
    0% { opacity: 0; transform: translate(-50%, 50px) scale(.5); background-color: rgb(var(--invalidColor) / .45); }
    1.2% { opacity: 1; transform: translate(-50%, -10px) scale(1.25); background-color: rgb(var(--invalidColor) / .9); }
    5% { opacity: 1; transform: translate(-50%, 0) scale(1); background-color: rgb(var(--invalidColor) / 1); }
    15% { background-color: rgb(var(--invalidColor) / .45); }
    97% { opacity: 1; transform: translate(-50%, 0) scale(1); background-color: rgb(var(--invalidColor) / .45); }
    100% { opacity: 0; transform: translate(-50%, 0) scale(.75); background-color: rgb(var(--invalidColor) / .45); }
}

@keyframes modal-progressing {
    0% { width: 0; }
    100% { width: calc(100% - 30px); }
}

#notifications-center {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
}

#notifications-center li {
    position: fixed;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(var(--invalidColor) / .45);
    backdrop-filter: blur(8px);
    z-index: 100;
    border-radius: 50px;
    max-width: calc(100vw - 40px);
    padding: 6px 22px;
    overflow: hidden;
    font-size: 15px;
    opacity: 0;
    animation: modal-appearing 10s ease forwards;
    border: 1px solid rgb(var(--invalidColor) / .75);
    width: max-content;
    color: rgb(var(--fullWhiteColor) / 1);
}

#notifications-center li u {
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, rgb(var(--fullWhiteColor) / .15), rgb(var(--fullWhiteColor) / 1));
    animation: modal-progressing 10s ease-in-out forwards;
    border-radius: 2px 2px 0 0;
}

#notifications-center li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 30px 30px rgb(var(--invalidColor) / .75);
    transform: rotate(-2deg);
    z-index: -1;
}

section {
    padding: 150px 0 50px;
}

header svg {
    width: 500px;
    max-width: calc(100vw - 40px);
    height: auto;
    display: block;
    margin: 20px auto;
    fill: rgb(250 250 250 / .75);
    transition: fill .1s ease;
}

@keyframes header-appearing {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    max-width: 100%;
    pointer-events: none;
    opacity: 0;
    animation: header-appearing 1s ease-out forwards 1s;
}

header:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 15px 70px 55px rgb(var(--bgColor) / 1);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
}

header.with-bg:before {
    opacity: 1;
}

header.with-bg svg {
    transition: fill .3s ease;
    fill: rgb(var(--blackGrey) / 1);
}

main {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
    background-color: rgb(var(--bgColor) / 1);
    color: rgb(var(--mediumGrey) / 1);
    position: relative;
}

@keyframes hero-appearing {
    0% { transform: translate(-50%, -50%) scale(2); }
    100% { transform: translate(-50%, -50%) scale(.95); }
}

@keyframes hero-animating {
    0% { transform: translate(-50%, -50%) scale(.95); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes hero-splashing {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    10% { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

#hero-section {
    height: 100vh;
    background-color: rgb(var(--blackColor) / 1);
    margin: 0;
    position: relative;
    padding: 0;
    font-size: 0;
    z-index: 80;
    overflow: hidden;
}

@keyframes loader-playing {
    0%, 75% { background-color: rgb(var(--bgColor) / 1); }
    100% { background-color: rgb(var(--blackColor) / 1); }
}

@keyframes loader-svg-appearing {
    0% { height: 100px; opacity: 0; }
    10% { opacity: 1; }
    30%, 75% { height: 90px; opacity: 1; }
    100% { height: calc(max(100vh, 100vw) + 1000px); opacity: 0; }
}

#hero-section > #loader {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--bgColor) / 1);
    z-index: 100;
    animation: loader-playing 1s ease forwards;
    overflow: hidden;
}

#hero-section > #loader svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    animation: loader-svg-appearing 1s ease forwards;
    fill: rgb(var(--blackColor) / 1);
}

#hero-section > div {
    transform: translate(-50%, -50%);
    animation: hero-appearing .25s ease-out forwards .9s;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 200px;
}

#hero-section > div.is-animating {
    animation: hero-animating 5s ease-out forwards;
}

#hero-section > div:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 700px;
    opacity: 0;
    aspect-ratio: 1 / 1;
    background-color: rgb(250 250 250 / .02);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: hero-splashing 1s ease-out forwards 1.1s;
}

#hero-section > div h1 {
    font-family: "Oswald", "Poppins", sans-serif;
    font-weight: 300;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 15px;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto 25px;
    padding: 5px;
    color: rgb(var(--fullWhiteColor) / 1);
    text-align: center;
    position: relative;
    z-index: 1;
    font-kerning: none;
    font-variant-numeric: tabular-nums;
    transition: font-size .25s ease;
    white-space: nowrap;
}

#hero-section > div h1 i {
    display: inline-block;
    width: 1.75ch;
    text-align: center;
    font-style: normal;
}

#hero-section > div h1 i:nth-child(12) {
    margin-right: 40px;
}

@keyframes h1-i-blinking {
    0%, 100%, 17%, 21%, 25%, 70%, 74%, 94% { transform: translateX(1px); color: inherit; opacity: 1; }
    19%, 23%, 72% { transform: translateX(-2px); color: inherit; opacity: .5; }
    97% { transform: translateX(6px); color: rgb(var(--invalidColor) / .45); opacity: 1; }
}

#hero-section > div h1 i.is-animating {
    animation: h1-i-blinking 1.5s ease infinite;
}

#hero-section > div h1 u {
    position: absolute;
    top: 0;
    height: 150px;
    width: 2px;
    background: linear-gradient(to bottom, rgb(250 250 250 / 1), rgb(0 0 0 / 0));
    transform: translateX(-50px) rotate(15deg);
}

#hero-section nav {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    text-align: center;
}

#hero-section nav a {
    font-size: 18px;
    color: rgb(250 250 250 / .75);
    display: inline-block;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 300;
    transition: color .25s ease, filter .25s ease, background-color .25s ease;
    text-align: left;
    padding: 10px 15px;
    width: max-content;
    margin: 5px;
    font-family: "Oswald", "Poppins", sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
}

@keyframes hero-nav-appearing {
    0% { opacity: 0; transform: translateY(15px); pointer-events: none; }
    100% { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

#hero-section nav a:nth-child(1) {
    animation: hero-nav-appearing 1s ease-out forwards 1s;
}

#hero-section nav a:nth-child(2) {
    animation: hero-nav-appearing 1s ease-out forwards 1.25s;
}

#hero-section nav a:nth-child(3) {
    animation: hero-nav-appearing 1s ease-out forwards 1.5s;
}

#hero-section nav a:nth-child(4) {
    animation: hero-nav-appearing 1s ease-out forwards 1.75s;
}

#hero-section nav a:hover,
#hero-section nav a:active {
    color: rgb(255 255 255 / 1);
    background-color: rgb(255 255 255 / .05);
}

#hero-section nav a:active {
    filter: brightness(.75);
}

#hero-section nav a svg {
    fill: rgb(250 250 250 / .75);
    height: 18px;
    transition: fill .25s ease, transform .25s ease;
}

#hero-section nav a:hover svg {
    fill: rgb(255 255 255 / 1);
}

#hero-section > u {
    position: absolute;
    bottom: 20px;
    width: 30px;
    aspect-ratio: 1 / 1;
    left: 10px;
    transition: left .25s ease, opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

#hero-section > u.hidden {
    opacity: 0;
    transform: scale(.75);
}

#hero-section > u:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: linear-gradient(to top, rgb(250 250 250 / 1) 50%, rgb(0 0 0 / 0));
}

#hero-section > u:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -5px) rotate(45deg);
    width: 15px;
    aspect-ratio: 1 / 1;
    border: 2px solid rgb(250 250 250 / 1);
    border-left: 0;
    border-top: 0;
}

.cta {
    position: fixed;
    background: linear-gradient(to bottom, rgb(var(--blackGrey) / .85), rgb(var(--mediumGrey) / .85));
    backdrop-filter: blur(5px);
    border-radius: 50% !important;
    width: 40px;
    aspect-ratio: 1;
    bottom: 15px;
    z-index: 70;
    transition: transform .25s ease, filter .25s ease, opacity .25s ease;
    overflow: hidden;
    font-size: 0;
    cursor: pointer;
    border: 0;
}

button.cta:disabled,
button.cta:disabled:hover
button.cta:disabled:active {
    opacity: .5;
    cursor: not-allowed;
}

body:has(header.with-bg) .cta {
    z-index: 91;
}

.cta:hover {
    filter: brightness(1.25);
    transform: scale(1.05);
}

.cta:active {
    filter: brightness(.9);
    transform: scale(.98);
}

.cta svg {
    fill: rgb(var(--bgColor) / 1);
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#cta-contact {
    right: 14px;
}

#cta-contact:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 24px;
    height: 19px;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgb(var(--bgColor) / 1), rgb(var(--bgColor) / .6)) rgb(var(--blackGrey) / 1);
    z-index: 2;
}

#cta-contact:after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border-right: 6px solid rgb(var(--bgColor) / .6);
    z-index: 1;
}

#cta-linkedin {
    right: calc(12px + 40px + 15px);
}

#cta-linkedin:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(var(--linkedInColor) / .75);
    z-index: -1;
    opacity: 0;
    transition: opacity .25s ease;
}

#cta-linkedin:hover:before {
    opacity: 1;
}

#cta-share {
    right: calc(12px * 2 + 40px * 2 + 15px);
}

#cta-share:before,
#cta-share:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(var(--bgColor) / 1);
}

#cta-share:before {
    width: 20px;
    height: 2.5px;
    background-color: rgb(var(--bgColor) / .8);
}

#cta-share:after {
    width: 2.5px;
    height: 20px;
    background: linear-gradient(to bottom, rgb(var(--bgColor) / 1), rgb(var(--bgColor) / .6)) rgb(var(--blackGrey) / 1);
}

h2 {
    font-family: "Oswald", "Poppins", sans-serif;
    font-weight: 400;
    font-size: 50px;
    text-transform: uppercase;
    letter-spacing: 10px;
    width: 1000px;
    max-width: 100%;
    margin: 5px auto;
    padding: 5px 10px;
    color: rgb(var(--blackGrey) / 1);
    position: relative;
    line-height: 1.2;
}

section h2 {
    max-width: calc(100% + 2px);
    transform: translateX(-2px);
}

section h2[data-label] {
    padding-top: 20px;
}

section h2[data-label]:before {
    content: attr(data-label);
    font-size: 15px;
    letter-spacing: 7px;
    position: absolute;
    padding: 0;
    background: linear-gradient(-45deg, rgb(var(--regularGrey) / 1), rgb(var(--blackGrey) / 1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translate(2px, -100%);
}

section h2[data-label]:after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: calc(50vw);
    height: 2px;
    background: linear-gradient(to left, rgb(var(--mediumGrey) / 1), rgb(var(--lightGrey) / 1) 50px);
    transform: translateX(-100%);
    line-height: 1.5;
}

h3 {
    font-family: "Oswald", "Poppins", sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 7px;
    margin: 35px 0 0;
    padding: 5px 10px;
    background: linear-gradient(-45deg, rgb(var(--regularGrey) / 1), rgb(var(--blackGrey) / 1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

p {
    font-size: 14px;
    line-height: 1.75;
    font-weight: 400;
    margin: 10px 0;
    padding: 5px 10px;
    color: rgb(var(--mediumGrey) / 1);
    text-align: left;
}

p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, text-underline-offset .2s ease;
    text-decoration-skip-ink: none;
}

p a:hover {
    text-decoration-color: rgb(var(--focusColor) / 1);
    text-underline-offset: 4px;
}

p strong {
    font-weight: 500;
    color: rgb(var(--blackGrey) / 1);
}

#hero-section p {
    width: calc(450px + 90px);
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    position: relative;
    z-index: 2;
    background: linear-gradient(-45deg, rgb(250 250 250 / .45), rgb(250 250 250 / .9));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 90px;
    padding-right: 0;
}

#hero-section p:before {
    content: "";
    width: 70px;
    height: 70px;
    background: url(../img/pp.jpg) center/cover no-repeat;
    filter: grayscale(100%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#hero-section p:after {
    content: "— Y.L";
    font-size: 12px;
    margin-left: 5px;
    font-style: italic;
    white-space: nowrap;
    color: rgb(var(--lightGrey) / 1);
}

p.projects-desc,
p.skills-desc,
p.exp-desc {
    margin: 0 auto;
    width: 500px;
    max-width: 100%;
    transform: translateX(-50%);
}

#projects-slider {
    margin: 50px 0 150px;
}

#projects-slider > div {
    margin: 0;
    overflow-y: hidden;
    overflow-x: scroll;
    max-width: 100%;
    position: relative;
    z-index: 1;
    font-size: 0;
}

#projects-slider > div::-webkit-scrollbar {
    display: none;
}

#projects-slider > div > div {
    user-select: none;
    position: relative;
    max-width: calc(341px * 8);
    min-width: calc(341px * 8);
    text-align: center;
    cursor: grab;
    margin: 0 auto;
}

#projects-slider > div.dragging > div {
    cursor: grabbing;
    user-select: none;
}

#projects-slider > div div b {
    display: inline-block;
    border-radius: 8px;
    width: 325px;
    aspect-ratio: 5 / 3;
    margin: 8px;
    overflow: hidden;
    position: relative;
    cursor: inherit;
    transition: transform .25s ease, filter .25s ease;
    -webkit-user-drag: none;
}

#projects-slider > div div b:empty {
    background-color: rgb(var(--blackColor) / 1);
    pointer-events: none;
}

#projects-slider > div div b a {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 30px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    z-index: 2;
    background-color: rgb(var(--blackColor) / .75);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 30px 15px rgb(var(--whiteColor) / .2);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    font-size: 0;
}

#projects-slider > div div b a:hover {
    transform: scale(1.1);
    opacity: 1;
    outline: 1.5px solid rgb(var(--whiteColor) / 1);
}

#projects-slider > div div b:hover a {
    opacity: .75;
}

#projects-slider > div div b a:focus-visible {
    opacity: 1;
}

#projects-slider > div div b a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 20px;
    background: linear-gradient(rgb(var(--whiteColor) / 0), rgb(var(--whiteColor) / 1) 50%);
}

#projects-slider > div div b a:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -3px) rotate(45deg);
    width: 10px;
    height: 10px;
    border: 2px solid rgb(var(--whiteColor) / 1);
    border-left: 0;
    border-top: 0;
}

#projects-slider > div div b:has(a:hover),
#projects-slider > div div b:has(a:active) {
    transform: scale(1.02);
}

#projects-slider > div div b:has(a:active) {
    transform: scale(.99);
    filter: brightness(.9);
}

#projects-slider > div div a:hover svg {
    transition: fill 1s ease;
    fill: rgb(255 255 255 / 1);
}

#projects-slider > div div b img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
    pointer-events: none;
    -webkit-user-drag: none;
}

#projects-slider > div div b svg {
    display: inline-block;
    height: 35px;
    max-width: 100%;
    transition: fill .25s ease;
    fill: rgb(255 255 255 / .75);
}

#projects-slider > div div b span {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    width: max-content;
    max-height: 35px;
    max-width: 50%;
    text-align: right;
}

#projects-slider > div div b span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    box-shadow: 0 0 75px 45px rgb(0 0 0 / 1);
}

#projects-slider p {
    font-size: 10px;
    color: rgb(var(--mediumGrey) / .8);
    max-width: 100%;
    width: 350px;
    text-align: right;
    font-style: italic;
    margin-left: calc(100% - 10px);
    transform: translateX(-100%);
    line-height: 1.5;
}

#projects-preview-desktop {
    position: absolute;
    aspect-ratio: 8 / 5;
    border: 0;
    border-radius: 35px;
    right: -75px;
    width: 50%;
    z-index: 10;
    filter: drop-shadow(0 20px 30px rgb(0 0 0 / .5));
    overflow: hidden;
    font-size: 0;
    background-color: rgb(var(--fullBlackColor) / 1);
    transition: right .25s ease, opacity .25s ease;
    outline: 1.5px solid rgb(100 100 100);
}

#projects-preview-desktop.fixed {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

#projects-preview-desktop.hidden {
    right: -100vw;
    opacity: 0;
    pointer-events: none;
}

#projects-preview-desktop:before {
    content: "Aperçu non disponible";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
    font-size: 15px;
    color: rgb(var(--fullWhiteColor) / .5);
    padding: 50px;
    font-style: italic;
    width: max-content;
}

#projects-preview-desktop:after {
    content: '';
    position: absolute;
    inset: 0;
    border: 20px solid rgb(var(--fullBlackColor) / 1);
    border-radius: 35px;
    z-index: 3;
}

@keyframes projects-preview-desktop-changing {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

#projects-preview-desktop:not(:empty) > *,
#projects-preview-desktop:empty:before {
    animation: projects-preview-desktop-changing .3s ease forwards;
}

#projects-preview-desktop video,
#projects-preview-desktop img {
    position: absolute;
    z-index: 1;
    border-radius: 0;
    inset: 19px;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
}

.project {
    margin: 0 auto;
    padding: 250px 0 0;
    width: 1000px;
    max-width: 100%;
    font-size: 0;
    padding-right: 500px;
    transition: padding-right .25s ease;
}

body:has(#projects-preview-desktop.hidden) .project {
    padding-right: 0;
}

#project-nini-cosy.project {
    padding-top: 0;
}

.project > svg {
    height: 50px;
    max-width: 100%;
    margin: 10px;
    fill: rgb(var(--blackGrey) / 1);
}

#project-nini-cosy > svg {
    fill: rgb(var(--projectNiniCosyColor) / 1);
}

#project-nini-cosy > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectNiniCosyColor) / 1));
}

#project-nini-cosy > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectNiniCosyColor) / .25);
}

#project-statrent > svg {
    fill: rgb(var(--projectStatrentColor) / 1);
}

#project-statrent > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectStatrentColor) / 1));
}

#project-statrent > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectStatrentColor) / .25);
}

#project-piscinelle > svg {
    fill: rgb(var(--projectPiscinelleColor) / 1);
    height: 60px;
}

#project-piscinelle-accessoires > svg .svg-color-1 {
    fill: rgb(var(--projectPiscinelleAccessoiresColor) / 1);
}

#project-piscinelle-accessoires > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectPiscinelleAccessoiresColor) / 1));
}

#project-piscinelle-accessoires > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectPiscinelleAccessoiresColor) / .25);
}

#project-rolling-deck > svg {
    height: 45px;
}

#project-rolling-deck > svg .svg-color-1 {
    fill: rgb(var(--projectRollingDeckColor) / 1);
}

#project-rolling-deck > svg .svg-color-2 {
    fill: rgb(var(--projectRollingDeckAltColor) / 1);
}

#project-rolling-deck > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectRollingDeckColor) / 1) 80%, rgb(var(--projectRollingDeckAltColor) / 1));
}

#project-rolling-deck > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectRollingDeckColor) / .25);
}

#project-baz-consulting > svg .svg-color-1,
#project-the-spoon > svg .svg-color-2 {
    fill: rgb(var(--lightGrey) / 1);
}

#project-baz-consulting > svg {
    height: 45px;
}

#project-baz-consulting > svg .svg-color-2 {
    fill: rgb(var(--projectBazConsultingColor) / 1);
}

#project-baz-consulting > svg .svg-color-3 {
    fill: rgb(var(--projectBazConsultingAltColor) / 1);
}

#project-baz-consulting > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectBazConsultingColor) / 1) 80%, rgb(var(--projectBazConsultingAltColor) / 1));
}

#project-baz-consulting > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectBazConsultingColor) / .25);
}

#project-the-spoon > svg .svg-color-1 {
    fill: rgb(var(--projectTheSpoonColor) / 1);
}

#project-the-spoon > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectTheSpoonColor) / 1));
}

#project-the-spoon > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectTheSpoonColor) / .25);
}

#project-mastermind > svg .svg-color-1 {
    fill: rgb(var(--projectMastermindColor) / 1);
}

#project-mastermind > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectMastermindColor) / 1));
}

#project-mastermind > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectMastermindColor) / .25);
}

#project-touitteur > svg .svg-color-1 {
    fill: rgb(var(--projectTouitteurColor) / 1);
}

#project-touitteur > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--projectTouitteurColor) / 1));
}

#project-touitteur > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--projectTouitteurColor) / .25);
}

#project-2048 > svg .svg-color-1 {
    fill: rgb(var(--project2048Color) / 1);
}

#project-2048 > p:first-of-type {
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1) 20%, rgb(var(--project2048Color) / 1));
}

#project-2048 > a.project-link:not(:hover) {
    text-decoration-color: rgb(var(--project2048Color) / .25);
}

.project > p:first-of-type {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 50px;
    position: relative;
    background-image: linear-gradient(-45deg, rgb(var(--mediumGrey) / 1), rgb(var(--regularGrey) / 1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project > p:first-of-type strong {
    font-weight: 400;
    font-style: normal;
    color: inherit;
}

.project > p b {
    font-weight: 500;
    padding-right: 10px;
    color: rgb(var(--blackGrey) / 1);
    letter-spacing: .5px;
    font-size: 15px;
}

.project > a.project-link {
    font-size: 20px;
    color: rgb(var(--blackGrey) / 1);
    display: block;
    border-radius: 50px;
    text-decoration: 2px underline rgb(var(--whiteGrey) / 1);
    text-underline-offset: 5px;
    cursor: pointer;
    font-weight: 400;
    transition: text-decoration-color .25s ease, text-underline-offset .25s ease, filter .25s ease;
    text-align: left;
    padding: 5px 10px;
    width: max-content;
    margin: 10px 0 0;
    position: relative;
}

a.project-link[target="_blank"] {
    padding-right: 25px;
}

a.project-link[target="_blank"]:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-6px);
    width: 7px;
    height: 7px;
    border: 2px solid rgb(var(--blackGrey) / 1);
    border-left: 0;
    border-bottom: 0;
}

a.project-link[target="_blank"]:before {
    content: "";
    position: absolute;
    height: 15px;
    width: 2px;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(45deg);
    background-color: rgb(var(--blackGrey) / 1);
}

.project > a.project-link:hover,
.project > a.project-link:active {
    text-decoration-color: rgb(var(--mediumGrey) / 1);
    text-underline-offset: 6px;
}

.project > a.project-link:active {
    filter: brightness(.9);
}

.project > .project-preview-mobile {
    display: none;
}

div.skills {
    margin: 50px auto;
    padding: 0;
    width: 1000px;
    max-width: 100%;
    font-size: 0;
    height: 70px;
    position: relative;
    overflow: hidden;
}

div.skills:last-of-type {
    margin-bottom: 0;
}

div.skills:before,
div.skills:after {
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 2;
    width: 75px;
}

div.skills:before {
    left: 0;
    background: linear-gradient(90deg, rgb(var(--bgColor) / 1) 0%, rgb(0 0 0 / 0) 100%);
}

div.skills:after {
    right: 0;
    background: linear-gradient(270deg, rgb(var(--bgColor) / 1) 0%, rgb(0 0 0 / 0) 100%);
}

div.skills ul {
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    animation: skills-move 42s linear infinite;
    width: fit-content;
    position: relative;
    z-index: 1;
}

div.skills:nth-of-type(2) ul {
    animation: skills-move 30s linear infinite reverse;
}

div.skills:nth-of-type(3) ul {
    animation: skills-move 18s linear infinite;
}

@keyframes skills-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

div.skills ul.paused {
    animation-play-state: paused;
}

div.skills ul li {
    display: inline-block;
    vertical-align: top;
    color: rgb(var(--blackGrey) / 1);
    padding: 30px 0 30px 60px;
    font-size: 20px;
    line-height: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
    position: relative;
}

div.skills ul + span {
    position: absolute;
    top: 0;
    left: 10px;
    padding: 0 10px 45px;
    transform: translateX(-1px);
    background: linear-gradient(-45deg, rgb(var(--regularGrey) / 1), rgb(var(--blackGrey) / 1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    font-family: "Oswald", "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 3px;
    font-weight: 400;
    text-transform: uppercase;
    z-index: 3;
    transition: opacity .3s ease, padding-top .3s ease;
    opacity: 1;
}

div.skills ul + span.changed {
    opacity: 0;
    padding-top: 10px;
}

div.skills ul + span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgb(var(--blackGrey) / 1) 0%, rgb(var(--regularGrey) / .1) 100%);
    border-radius: 5px;
}

div.experiences {
    margin: 50px 0;
    padding: 15px 0 15px calc(100vw / 2 - 1000px / 2);
    font-size: 0;
    overflow-y: visible;
    overflow-x: scroll;
    white-space: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 8px;
}

div.experiences::-webkit-scrollbar {
    display: none;
}

@keyframes exp-focus-appearing {
    0% { outline-offset: -7px; }
    30% { outline-offset: -2px; }
    100% { outline-offset: -5px; }
}

div.experiences:focus-visible {
    outline-offset: -5px;
    animation: exp-focus-appearing .3s ease forwards;
    outline: 2px solid rgb(var(--focusColor) / 1);
}

div.experiences > div {
    display: inline-block;
    width: 335px;
    border-radius: 15px;
    background-color: rgb(var(--mediumGrey) / 1);
    margin: 0 10px;
    padding: 10px 0 90px;
    border: 0;
    color: rgb(var(--whiteColor) / .75);
    vertical-align: top;
    position: relative;
    white-space: normal;
    overflow: hidden;
    min-height: 550px;
}

div.experiences > div:nth-child(2),
div.experiences > div:nth-child(3) {
    background-color: rgb(var(--expBDFColor) / 1);
}

div.experiences > div:nth-child(4) {
    background-color: rgb(var(--expBNPColor) / 1);
}

div.experiences > div:nth-child(2):after,
div.experiences > div:nth-child(3):after {
    box-shadow: 0 0 150px 130px rgb(var(--expBDFColor) / .75);
}

div.experiences > div:nth-child(4):after {
    box-shadow: 0 0 150px 130px rgb(var(--expBNPColor) / .75);
}

div.experiences > div:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(var(--blackColor) / .7);
    z-index: 0;
}

div.experiences > div:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    right: -50%;
    box-shadow: 0 0 150px 130px rgb(var(--mediumGrey) / .75);
    z-index: 2;
}

div.experiences span {
    text-align: center;
    display: block;
    z-index: 3;
    position: relative;
    height: 20px;
    opacity: .45;
    width: calc(100% - 50px * 2);
    margin: 10px auto;
    cursor: default;
}

div.experiences span:has(b:nth-child(2)):before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 60px;
    right: 60px;
    height: 2px;
    background: linear-gradient(90deg, rgb(var(--whiteColor) / 1) 50%, rgb(var(--whiteColor) / 0));
}

div.experiences span:has(b:nth-child(2)):after {
    content: "";
    position: absolute;
    top: 50%;
    left: 60px;
    width: 8px;
    height: 8px;
    border: 2px solid rgb(var(--whiteColor) / 1);
    border-top: 0;
    border-right: 0;
    transform: translateY(-50%) rotate(45deg);
}

div.experiences b:has(+ b) {
    float: left;
}

div.experiences b + b {
    float: right;
}

div.experiences b {
    font-size: 20px;
    color: rgb(var(--whiteColor) / 1);
    line-height: 1;
    font-weight: 400;
    cursor: inherit;
}

div.experiences strong {
    font-size: 25px;
    line-height: 1;
    font-family: "Oswald", "Poppins", sans-serif;
    font-weight: 300;
    display: block;
    text-align: center;
    position: relative;
    z-index: 3;
    color: rgb(var(--whiteColor) / 1);
    letter-spacing: 5px;
    text-transform: uppercase;
    padding: 30px 0;
    box-shadow: 0 0 70px 50px rgb(var(--blackColor) / .35);
    clear: both;
    background-color: rgb(var(--blackColor) / .35);
}

div.experiences p {
    display: block;
    color: inherit;
    position: relative;
    z-index: 2;
    padding: 0 15px;
    color: rgb(255 255 255 / .9);
}

div.experiences svg {
    height: 100px;
    position: absolute;
    z-index: 1;
    bottom: calc(130px / 2);
    transform: translateY(50%);
    pointer-events: none;
    opacity: .35;
    right: -10px;
}

#section-about-me {
    margin: 0 auto;
    padding-left: 180px;
    width: calc(570px + 180px);
    max-width: 100%;
    position: relative;
}

#section-about-me:before {
    content: "";
    width: 150px;
    height: 150px;
    background: url(../img/pp.jpg) center/cover no-repeat;
    border-radius: 50%;
    position: absolute;
    bottom: 65px;
    left: 0;
}

#message-me {
    margin: 100px auto 150px;
    width: 500px;
    max-width: 100%;
    font-size: 0;
    padding: 0 5px;
    position: relative;
    transition: opacity .3s ease;
}

#message-me > ul {
    list-style: none;
    padding: 0 40px;
    margin: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

#message-me > ul:after {
    content: "";
    display: block;
    clear: both;
}

#message-me > ul li a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@keyframes msg-appearing {
    0% { opacity: 0; transform: scale(0); }
    70% { opacity: 1; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

#message-me > ul li.msg-received:not(.is-writing), 
#message-me > ul li.msg-sent {
    display: block;
    padding: 10px 15px;
    border-radius: 25px;
    width: fit-content;
    max-width: 80%;
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    clear: both;
    animation: msg-appearing .3s ease forwards;
    z-index: 2;
    word-wrap: break-word;
}

#message-me > ul li.msg-received:not(.is-writing) {
    background: linear-gradient(-15deg, rgba(var(--lightGrey) / .1), rgba(var(--lightGrey) / .75));
    border-bottom-left-radius: 3px;
    color: rgb(var(--blackGrey) / 1);
    float: left;
}

#message-me > ul li.msg-received.is-writing {
    display: block;
    width: fit-content;
    max-width: 80%;
    margin: 0 0 20px;
    position: relative;
    clear: both;
    float: left;
    padding: 11px 15px;
    z-index: 1;
}

#message-me > ul li.msg-received.is-writing:has(+ li.msg-received:not(.is-writing)) {
    position: absolute;
    bottom: 10px;
    opacity: 0;
}

@keyframes typing-blink {
    0%, 80% { background-color: rgb(var(--lightGrey) / 0); }
    40% { background-color: rgb(var(--lightGrey) / 1); }
}

#message-me > ul li.msg-received.is-writing u,
#message-me > ul li.msg-received.is-writing u:before,
#message-me > ul li.msg-received.is-writing u:after {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: rgb(var(--lightGrey) / 0);
}

#message-me > ul li.msg-received.is-writing u {
    display: inline-block;
    animation: typing-blink 2s infinite .4s;
    margin: 0 20px;
    position: relative;
}

#message-me > ul li.msg-received.is-writing u:before,
#message-me > ul li.msg-received.is-writing u:after {
    content: "";
    position: absolute;
}

#message-me > ul li.msg-received.is-writing u:before {
    animation: typing-blink 2s infinite 0s;
    left: -20px;
}

#message-me > ul li.msg-received.is-writing u:after {
    animation: typing-blink 2s infinite .8s;
    right: -20px;
}

#message-me > ul li.msg-received:before {
    content: "";
    width: 35px;
    height: 35px;
    background: url(../img/pp.jpg) center/cover no-repeat;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: -40px;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

#message-me > ul li.msg-received:has(+ li.msg-received),
#message-me > ul li.msg-sent:has(+ li.msg-sent) {
    margin-bottom: 10px;
}

#message-me > ul li.msg-received:has(+ li.msg-received):before {
    opacity: 0;
    transform: scale(0);
}

#message-me > ul li.msg-sent {
    background: linear-gradient(-15deg, rgba(var(--blackGrey) / .75), rgba(var(--blackGrey) / 1));
    border-bottom-right-radius: 3px;
    color: rgb(var(--bgColor) / 1);
    float: right;
}

#message-me > ul li i {
    color: rgb(var(--blackGrey) / .75);
}

#message-me > ul li i.important {
    color: rgb(var(--blackGrey) / 1);
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    display: block;
    margin-top: 5px;
}

#message-me > ul li b {
    font-weight: 500;
    font-family: monospace;
}

@keyframes paused-pulse {
    0%, 100% { color: rgb(var(--invalidColor) / 1); }
    50% { color: rgb(var(--invalidColor) / .5); }
}

#message-me > ul li b.is-paused {
    animation: paused-pulse 1.5s ease infinite;
}

#message-me > div {
    border: 2px solid rgb(var(--lightGrey) / 1);
    padding: 0;
    border-radius: 25px;
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    position: relative;
    transition: border-color .3s ease, opacity .3s ease;
    margin: 0 auto;
    z-index: 3;
    background-color: rgb(var(--bgColor) / .9);
    backdrop-filter: blur(10px);
}

#message-me > div.fixed {
    bottom: 10px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: calc(500px - 10px);
    max-width: calc(100% - 10px);
}

#message-me > div.hidden {
    opacity: 0 !important;
    pointer-events: none;
}

#message-me > div.blocked {
    opacity: .75;
    background-color: rgb(var(--lightGrey) / .35);
    cursor: not-allowed;
}

#message-me > div.blocked > * {
    pointer-events: none;
}

#message-me > div.has-error,
#message-me > div:has(span:focus).has-error {
    border-color: rgb(var(--invalidColor) / 1);
}

#message-me > div:has(span:focus) {
    border-color: rgb(var(--focusColor) / 1);
}

#message-me > div > span {
    display: block;
    padding: 11px 20px;
    font-size: 16px;
    color: rgb(var(--blackGrey) / 1);
    outline: 0;
    border-radius: inherit;
    cursor: text;
    width: calc(100% - 45px);
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#message-me > div > span:empty:after {
    content: attr(data-placeholder);
    color: rgb(var(--lightGrey) / 1);
    font-size: inherit;
    pointer-events: none;
}

#message-me > div > button {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: linear-gradient(to bottom, rgb(var(--blackGrey) / 1), rgb(var(--mediumGrey) / 1));
    cursor: pointer;
    font-size: 0;
    border: 0;
    transition: transform .3s ease, filter .3s ease;
}

#message-me > div > button:hover,
#message-me > div > button:active {
    filter: brightness(.95);
}

#message-me > div > button:active {
    transform: scale(.9);
    filter: brightness(.9);
}

#message-me > div > button:disabled,
#message-me > div > button:disabled:hover,
#message-me > div > button:disabled:active {
    opacity: .5;
    cursor: not-allowed;
}

#message-me > div > button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 20px;
    background-color: rgb(var(--bgColor) / 1);
}

#message-me > div > button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid rgb(var(--bgColor) / 1);
    border-bottom: 0;
    border-right: 0;
    transform: translate(-50%, -9px) rotate(45deg);
}

footer {
    background-color: rgb(var(--blackColor) / 1);
    padding: 50px 10px 75px;
    text-align: left;
    color: rgb(250 250 250 / .55);
    font-size: 0;
    position: relative;
    margin: 0;
    z-index: 90;
    max-width: 100%;
    overflow: hidden;
}

footer nav {
    display: block;
    margin: 0 auto;
    width: 1000px;
    max-width: 100%;
    text-align: center;
}

footer nav a,
footer nav button {
    font: inherit;
    font-size: 17px;
    color: rgb(230 230 230 / 1);
    display: inline-block;
    border-radius: 50px;
    text-decoration: 2px underline rgb(250 250 250 / .25);
    text-underline-offset: 5px;
    cursor: pointer;
    font-weight: 400;
    transition: text-decoration-color .25s ease, text-underline-offset .25s ease, filter .25s ease, color .25s ease, font-size .25s ease, transform .25s ease;
    text-align: center;
    padding: 0;
    width: max-content;
    margin: 0 15px;
    position: relative;
    white-space: nowrap;
    border: 0;
    background: none;
}

footer nav button[data-value]:after {
    content: attr(data-value);
    background-color: rgb(230 230 230 / 1);
    color: rgb(var(--blackColor) / 1);
    margin-left: 3px;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 2px 5px;
    line-height: 1;
    display: inline-block;
    transform: translateY(1px) scale(.8);
    font-family: "Oswald", "Poppins", sans-serif;
    font-weight: 400;
    letter-spacing: .5px;
}

footer nav a:hover,
footer nav a:active,
footer nav button:hover,
footer nav button:active {
    text-decoration-color: rgb(250 250 250 / .5);
    text-underline-offset: 6px;
}

footer nav a:active,
footer nav button:active {
    filter: brightness(.9);
    transform: scale(1.1);
}

footer nav a.active,
footer nav button.active {
    color: rgb(250 250 250 / 1);
    text-decoration-color: rgb(var(--focusColor) / 1);
    font-size: 19px;
}

footer nav a[target="_blank"] {
    padding-right: 25px;
}

footer nav a[target="_blank"]:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-6px);
    width: 7px;
    height: 7px;
    border: 2px solid rgb(230 230 230 / 1);
    border-left: 0;
    border-bottom: 0;
}

footer nav a[target="_blank"]:before {
    content: "";
    position: absolute;
    height: 15px;
    width: 2px;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(45deg);
    background-color: rgb(230 230 230 / 1);
}

footer > div {
    display: block;
    margin: 30px auto 0;
    width: 1000px;
    max-width: 100%;
    hyphens: auto;
}

footer > div.hidden {
    display: none;
}

@keyframes footer-tab-appearing {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

footer > div:not(.hidden) {
    animation: footer-tab-appearing .3s ease forwards;
}

footer h2 {
    color: rgb(var(--fullWhiteColor) / 1);
    margin: 0 auto;
    text-align: center;
    font-size: 50px;
    line-height: 1;
    font-weight: 200;
    z-index: 1;
    transition: all .3s ease;
    width: 100%;
    max-width: 100%;
    padding: 0 0 50px;
    position: relative;
}

footer h2:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: 0 0 50px 20px rgb(var(--blackColor) / 1);
    z-index: 2;
    bottom: 0;
    pointer-events: none;
}

footer p {
    font-size: 12px;
    line-height: 1.6;
    text-align: justify;
    margin: 0 0 10px;
    color: inherit;
    padding: 0;
}

footer p em {
    font-style: normal;
    font-family: monospace;
}

footer p a {
    color: inherit;
}

footer p a:hover {
    text-decoration-color: rgb(255 255 255 / 1);
}

footer strong {
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    margin: 20px 0 10px;
    font-weight: 500;
    display: block;
}

footer ul {
    list-style: "—";
    padding: 0;
    margin: 0 0 10px;
}

footer ul li {
    margin: 0 0 5px 10px;
    padding-left: 5px;
    font-size: 12px;
    line-height: 1.6;
    text-align: justify;
}