@font-face {
    font-family: ANTA ;
    src: url(../_fonts/Anta-Regular.ttf);
}

@font-face {
    font-family: GEO ;
    src: url(../_fonts/Geo-Regular.ttf);
}


body {
    margin: 0;
    /* background: linear-gradient(180deg, rgba(77, 74, 217, 1) 0%, #000000 50%) ; */
    background-color: rgb(231, 230, 240);
    background-repeat: no-repeat;
    background-size: 100%;
    background-origin: border-box;
    /* position: relative; */
    
}

.content {
    position: relative; /* Garde le contenu au-dessus de l’arrière-plan */
    z-index: 1;
    /* color: white; couleur que tu veut */

}


.content {
    margin: 2% 15% 2% 15%;
    
}

header {
    top: 0;
    position: sticky;
    background-color: rgba(222, 221, 240, 0.6);
    box-shadow: 1px 1px 5px rgba(76, 74, 217, 0.4);
    backdrop-filter: blur(3px);
    padding: 1% 0 1% 0;
    z-index: 3;
}

header nav .home {
    display: flex;
    color: rgba(76, 74, 217, 1)
}

header nav .navlist {
    display: flex;
    justify-content: flex-end; text-decoration: none;
    align-items: center;
    list-style-type: none;
    color: rgba(76, 74, 217, 1); text-decoration: none;   
}

header nav li {
    margin-left: 50px;
    color: rgba(76, 74, 217, 1); text-decoration: none;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: ANTA, sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0 15% 0 15%;
}

header nav a:link {
    color: rgba(76, 74, 217, 1); text-decoration: none;
}

header nav a:visited {
    color: rgba(76, 74, 217, 1); text-decoration: none;
}

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: GEO;
    font-size: 52px;
    color: rgb(76, 74, 217);
}

.projects {
    margin: 3% 0 3% 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
    grid-auto-rows: 250px; /* Hauteur par défaut des rangées */
    gap: 15px; /* Espacement entre les éléments */
    max-width: 70%;
    margin: auto;
}

.box {
  background-color: rgba(76, 74, 217, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: end;
  justify-content:start;
  color: rgb(231, 230, 240);
  font-weight: bold;
  font-size: 20px;
  font-family: ANTA, sans-serif;
  overflow: hidden;
  box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.1);
}

.box img:hover {
    scale: 120%;
    opacity: 100%;
}

.box1 {
    grid-column: span 1;
    position: relative;
}
  
.box1 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    border-radius: 10px;
    transition: 0.5s;
}

.box1 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box1 .btg {
    padding: 20px;
    z-index: 2;
}

.box2 {
    grid-column: span 2;
    position: relative;
}

.box2 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box2 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    border-radius: 10px;
    transition: 0.5s;
}

.box2 .dhcpdns {
    padding: 20px;
    z-index: 2;
}


.box3 {
    grid-column: span 2;
    position: relative;
}
    
.box3 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    border-radius: 10px;
    transition: 0.5s;
}

.box3 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box3 .guide {
    padding: 20px;
    z-index: 2;
}

.box4 {
    grid-column: span 1;
    position: relative;
}

.box4 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    border-radius: 10px;
    transition: 0.5s;
}

.box4 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box4 .pfsense {
    padding: 20px;
    z-index: 2;
}
  
.box5 {
    grid-column: span 1;
    position: relative;
}

.box5 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box5 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    position: absolute;
    border-radius: 10px;
    transition: 0.5s;
}

.box5 .agdlp {
    padding: 20px;
    z-index: 2;
}

.box6 {
    grid-column: span 2;
    position: relative;
}

.box6 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box6 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    border-radius: 10px;
    transition: 0.5s;
}

.box6 .site {
    padding: 20px;
    z-index: 2;
}

.box7 {
    grid-column: span 2;
    position: relative;
}

.box7 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box7 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    position: absolute;
    border-radius: 10px;
    transition: 0.5s;
}

.box7 .web {
    padding: 20px;
    z-index: 2;
}

.box8 {
    grid-column: span 1;
    position: relative;
}

.box8 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box8 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    position: absolute;
    border-radius: 10px;
    transition: 0.5s;
}

.box8 .glpi {
    padding: 20px;
    z-index: 2;
}

.box9 {
    grid-column: span 1;
    position: relative;
}

.box9 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box9 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    position: absolute;
    border-radius: 10px;
    transition: 0.5s;
}

.box9 .mail {
    padding: 20px;
    z-index: 2;
}

.box10 {
    grid-column: span 2;
    position: relative;
}

.box10 a {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
}

.box10 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 20%;
    position: absolute;
    border-radius: 10px;
    transition: 0.5s;
}

.box10 .centreon {
    padding: 20px;
    z-index: 2;
}

footer {
    background-color: rgba(222, 221, 240, 0.6);
    box-shadow: 1px 1px 5px rgba(76, 74, 217, 0.4);
    backdrop-filter: blur(3px);
    padding: 1% 0 1% 0;
    font-size: 18px;
}

footer .footer_content {
    margin: 0 15% 0 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: ANTA, sans-serif;
    color: rgba(76, 74, 217, 1); text-decoration: none;
}

footer .contact {
    display: flex;
    align-items: center;
    /* border: 5px solid red; */
       
}

footer .contact .mail {
    display: flex;
    margin-left: 30px;

}

footer .copyright {
    display: flex;
    align-items: center;
    /* border: 5px solid red; */
    
    /* text-transform: uppercase;  */
}

footer .copyright .copymoi {
    margin-left: 30px;
}