@font-face {
    font-family: 'police1';
    src: url('/font/Inter-SemiBold.woff2') format('woff2'),
         url('/font/Inter-SemiBold.woff') format('woff');
}

body {
    text-transform: lowercase;
}

#mobile {
    visibility: hidden;
}

#deskstop {
    visibility: visible;
}

#burger {
    position: absolute;
    top: 0;
    right: 0;
      
}


 header{ 
   font-size: 1.2vw;
    font-family: police1, sans-serif;
    background-color: white;
    border-color: black;
    border: 1px;
    border-style: solid;
    width: 100%;
    height:28px;
    line-height: 10px;
 }

#uplink{
    position: fixed;
    right: 0;
    margin-right: 16px;
    padding-left: 16px;
}

#arriere-plan, img {
    /* width: 100%; */
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    object-fit: contain;
}

#arriere-plan1 {
    overflow-y: hidden;
    overflow-x: hidden;
    position: fixed;
    top: 46px;
    left: 10px;
    bottom: 10px;
    width: calc(65% - 40px);
    background-color: rgba(0, 0, 0, 0.08);
}

#arriere-plan2 {
    position: fixed;
    top: 46px;
    right: calc(20% + 20px);
    bottom: 10px;
    width: 15%;
    background-color: rgba(0, 0, 0, 0.08);
}

#arriere-plan3 {
    position: fixed;
    top: 46px;
    right: 10px;
    bottom: 10px;
    width: 20%;
    background-color: rgba(0, 0, 0, 0.08);
    overflow-y: scroll;
}

#arriere-planA {
    position: fixed;
    top : 46px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    background-color: rgba(0, 0, 0, 0.08);
}

#domaine {
    position: absolute;
    transform: translateX(4vw);
}

ul {
    margin: 10px;
    padding: 0;
    font-family: police1, sans-serif;
    font-size: 0.9vw;
}

li {
    list-style: none;
    display: inline-flex;
    width: 100%;
    position: relative;
    border-bottom: 1px solid black;
    cursor: url('media/rond.png'),default;
}

li:visited {
    color:rgb(86, 86, 86);
}

li:hover {
    color:rgb(122, 122, 122);
    cursor: crosshair;
}

p {
    font-family: police1, sans-serif;
    margin: 10px;
    margin-bottom: 0px;
    font-size: 1vw;
    width: fit-content;
}

h1 {
    font-family: police1, sans-serif;
    margin: 10px;
    margin-bottom: 0px;
    margin-top: 0;
    font-size: 1.8vw;
    width: fit-content;
}

h4 {
    font-family: police1, sans-serif;
    margin: 10px;
    font-size: 1.2vw;
    width: fit-content;
    text-decoration: underline;
}

h5 {
    font-family: police1, sans-serif;
    margin: 10px;
    font-size: 1vw;
    width: fit-content;
}

a {
    text-decoration: none;
    color:black;
}

#intro {
    font-family: police1, sans-serif;
    margin: 10px;
    font-size: 1.4vw;
}

#content {
    font-family: police1, sans-serif;
    margin: 10px;
    font-size: 1vw;
    width: fit-content;
   /* max-width: calc(65% - 40px);*/
}

#content ul {
    margin: 0;
}

#content li {
    list-style: none;
    display: block;
    width: 100%;
    position: relative;
    border-bottom: none;
    /*cursor: url(media/rond.png),default;*/
    cursor: e-resize;
    margin-bottom: 5px;
    color:black;
    line-height: 1.2vw;
}


a:hover {
    text-decoration: none;
    color:rgb(100, 100, 100);
    cursor: crosshair;
}

.scroller {
    top: 20px;
    left: 20px;
    width: calc(100%-20px);
    height: calc(100%-20px);
    overflow-y: scroll;
    scrollbar-color: rgb(167, 167, 167) rgb(24, 24, 24);
    scrollbar-width: thin;
}

#projet {
    position: absolute;
    top: 0;
    right: 0;
}

#proj-0 {
    visibility: visible;
}

.header1 {
    width: calc(100%-10px);
    display: grid;
    grid-template-columns: 90% 5% 5%;
    padding-top: 5px;
    margin-top: 5px;
    margin-left: 2px;
    margin-right:2px;
    height: 10px;
    visibility: visible;
  }

  .header-mobile {
    visibility: hidden;
  }

  .grid-item:nth-child(1) {
    text-align: left;
    margin-left:4px;
  }
  
  .grid-item:nth-child(2),
  .grid-item:nth-child(3) {
    text-align: right;
    margin-right: 4px;
  }

#proj-1,
#proj-2,
#proj-3,
#proj-4,
#proj-5,
#proj-6,
#proj-7,
#proj-8,
#proj-9,
#proj-10,
#proj-11,
#proj-12,
#proj-13,
#proj-14,
#proj-15,
#proj-16,
#proj-17,
#proj-18,
#proj-19,
#proj-20,
#proj-21,
#proj-22,
#proj-23,
#proj-24,
#proj-25,
#proj-26,
#proj-27,
#proj-28,
#proj-29, 
#proj-30,
#proj-31,
#proj-32,
#proj-33,
#proj-34,
#proj-35,
#proj-36,
#proj-37,
#proj-38,
#proj-39,
#proj-40,
#proj-41,
#proj-42,
#about {
    visibility: hidden;
}

#currentImage-proj-1,
#currentImage-proj-2,
#currentImage-proj-3,
#currentImage-proj-4,
#currentImage-proj-5,
#currentImage-proj-6,
#currentImage-proj-7,
#currentImage-proj-8,
#currentImage-proj-9,
#currentImage-proj-10,
#currentImage-proj-11,
#currentImage-proj-12,
#currentImage-proj-13,
#currentImage-proj-14,
#currentImage-proj-15,
#currentImage-proj-16,
#currentImage-proj-17,
#currentImage-proj-18,
#currentImage-proj-19,
#currentImage-proj-20,
#currentImage-proj-21,
#currentImage-proj-22,
#currentImage-proj-23,
#currentImage-proj-24,
#currentImage-proj-25,
#currentImage-proj-26,
#currentImage-proj-27,
#currentImage-proj-28,
#currentImage-proj-29,
#currentImage-proj-30,
#currentImage-proj-31,
#currentImage-proj-32,
#currentImage-proj-33,
#currentImage-proj-34,
#currentImage-proj-35,
#currentImage-proj-36,
#currentImage-proj-37,
#currentImage-proj-38,
#currentImage-proj-39,
#currentImage-proj-40,
#currentImage-proj-41,
#currentImage-proj-42,
#currentImage-proj-43 {
    cursor: e-resize;

}

body {
    cursor: crosshair;
    
}


#currentImage-about {
    display: none;
}

@media (max-width: 980px) {

     header {
        height: 50px;
        line-height: 12px;
    }

    h4 {
        font-size: 3vw!important;
        margin-top: 24px;
    }

    #mobile {
        visibility: visible;
        margin-right: 20px;
        position: relative;
    }
    
    #desktop {
        visibility: hidden;
    }

    #arriere-plan1 {
        top: 8vw;
        width: calc(100% - 20px);
    }

    #arriere-plan2 {
        top: 8vw;
        width: calc(100% - 20px);
        left: 10px;
        bottom: 10px;
        top:auto;
        padding-bottom: 10px;
        background-color: transparent;
    }

    #arriere-plan3 {
        top: 8vw;
        visibility: hidden;
        width: calc(100% - 20px);
        background-color: #ebebeb;
        left:10px;
    }

    h1 {
        font-size: 5vw;
    }

    p {
        top: 8vw;
        font-size: 3vw;
    }

    #domaine {
        position: absolute;
        transform: translateX(15vw);
    }

    
    #intro {
        top: 8vw;
        font-family: police1;
        margin: 10px;
        font-size: 2vw;
    }
    
    ul {
        top:8vw;
        margin: 10px;
        padding: 0;
        font-family: police1, sans-serif;   
    }
    
    li {
        list-style: none;
        display: inline-flex;
        width: 100%;
        position: relative;
        font-size: 3.2vw;
        line-height: 4vw;
    }

    #content li {
        list-style: none;
        display: block;
        width: 100%;
        position: relative;
        border-bottom: none;
        margin-bottom: 5px;
        font-size: 1.8vw!important;
        line-height: 3.5vw;
    }

    #arriere-planA {
        position: fixed;
        top : 8vw;
        right: 10px;
        left: 10px;
        bottom: 10px;
        background-color: rgba(0, 0, 0, 0.08);
    }

  /*  header{
        font-size: 3.5vw;
        font-family: police1, sans-serif;
        background-color: white;
        border-color: black;
        border: 1px;
       /* border-style: dashed; 
        border-style: solid;
        width: calc(100% - 10px);
        padding-left: 6px;
        padding-block: 3px 3px 3px 3px;
        display: grid;*/
        /*grid-template-columns: 1fr 1fr 1fr 1fr;*/
       /* display: table-cell;
    }*/

    #uplink{
        position: fixed;
        right: 0;
        margin-right: 16px;
        padding-left: 16px;
    }

    .header1 {
        visibility: hidden;
      }
    
    .header-mobile {
        font-size: 4vw;
        width: calc(100%-10px);
        display: grid;
        top:10px;
        grid-template-columns: 60% 20% 20%;
        margin-left:1%;
        margin-right:1%;
        height: 10px;
        visibility: visible;
       /* border: 1px solid black;*/
      }

      #content {
        font-family: police1,sans-serif;
        font-size: 2vw!important;
      }

}