@font-face {
    font-family: barcode;
    src:url("./fonts/barcode.ttf");
}
/* Set the background color and font for the page */
body {
  background-color: rgba(0, 0, 0, 1);
 z-index:1;
 margin:0;
 margin-top:-1.5%;

 width:100%;
 height:100%;

}

#flipedc {
position: absolute;
z-index:-1;
width: 50%;
height:102%;
transform: rotate(180deg) scaleX(-1);
    right:0;
    margin-top:-2%;
}
#normalc {
position: absolute;
width: 50%;
height:102%;
z-index:-1;
margin-top:-2%;
right:50%;
}

.picture-text {
    
    display: block;
  font-family: 'barcode', sans-serif;
    position: absolute;
  bottom: 0;
  left: 5%;
  font-size:5vw;
   z-index: 10;

   background-color: rgba(0, 0, 0, 0.7);
 pointer-events: none;
   margin:0;
}
a{
color: white;
 
  text-decoration: none;
      
    
}

div span { 
      
    color: white; 
    overflow: hidden;    
} 
/* Style for the big DeSarde sign */
#desarde-sign {
    box-shadow: 0vw 0vw 0.5vw 0.1vw #ffffff;
	margin-top: 2.5%;
  border-radius: 0.2vw;
  border-style: double;
  border-width: 0.3vw;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  width: fit-content;
  font-family: 'barcode', sans-serif;
  background:linear-gradient(to right, white 50%, black 50%) bottom,
    linear-gradient(to right, black 50%, white 50%) top;
   z-index:10;
  font-size: 10vw;
  letter-spacing: 0.8vw;
  padding: 0.04vw;

  text-align: center;
  text-shadow: 0.1vw 0.1vw #000000;
}
.project-container{
   
    border-radius: 0.5vw;
    margin-top:3vw;
  background-color: rgba(0, 0, 0, 0.9);
  width:80%;
  height:32vw;
  left:50%;
   transform: translateX(-50%);
    position:relative;
    white-space: normal;
    overflow: auto;
    box-shadow: 0vw 0vw 1vw 0.1vw #ffffff;
  
}
.project-image-container{
    position:relative;
    width:100%;
    padding: 1vw;
    
}


  
.project-image-container-text{
    
    border-bottom: 0.1vw dotted white;
  color:white;
    position: relative;
  text-align:left;
  left: 28vw;
  font-size:1.5vw;
  top: 5vw;
   z-index: 10;
 padding:0;
width:65%;
 
   margin:-2.5vw;
    
    
}  



/* Style for the smaller rounded rectangles below */
.project-image {
  border-radius: 1vw;
  box-shadow: 0vw 0vw 0.5vw 0.1vw #ffffff;
  transition: box-shadow 0.3s ease-in-out;
  margin:2vw;
   display:block;
   padding:0;
  overflow: hidden;
  width: 22vw;
  height: 11vw;
   text-align: center;
background-color:rgba(0, 0, 0, 0.8);
  position:relative;
    
}

.project-image:hover,.project-image img:hover{
    box-shadow: 0vw 0vw 1vw 0.6vw #ffffff;
   filter: blur(0vw);
  
  transition: box-shadow 0.3s ease-in-out;
  transition: filter 0.2s ease-in-out;
}


/* Style for the image inside the project image */
.project-image img {
  
  transition: filter 0.2s ease-in-out;
    filter: blur(0.2vw);
  -webkit-filter: blur(0.2vw);
  width: 100%;
  
  position:relative;
}

/* Style the scrollbar */
::-webkit-scrollbar {
  width: 0.3vw; /* Set the width of the scrollbar */
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 1); /* Set the background color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 0, 0, 1); /* Set the color of the scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 0, 0, 1); /* Set the color of the scrollbar thumb on hover */
}








/* Style the scrollbar */
#container::-webkit-scrollbar {
  width: 0.3vw; /* Set the width of the scrollbar */
}

#container::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 1); /* Set the background color of the scrollbar track */
}

#container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 0, 0, 1); /* Set the color of the scrollbar thumb */
}

#container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 0, 0, 1); /* Set the color of the scrollbar thumb on hover */
}












/* Create a flex container for the project images */
.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer{
    height:2.5%;
    left: 50%;
    width:100%;
  transform: translateX(-50%);
    z-index:20;
    position:absolute;
    bottom:-2.5%;
    font-size:1vw;
    color: white;
    background-color: rgba(0, 0, 0, 1); 
     text-align: center;
}
/* Set the width of the project images to fit three on a row */