/*
 * Contains the style of all elements
 * The sizes, positions, ... components are coded in the responsive folder
 */

:root {
    /* Animation */
    --animation-1: fadeInDown 0.5s ease forwards;
    --body-animation: gradientFlow 5s ease-in-out infinite;

    /* Font */
    --h1-font: var(--font-1);
    --h2-font: var(--font-2);
    --h3-font: var(--font-4);
    --a-font: var(--font-3);
    --p-font: var(--font-4);

    /* Weight */
    --h1-weight: var(--title-weight-s);
    --h2-weight: var(--text-weight-xl);
    --h3-weight: var(--text-weight-xl);
    --a-weight: var(--text-weight-m);
    --p-weight: var(--text-weight-l);

    /* Transition */
    --header-transition-1: box-shadow 0.6s ease;
    --project-transition-1: 0.4s;
    --project-transition-2: transform 0.5s;
    --footer-transition-1: transform 0.3s;

    /* Presentation */
    --presentation-h2-font: var(--font-2);
    --presentation-h2-weight: var(--title-weight-xl);

    /* Blur */
    --header-blur: var(--blur-xs);
    --card-blur: var(--blur-3xl);

    /* Radius */
    --header-radius: var(--radius-m);
    --about-radius: var(--radius-xs);
    --project-radius: var(--radius-xxs);

    --profil-img-radius: var(--radius-xs);
    --fablab-img-radius: var(--radius-xxl);
    --degree-img-radius: var(--radius-xxl);

    /* Opacity */
    --about-img-opacity: 0.85;
    --preview-img-opacity: 0.75;

    /* Backgrounds */
    --card-background: rgba(255, 255, 255, 0.03);
}

/* === HTML === */
html {
    color: var(--text-color);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* === BODY === */
body {
    overflow-x: hidden;
    background-color: var(--background-color);
}

body.no-scroll {
    overflow: hidden;
}

/* === MAIN === */
section h2 {
    font-family: var(--h2-font);
    font-weight: var(--h2-weight);
}

section p {
    font-family: var(--p-font);
    font-weight: var(--p-weight);
    line-height: 1.4;
}

/* === HEADER === */
header {
    box-sizing: border-box;
    backdrop-filter: blur(var(--header-blur));
    border-radius: var(--header-radius);

    animation: var(--animation-1);
}

header a {
    padding-bottom: 4px;
    font-family: var(--a-font);
    font-weight: var(--a-weight);
    text-decoration: none;
    color: var(--text-color);

    transition: var(--header-transition-1);
}

header a:visited {
    color: var(--text-color);
    text-decoration: none;
}

header a:hover {
    box-shadow: var(--shadow-inset-2);
}

/* === Title === */
h1 span {
    font-family: var(--h1-font);
    font-weight: var(--h1-weight);
}

.h1-primary {
    font-weight: var(--h1-weight);
}

.h1-secondary {
    text-transform: uppercase;
    font-weight: var(--h1-weight);
}

/* === Presentation === */
#presentation h2 {
    font-weight: var(--presentation-h2-weight);
    font-family: var(--presentation-h2-font);
    letter-spacing: -0.04em;
    line-height: 0.8;
}

#presentation h2 span {
    color: transparent;
    -webkit-text-stroke: 1px white;
}

#presentation p {
    color: rgba(255, 238, 0, 0.7);
    text-shadow: var(--shadow-2);
    text-wrap: pretty;
    line-height: 1.5;
}

/* === Arrows === */
.arrow1,
.arrow2 {
    animation: bounce 2s infinite;
}

.go-next {
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--p-font);
    transition: transform 0.2s ease;
}

.go-next:active {
    transform: scale(0.95);
}

.next-arrow {
    font-weight: var(--p-weight);
    line-height: 90%;
}

/* === About === */
.about-content {
    background-color: var(--card-background);
    box-sizing: border-box;
    backdrop-filter: blur(var(--card-blur));

    border-radius: var(--about-radius);
    box-shadow: var(--shadow-2);
    box-sizing: border-box;
}

.profile,
.fablab,
.degree {
    box-sizing: border-box;
}

.profile h3,
.fablab h3,
.degree h3 {
    color: var(--text-color-sdn);
    -webkit-text-stroke: 1px rgba(242, 213, 0, 0.5);
    text-shadow: var(--shadow-2);
}

.about-content h3 {
    font-family: var(--h3-font);
    font-weight: var(--h3-weight);
    line-height: 1.3;
}

.about-content p {
    font-family: var(--p-font);
    font-weight: var(--p-weight);
    line-height: 1.6;
}

.about-content img {
    opacity: var(--about-img-opacity);
}

/* --- Profil --- */
.profile img {
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--profil-img-radius);
    box-shadow: var(--shadow-1);
}

/* --- FabLab --- */
.fablab img {
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--fablab-img-radius);
    box-shadow: var(--shadow-1);
}

.fablab a {
    color: var(--text-color);
    font-style: italic;
    text-decoration: underline;
}

/* --- Skills --- */
.degree img {
    flex-shrink: 0;
    object-fit: cover;
}

/* === Project Preview === */
.project-preview {
    color: var(--text-color-prm);

    background: var(--card-background);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));

    box-shadow: var(--shadow-2);

    border-radius: var(--project-radius);

    transition: var(--project-transition-1);
}

.project-preview:hover {
    transform: scale(1.07);
    cursor: pointer;
}

.project-preview img {
    object-fit: cover;
    border-radius: 20px;
    overflow: hidden;
    opacity: var(--preview-img-opacity);
}

.project-preview h3 {
    font-family: var(--h3-font);
    font-weight: var(--h3-weight);
    line-height: 1;
}

.description {
    font-family: var(--p-font);
    font-weight: var(--p-weight);
    font-style: italic;
    overflow-y: hidden;
}

.learn-more p {
    font-family: var(--p-font);
}

.click-info {
    color: var(--text-color-sdn);
    -webkit-text-stroke: 1px rgba(242, 213, 0, 0.5);
    text-shadow: var(--shadow-2);
}

/* === Project === */
.project {
    color: var(--text-color-prm);

    background: var(--card-background);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));

    box-shadow: var(--shadow-2);

    border-radius: var(--project-radius);
    box-sizing: border-box;
}

.project-header h3 {
    font-family: var(--h3-font);
    font-weight: var(--h3-weight);
    line-height: 1;
}

.project-header img {
    background: none;
    border: none;
    border-radius: 90%;

    transition-duration: var(--project-transition-1);
}

.project-header img:hover,
.project-header img:active {
    cursor: pointer;
    background: var(--card-background);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));

    box-shadow: var(--shadow-2);
    transition-duration: var(--project-transition-1);
}

.project-content a {
    font-family: var(--p-font);
    font-weight: var(--p-weight);
    color: var(--text-color);
    line-height: 1.6;
}

.left-content iframe,
.left-content img {
    opacity: var(--about-img-opacity);
    object-fit: cover;
    border-radius: var(--radius-3xs);
}

.left-content p,
.right-content p {
    font-family: var(--p-font);
    font-weight: var(--p-weight);
    line-height: 1.6;
}

.repo {
    background: var(--card-background);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));

    box-shadow: var(--shadow-2);

    border-radius: var(--project-radius);
    box-sizing: border-box;
    transition: var(--project-transition-2);
}

.repo p {
    color: var(--text-color);
    font-family: var(--p-font);
    text-decoration: underline;
}

/* === FOOTER === */
footer {
    box-sizing: border-box;
}

footer p,
footer a {
    font-family: var(--p-font);
    color: var(--text-color);
}

.links div {
    cursor: pointer;
}

.links a {
    transition: var(--footer-transition-1);
}