ul {
   padding: 0;
   margin: 0;
}

.p {
   margin: 0;
}

body {
   font-size: 16px;
   font-family: sans-serif;
   font-weight: 500;
   padding: 0;
   margin: 0;
   background-color: black;
}

/* GRID SETUP */

.projectslist{
   padding: 3vw;
   padding-top: 0;
   padding-bottom: 0;
}

.grid-container {
   display: grid;
   grid-template-columns: 1fr;
   grid-auto-rows:72vw;


}

.descript {
   display: none;
}

main{
   padding-top: 9vh; /* Adjust based on header height */
   margin: 0;
   width: 100%;
}

.project {
   padding-bottom: 18px;
   text-align: center;
   justify-content: center;
}

.project p {
   margin: 0;
}

.project img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}



/* TEXT SETUP */

p {
   text-decoration: none;
   color: white;
   
}


/* FOOTER SETUP */


/* Fixed header for the author name */
.fixed-header {
   position: fixed;
   font-size: 2em;
   top: 0;
   left: 0;
   width: 100%;
   background-color: black;
   z-index: 1000;
   text-align: center;
   padding-bottom: 3px;
   padding-top: 3px;
   justify-content: center;}
 


  .authorname h1 {
    font-size: 1.1em;
    letter-spacing: -0.02em;
   margin: 0;
   color: white;
   padding-bottom: 5px;
   font-weight: 500;
 }

.sitetext {
   background-color: #606060;
   margin: auto;
   width: 310px;
   border-radius: 6px;
   font-size: 0.6em;
   padding: 2px;
   margin-bottom: 10px;
   letter-spacing: -0.02em;
}

.sitetext a {
   font-weight: 500;
   color: rgb(0, 0, 0);
   text-decoration: none;
   padding: 16px;
}

.sitetext a:hover {
   color: rgb(255, 255, 255);
}

#act {
  color: rgb(255, 255, 255);
}


 

/* Text Element for Mobile */
#project-label {
   position: fixed;
   top: 25%;
   left: 50%;
   transform: translate(-50%, 0);
   color: white;
   font-size: 1.3em;
   font-weight: 300;
   z-index: 10; /* Above the grid-container */
   pointer-events: none; /* Avoid blocking user interaction */
   text-align: center;
}

/* Lower opacity for .project when active */
.project.active {
   opacity: 0.6;
   filter: blur(4px);
}

/* INTERACTION EFFECTS */




::selection {
  color: #7f7f7f;
   background: none;}

a::selection {
   opacity: 100%;
  color: black;
   background: none;}

   .topspace {
      height: 200px;
   }
   

.footer {
   height: 500px;
}




/* MEDIA QUERIES/RESPONSIVE*/

@media (min-width: 720px){
.projectslist{
   padding: 3vw;
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 10vw;
   padding-right: 10vw;
}

.grid-container {
   display: grid;
   grid-template-columns: 1fr;
   grid-auto-rows:54vw;

}

.topspace {
   display: none;
}

}

@media (min-width: 1100px){
   
   #project-label {
      display: none;
   }
   
   .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 18px;
}
   

   .authorname p {
   display: inline-block;
 

}

.grid-container {
   grid-auto-rows:36vw;

}

.projectslist {
   padding-left: 5vw;
   padding-right: 5vw;
}

.descript{
   display: none;
   
}

.project {
   padding-bottom: 0px;
}


#wiesbaden a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Wiesbadener</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Literaturtage</text></svg>") 32 0, auto;
}

#Jung a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Benjamin</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Jung</text></svg>") 32 0, auto;
}

#schoffel a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20'><rect width='100%' height='100%' fill='none' /><text x='50%' y='48%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Schöffel</text></svg>") 32 0, auto;
}

#duebi a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Stadt</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Dübendorf</text></svg>") 32 0, auto;
}

#lutze a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Kabinett</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Lütze</text></svg>") 32 0, auto;
}

#SF a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20'><rect width='100%' height='100%' fill='none' /><text x='50%' y='48%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Suisse Frame</text></svg>") 32 0, auto;
}

#VAR a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Generated</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Imagery</text></svg>") 32 0, auto;}

#BLT a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Blatter</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Ultrastyle</text></svg>") 32 0, auto;}

#NUNO a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>nuno</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>popcorn</text></svg>") 32 0, auto;}

#CIB a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20'><rect width='100%' height='100%' fill='none' /><text x='50%' y='48%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>CISB</text></svg>") 32 0, auto;
}

#HWC a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='100%' height='100%' fill='none' /><text x='50%' y='20%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Handle</text><text x='50%' y='36%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>With Care</text></svg>") 32 0, auto;}

#OIS a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20'><rect width='100%' height='100%' fill='none' /><text x='50%' y='48%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>ORIS</text></svg>") 32 0, auto;
}

#WANG a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20'><rect width='100%' height='100%' fill='none' /><text x='50%' y='48%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Chez Wang</text></svg>") 32 0, auto;
}

#NARR a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20'><rect width='100%' height='100%' fill='none' /><text x='50%' y='48%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Das Narr</text></svg>") 32 0, auto;
}
	
#BANKS a:hover {
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20'><rect width='100%' height='100%' fill='none' /><text x='50%' y='48%' font-family='sans-serif' font-weight='200' font-size='20' dominant-baseline='middle' text-anchor='middle' fill='white'>Banks</text></svg>") 32 0, auto;
}
	




.project a:hover {
   opacity: 60%;
   filter: blur(4px);
}


.footer {
   height: 100px;
   text-align: center;
}



}
   



   
   @media(min-width:1500px){  

.grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 18px;
   }
   
.grid-container {
   grid-auto-rows:18vw;
}

.projectslist {
   padding-left: 10vw;
   padding-right: 10vw;
}
     
.sitetext p {
   padding-left: 33vw;
   padding-right: 33vw;}

   }