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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
ul,
ol,
li,
figure,
figcaption,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
button,
select,
details,
summary {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg--color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

input,
textarea,
button,
select {
    font: inherit;
}

button,
img,
video {
    border: 0;
}

::selection {
    background-color: #7f42a7; 
    color: var(--white); 
}

::-moz-selection {
    background-color: #7f42a7;
    color: var(--white);
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--white);
    border-radius: 10px;
}

.arrow--wrapper {
    position: relative;
    overflow: hidden;
    width: 1.4em;
    height: 1.4em;
}

.arrow--icon {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: black;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.arrow--icon::before,
.arrow--icon::after {
    content: '';
}

.arrow--wrapper .arrow--icon:first-child {
    transform: translate(0, 0);
}

.arrow--wrapper .arrow--icon:last-child {
    transform: translate(-100%, 100%);
}

:is(.home--btn, .social--link, .contact--email-link, .project--ard-arrow-link, .about--btn-cv, .contact--form-submit, .card--end-btn, .footer--email, .container--project-detail > a):hover .arrow--icon:first-child {
    transform: translate(100%, -100%);
}

:is(.home--btn, .social--link, .contact--email-link, .project--card-arrow-link, .about--btn-cv, .contact--form-submit, .card--end-btn, .footer--email, .container--project-detail > a):hover .arrow--icon:last-child {
    transform: translate(0, 0);
}

html {
    background-color: var(--bg--color);
    overflow-x: hidden;
}

.btn--anim-letter {
    display: inline-block;
}

.site--wrapper {
    overflow: clip; 
}