/* 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);

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

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

html{
    scroll-behavior: smooth;  
}

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

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

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

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;

    background-color: #1F1F1F;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

textarea {
    resize: none;
}

label {
    display: block;
}


/* Responsive */
@media (max-width: 640px) {
    .container {
        padding: 1rem;
    }
    
    .title {
        font-size: 1.25rem;
    }
}