@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Variables */
@import url(variables.css);

/* Animation */
@import url(animation.css);

/* Layout */
@import url(layout/header.css);
@import url(layout/main.css);
@import url(layout/footer.css);

/* Section */
@import url(layout/section/about.css);
@import url(layout/section/facts.css);
@import url(layout/section/projects.css);
@import url(layout/section/skills.css);
@import url(layout/section/contact.css);

/* Components */
@import url(components/loader.css);
@import url(components/button.css);
@import url(components/arrow.css);

/* *{
    outline: solid red 2px;
} */

html{
    scroll-behavior: smooth;  
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;

    font-family: "Inter";

    height: 100vh; /* A Remplacer par 100% quand il y à du contenu */

    color: var(--default-text-color);
    background: var(--default-background-color);
}

section{
    margin-top: 50px;
}

section h2{
    font-size: 3em;
}

/* underline animation */
.link{
    position: relative;
    color: var(--title-text-color);
    text-decoration: none;
}

.link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.1em;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.link:hover::after {
    transform: scaleX(1);
}

/* progress bar */
#progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 7px;
    background-color: var(--default-text-color);
    width: 0%;
    z-index: 9999;
}

/* Graphique des contributions */
.bonus{
    display: flex;
    flex-direction: column;
    background-color: var(--default-text-color);
    color: var(--default-background-color);
    padding: 1em 0.5em;
    border-radius: 12px;
}

.bonus h3{
    font-size: 1.7em;
    text-align: center;
    font-weight: 300;
    margin-top: 0;
}

.bonus #contribution{
    width: 100%;
}