@font-face{
    font-family:'Jacquard';
    src: url('assets/Jacquard12-Regular.ttf');
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
      line-height: 1;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* hide any default scrollbars */
  height: 100%;     /* ensure full height for the container */


  
}

.container {
  /* display: flex;         
  flex-direction: row;     
  overflow-x: auto;        
  overflow-y: hidden;      
  width: 100vw;
  height: 100vh;            */

    width: 100vw; /* Or a specific width */
        height: 100vh; /* Or a specific height */
        overflow-x: scroll; /* Enable horizontal scrolling */
        overflow-y: hidden; /* Hide vertical scrollbar if not needed */
        position: relative;

}


.background {
  position: relative;
  height: 100vh;         
  width: auto;           
  display: inline-block; 
}

.bg-img {
  height: 100%;        
  width: auto;           
  display: block;
  pointer-events: none; 
  z-index: 0; 
}
.section {
 flex: 0 0 100vw;        
  height: 100vh;
}

.item{

    position: absolute; /* <-- anchor stays to a specific spot */
  transform: translate(-50%, -50%); /* center alignment */
  display: block;
  z-index:10;
 
}
.itemimg{
  height: 15vh;
    pointer-events: auto; 
}

.itemimg:hover {
  cursor: url("assets/zoomin.png") 16 16, auto;
}

.gridparent{
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.leftside{
  display:grid;
  grid-column:1;
  grid-template-rows: repeat(4, min-content);
  gap: 0;                 
  align-items: start;     
  justify-items: start;
  margin-top:5vh; 
}

.rightside{
  display:grid;
  grid-column:2;
}


.zoomout{
    cursor: url("assets/zoomout.png") 50 50, auto;
    text-decoration:none;
}


.itemtitle{
  font-family: "Jacquard", 'Helvetica', serif;
  font-size: clamp(50px, 7vw, 90px);
  z-index:10;
}
.title{
  font-family: "Jacquard", serif;
  font-size: clamp(40px, 7vw, 80px);
  position:fixed;
  width:40vw;
  color:black;
 text-shadow: 2px 2px 10px white;
}

h4{
    font-family: "Jacquard", 'Helvetica', serif;
    font-size: clamp(25px, 7vw, 50px);
      margin-top: clamp(0vh, 7vw, 2vh);
  font-weight:300;
    margin-left: 5vw;
}

.zoomout:link, .zoomout:visited, .zoomout:hover, .zoomout:active {
  color: inherit;
  text-decoration: none;
}


.itemdescription{
  margin-top: clamp(2vh, 7vw, 10vh);
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size: clamp(10px, 7vw, 20px);
  font-weight:100;
  line-height: clamp(1, 7vw, 1.5);
  margin-right:clamp(5vw, 7vw, 2vw);
  margin-left: clamp(5vw, 7vw, 2vw);
}


  .rightside img {
    width: 50vw;
  }
@media (max-width: 700px) {
  .gridparent {
    grid-template-columns: 1fr;
  }

  .leftside, .rightside {
    grid-column:1;
  }

  .rightside img {
    width: 70vw;
    justify-content:center;
  }
}

.home{
font-family:'Helvetica', sans-serif;
font-size:20px;
color:black;
position:fixed;
 text-shadow: 2px 2px 10px white;
}