html {
		height:100%;
		font-family: sans-serif;
		color:white;
		padding:0;
		margin:0;		
	}
		 body{
		min-height: 100vh;
		font-size: 200%;
		padding:0;
		margin:0;

	}
	.black{
		background:black;
	}
















/* Menu Container - Fixed to top right */
    .user-menu {
      position: fixed;
      top: 15px;
      right: 20px;
      z-index: 1000;
    }

    /* Trigger Button */
    .menu-trigger {
      background: #333;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .menu-trigger:hover {
      background: #555;
    }

    /* Dropdown Menu */
    .dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      min-width: 160px;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s ease;
    }

    /* Show the menu */
    .dropdown.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Menu Items */
    .dropdown a {
      display: block;
      padding: 12px 20px;
      color: #333;
      text-decoration: none;
      font-size: 14px;
      transition: background 0.2s;
    }

    .dropdown a:hover {
      background: #f5f5f5;
    }

    /* Divider */
    .dropdown hr {
      margin: 4px 0;
      border: none;
      border-top: 1px solid #eee;
    }

    /* Optional: User icon in button */
    .user-icon {
      width: 18px;
      height: 18px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }











.view:before{
	content: " \f06e";
	font-family: 'FontAwesome';
}
.comment:before{
	content: " \f0e5";
	font-family: 'FontAwesome';
}
.bigBuildingImage{
	width: 95%;
	margin: 10px auto;
	height: 50vh;
	border: thick solid red;
}


.itemArchImage:hover .review {
    opacity: 1;
    visibility: visible;
}

/*
	.review:hover{
		width: 100%;
		background:rgba(255, 255, 255, 0.6);
		color:black;
		cursor: pointer;
	}
	*/
	.gradient{
		height: 100%;
		width: 100%;
		position: absolute;
		top:0;
		left:0;
		background-image: linear-gradient(
		  to top,
		  rgba(0, 0, 0, 0.6) 0%,
		  rgba(0, 0, 0, 0.4) 20%,    
		  rgba(0, 0, 0, 0)   100%
		);
	}	
	
	.gradient{
		height: 100%;
		width: 100%;
		position: absolute;
		top:0;
		left:0;
		background-image: linear-gradient(
		  to top,
		  rgba(0, 0, 0, 0.6) 0%,
		  rgba(0, 0, 0, 0.4) 100%,    
		  rgba(0, 0, 0, 0)   100%
		);
	}	

	.gradient:hover{

		background-image: linear-gradient(
		  to top,
		  rgba(0, 0, 0, 0.0) 0%,
		  rgba(0, 0, 0, 0.0) 100%,    
		  rgba(0, 0, 0, 0)   100%
		);
		cursor: pointer;
	}	
	
	.white{
		background:white;
	}
	#logoInner{
		//display: none;
		padding: 30px;

		}
				
.hero-header {
position: absolute;          /* Overlays the spacer without pushing content */
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 0;
  text-align: center;
  pointer-events: none;
}
				

	.menuItems {
	  pointer-events: auto;
	    position: relative;
		z-index: 120;
	}
.menuItems .item {
  pointer-events: auto;
  cursor: pointer;            
  user-select: none;
  position: relative;
  z-index: 120;
  font-family: serif;
  font-weight: normal;
            
}		
	#logo_b{
		//display: none;
		padding: 30px calc(1px + 30vw);
		}
	
	#logo{
		//display: none;
		padding: 0;
		z-index: 10;
		width: 100%;
		box-shadow: 0 2px 12px rgba(0,0,0,0.08);
		//transition: all 0.3s ease;	
		align-self: flex-start;	

		}
		
		.logoAbsolute{
			position: fixed;
			top: 50%;
			transform: translate(0%, -50%);	
		}
		.logoSticky{
			position: sticky;
			top: 0;
		}
		.logoFixed{
			position: fixed;
			top: 50%;
			transform: translate(0%, -50%);
		}
		
	.hacTitle{
			font-family: "Inter", sans-serif;
				font-optical-sizing: auto;
				font-weight: 900;
		position: relative;
		background: black;
		z-index: 50;


	}	
		
	.revTitle{
			font-family: "Inter", sans-serif;
				font-optical-sizing: auto;
				font-weight: 900;
		position: relative;
		color:black;
		width: 100%;
		text-align: center;
		//font-size: clamp(12px, calc(12px + 5vw), 52px);
		font-size: calc(16px + 3vw);
	}	
	
	.revSubtext{
			font-family: serif;
				font-optical-sizing: auto;
				font-weight: 400;
		position: relative;
		color:black;
		width: 100%;
		text-align: center;
		//font-size: clamp(12px, calc(12px + 5vw), 52px);
		font-size: calc(7px + 1vw);
		margin: 20px 0 ;
	}		
			
.archItems {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;                    /* smaller gap on mobile */
  margin: 30px;
  position: relative;
  z-index: 0;
}

	.itemArch{
		display: inline-block;
		font-family: "Inter", sans-serif;
		font-optical-sizing: auto;
		font-weight: 300;
		font-size: calc(5px + 1vw);
		text-align: center;
		letter-spacing: .1em;
		flex: 0 1 calc(50% - 20px);
		text-align: center;
		background: black;
		height: calc(1px + 40vh);
		position: relative;
		transition: all 0.5s ease-in-out;
		box-shadow: 0 2px 12px rgba(0,0,0,0.08);	

	}
	


@media (max-width: 768px) {
	.itemArch{
		display: inline-block;
		font-family: "Inter", sans-serif;
		font-optical-sizing: auto;
		font-weight: 300;
		font-size: calc(5px + 1vw);
		text-align: center;
		letter-spacing: .1em;
		flex: 0 1 calc(50% - 20px);
		flex-basis: 100%; 
		text-align: center;
		background: black;
		height: calc(1px + 40vh);
		position: relative;
	}	
	
}


 
  .titleContainer{
		position: absolute;
		bottom: 0;
		/* height: 88px;*/
		width: 94%;
		/* right: 10px; */
		left: 3%;
		/* padding: 0 20px; */
  }
  
   .titleContainer .title{
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	border-bottom: 2px solid white;
	text-align: left;
	padding: 10px;
   }
    .titleContainer .info{
	    text-align: left;
		padding: 2px 10px;
		font-size:75%;
    }   
	.titleContainer .info div{
		display: inline-block;
		padding:1.2% 10px 5px 5px;
		text-align: right;
		
	} 
	.titleContainer .info div div{
		display: inline-block;
	}  
  .menuItems{
	  display: flex;
	  justify-content: space-between;
	  gap: 10px;
	  padding: 20px 0;

	  width: 100%;
  }
  


  .item:hover{
	  font-weight: 700;
	  cursor: pointer;
	  text-shadow: 10px 1px 50px rgba(100, 220, 255, 0.5);

  }
  
   .itemInner:hover{
	  font-weight: 700;
	  cursor: pointer;
	  color:white;
	  background:black;
	  transition: all 0.3s ease;

  } 
  .selected{
	  text-decoration: underline;
  }


  
  
/*  
 .inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
 div{
	  border:thin solid red;
  }

 */
 
 
 
 
 
	 @media  screen and (min-width:1300px) {	
	 /* LARGE SCREEN */
	
			.review{
				position: absolute;
				top:0;
				left:0;
				right:0;
				background:rgba(0, 0, 0, 0.6);
				color:white;
				padding: 3px;
				z-index: 100;
				opacity: 0;
				visibility: hidden;
			}

			 .itemArchImage{
				background-position: center center;
				background-size: cover;
			}

			.hacTitle{
				
				font-size:calc(5px + 4vw);
				text-align: center;
				letter-spacing: .1em;
				
			}
		  .item{
			display: inline-block;
			cursor: pointer;
			font-size:calc(5px + 1vw);
			text-align: center;
			letter-spacing: .1em;
			flex: 1;
			text-align: center;
		  }	
		  
		  .itemInner{
			display: inline-block;
			font-family: serif;
			font-optical-sizing: auto;
			font-weight: 300;
			font-size:calc(5px + 1vw);
			text-align: center;
			letter-spacing: .1em;
			flex: 1;
			text-align: center;
			color:black;  
		  }
  
		  .itemBlank{
			display: inline-block;
			font-family: "Inter", sans-serif;
			font-optical-sizing: auto;
			font-weight: 300;
			font-size:calc(5px + 1vw);
			text-align: center;
			letter-spacing: .1em;
			flex: 1;
			text-align: center;
		  } 		  
	
	}
		
	@media screen and (max-width: 1299px) and (min-width: 700px){	
	/* MID SCREEN */
	
	
			.review{
				position: absolute;
				top:0;
				left:0;
				right:0;
				background:rgba(0, 0, 0, 0.6);
				color:white;
				padding: 3px;
				z-index: 100;
				font-size:140%;
				opacity: 0;
				visibility: hidden;
			}	
	
			.itemArchImage{
					background-position: center center;
					background-size: cover;
				}
	
			.hacTitle{
				
				font-size:calc(10px + 3vw);
				text-align: center;
				letter-spacing: .1em;
			}
			  .item{
				display: inline-block;
				
				font-optical-sizing: auto;
				font-weight: 300;
				font-size:calc(5px + 2vw);
				text-align: center;
				letter-spacing: .1em;
				flex: 1;
				text-align: center;
			  }	
			  .itemInner{
				display: inline-block;
				font-family: serif;
				font-optical-sizing: auto;
				font-weight: 300;
				font-size:calc(5px + 1.2vw);
				text-align: center;
				letter-spacing: .1em;
				flex: 1;
				text-align: center;
				color:black;
			  }	
		  .itemBlank{
			display: inline-block;
			font-family: "Inter", sans-serif;
			font-optical-sizing: auto;
			font-weight: 300;
			font-size:calc(5px + 1vw);
			text-align: center;
			letter-spacing: .1em;
			flex: 1;
			text-align: center;
		  } 		  
			  		
	}
	
	@media  screen and (max-width:699px) {	
	/* SMALL SCREEN */	
			
	
			.review{
				position: absolute;
				top:0;
				left:0;
				right:0;
				background:rgba(0, 0, 0, 0.6);
				color:white;
				padding: 3px;
				z-index: 100;
				font-size: 200%;
				opacity: 0;
				visibility: hidden;
			}			
			.itemArchImage{
				background-position: center top;
				background-size: cover;
			}

			.hacTitle{
			
				font-size:calc(10px + 2vw);
				text-align: center;
				letter-spacing: .1em;
			}
		  .item{
			display: inline-block;
			
			font-optical-sizing: auto;
			font-weight: 300;
			font-size:calc(5px + 3vw);
			text-align: center;
			letter-spacing: .1em;
			flex: 1;
			text-align: center;
		  }
		  .itemInner{
			display: inline-block;
			font-family:serif;
			font-optical-sizing: auto;
			font-weight: 300;
			font-size:calc(5px + 1.5vw);
			text-align: center;
			letter-spacing: .1em;
			flex: 1;
			text-align: center;
			color:black;
		  }	
		  .itemBlank{
			display: none;
			
			flex: 1;
			text-align: center;
		  } 		  
		  		
			
	}