@font-face {
    font-family: "main";  /* name you give to the font */
    src: url("font/RETROTECH.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "para";  /* name you give to the font */
    src: url("font/ari-w9500.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #0d0d0d; /* Couleur de secours */
}

h1, p {
    text-align: center;
}

h1 {
    color: #61f94c; /* Couleur des titres */
    font-family: "main", sans-serif;
    font-size: xxx-large;
}

p {
    color: #0faf17; /* Couleur du texte */
    font-family: "para", sans-serif;
    font-size: x-large;
}

ul {
  padding-left: 0;  /* enlève le décalage par défaut */
  margin-left: 0;
}

li {
  list-style-type: square;
  list-style-position: inside;
}



.main {
    position: relative;
    width: 100% - 50px;
    height: 50vh;
    background-color: black;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;

    /* Empêche les marges enfants de "faire bouger" .main */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;          /* espace entre h1 et p sans margin */
    padding: 0 24px;    /* respirations latérales */
}

.main h1 {
    font-size: 5em;
}

.main p {
    font-size: 2em;
    margin: 100px 0;
}

.main .pfp {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none; /* l'image ne capte pas la souris */
}

.projets {
    display: flex;
    justify-content: space-around; /* espace entre les projets */
    align-items: center; /* aligne verticalement */
    flex-wrap: wrap;
}

.projet {
    margin-top: 20px;
    background-color: rgb(95, 95, 95);
    width: 500px;  /* fixe une largeur */
    height: 670px; /* fixe une hauteur */
    border-radius: 10px;
    text-align: center;
}

.projet img {
    width: 35px; /* taille de l'image */
    height: 35px; /* taille de l'image */
    border-radius: 50%;
    margin-top: 10px;
}

.projet:hover {
    box-shadow: 10px 10px 20px rgba(240, 240, 240, 0.5);
    transform: scale(1.05) rotate(-5deg); /* rotation de 20 degrés */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.back-home {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #61f94c; /* couleur de fond */
    color: black; /* couleur de la flèche */
    font-size: 2em;
    padding: 10px 15px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-home:hover {
    transform: scale(1.2);
    background-color: #0faf17;
}