*{
    margin: 0;
    padding :0;
    box-sizing : border-box;
}

:root {
    --fond: #0d1117; 
    --fond-carte : #161b22 ;
    --texte : #c9d1d9 ; 
    --texte-doux : rgba(139,148,158,0.5);
    --accent : #58a6ff; 
}

html {
    scroll-behavior: smooth;
}

main{ 
    margin: auto; 
    text-align: left;
    padding-left: clamp(20px, 5vw, 80px) ;
    padding-right: clamp(20px, 5vw,80px);
}


body {
    background-color: var(--fond);
    font-family: 'Literata', sans-serif;
    line-height: 1.7;
    opacity: 1;
    transition: opacity 0.5s ease;
}

body.fade-out {
    opacity: 0;
}


.bouton_acceuil {
    height: 5vh;
    width: 10vw;
    border: 0.05vw solid var(--accent);
    position: absolute;
    top:47.5vh;
    left: 45vw;
    display: flex;
    align-items: center;
    justify-content: center ;
}

.couleur1 {
    color: var(--accent);
    text-decoration: none;
    font-family: 'Syne', sans-serif
}


.bouton_acceuil a:link,
.bouton_acceuil a:visited,
.bouton_acceuil a:hover,
.bouton_acceuil a:active {
    color: var(--accent);
    text-decoration: none;
    font-family: 'Syne', sans-serif;
}