@font-face {
    font-family: "Amsterdam";
    src: local("Amsterdam"),
        url("../fonts/amsterdam/Amsterdam-ZVGqm.ttf") format("opentype")

}

@font-face {
    font-family: "bebas";
    src: local("Bebas"),
        url("../fonts/bebas/BebasNeue-Regular.ttf") format("opentype")

}

@font-face {
    font-family: "radikal-thin";
    src: local("Radikal"),
        url("../fonts/Radikal/Radikal-Thin.otf") format("opentype");
  }

    @font-face {
        font-family: "radikal-medium";
        src: local("Radikal"),
            url("../fonts/Radikal/Radikal-Medium.otf") format("opentype");
    }
  
  /* @font-face { */
    /* font-family: "Radikal"; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* src: url("../fonts/Radikal/Radikal.woff2") format("woff2"), */
         /* url("../fonts/Radikal/Radikal.otf") format("opentype"); */
  /* } */
  /*  */
  /* @font-face { */
    /* font-family: "Radikal"; */
    /* font-weight: 700; */
    /* font-style: normal; */
    /* src: local("Radikal2"), */
        /* url("../fonts/Radikal/Radikal-Bold.woff2") format("woff2"), */
         /* url("../fonts/Radikal/Radikal-Bold.otf") format("opentype"); */
  /* } */
  /*  */
  /* @font-face { */
    /* font-family: "Radikal"; */
    /* font-weight: 900; */
    /* font-style: normal; */
    /* src: local("Radikal3"), */
        /* url("../fonts/Radikal/Radikal-Black.woff2") format("woff2"), */
         /* url("../fonts/Radikal/Radikal-Black.otf") format("opentype"); */
  /* } */
  /*  */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    color: white;
    overflow-x: hidden;
    background: radial-gradient(circle at center,  #3c3a3a, rgba(30, 30, 30, 255) );
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 55px;
    display: flex;
    height: 9vh;
    width: 100%;
    background-color: #1a1919;
    box-shadow: 1px 1px 10px orange;
    z-index: 100;
}


nav ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

@media (max-width: 1000px) {
    #logo-lopez {
        display: none;
    }
    nav ul li {
        font-size: calc(0.75em + 2vmin);
        font-family: "bebas";
    }
}

@media (min-width: 1000px) {
    
    nav ul li {
        font-size: calc(0.75em + 3vmin);
        font-family: "bebas"
    }
}

#logo-lopez {
    height: 100%;
}

#logo-href {
    height: 100%;
}

.unclassed-li {
    list-style-type: none;
}

nav ul li a {
    color: white;

/* Ajouter une transition pour créer l'effet progressif */

    /* transition: 0.4s ease-in-out; */
}

nav ul li a {
    position: relative;
}

nav ul li a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: orange;
  transition: width 0.4s ease-in-out;
}

nav ul li a:hover:before {
  width: 100%;
}

nav ul li a:hover {
    color: orange;
    transition: 0.4s ease-in-out;
}

a:visited{text-decoration:none;color:white;}

a:link{text-decoration:none;color:white;}