@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    background-color: #D7005B;
    color: black;
}

.parent {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;

  background-image: url('p15-2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  height: 100vh;
  z-index: 0;
}

.text {
    color: #000000;
    mix-blend-mode: darken;
    z-index: 1000;
    position: relative; 
}

.nav_item {
  position: fixed;     
  top: 20px;         
  right: 30px;    
  z-index: 2000;  
}

.nav_item a {
  position: relative;         
  text-decoration: none;          
  color: #393939;
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.nav_item a:hover {
  color: #ff3190;
  transform: scale(1.1);
  mix-blend-mode: screen;
}

.nav_item a::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;                      
  transform: translateY(-50%);   
  height: 1.5px;                     
  background-color: currentColor; 
  width: 0;                     
  transition: width 0.4s ease;     
}

.nav_item a:hover::after {
  width: 100%;                  
}

h3 {
    font-size: 2vw;
    font-family: 'Lora', serif;
    font-weight: lighter; 
    z-index: 999;
}

.text-left{ 
    position: fixed; 
    left: 30px; 
    z-index: 999;
}

.text-left h1 { 
    font-size: 6vw; 
    margin: 0 0 -20px 0; 
    font-weight: 500; 
}
.text-left h2 { 
    font-size: 6vw; 
    margin: 16vh 0 -20px 0; 
    font-weight: 500; 
}
.text-left h3 { 
    font-size: 3.5vw; 
    margin: 20px 0 0 0;
    font-weight: 500;
}
.coords-right { position: fixed; top: 50%; right: 30px; font-size: 2.8vw; }

.bottom-left { 
    position: fixed; 
    bottom: 8%; 
    left: 30px; 
    font-size: 6vw; 
    margin: 0;
    font-weight: 500;
    line-height: 1;
    z-index: 999;
}

.fixed-bottom-text {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-left: 30px; 
  padding-right: 30px;
  font-size: 0.9rem;
  z-index: 999;
  pointer-events: none;
}

.caption-line{
    position: fixed; 
    top: 37.5vh; 
    right: 30px; 
    font-size: 6vw; 
    font-weight: lighter;
    z-index: 999;
    pointer-events: none !important;
}

.hover-texts.show h1,
.hover-texts.show h2,
.hover-texts.show h3 {
  opacity: 1;
}

.text-left,
.coords-right,
.bottom-left,
.fixed-bottom-text {
  pointer-events: none; /* allows hover to pass through */
}

.cell {
  background-size: cover;
  background-position: center;
  opacity: 0;               /* start hidden */
  height: 100%;
  margin: 0;
  border: none;
  mix-blend-mode: exclusion;
  transition: opacity 0.5s ease; 
  pointer-events: auto;
}

/* On hover, show the image */
.cell:hover {
  opacity: 1;
}


.second {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  padding: 150px 50px 150px 50px;
  min-height: 100vh;
  background-color: #000000;
  position: relative;
  z-index: 1000;
}

.cell-second {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.cell-second img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  mix-blend-mode: luminosity;
}

.cell-second img:hover {
  opacity: 0.6;
  transition: 2s;
  mix-blend-mode: normal;
}

/* default center text */
.hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Lora', serif;
  font-size: 1.5rem; /* default size */
  text-align: center;
  color: #000000;
  z-index: 2000;
  pointer-events: none;
  transition: font-size 0.3s ease, color 0.3s ease; 
  width: 90vw;
}


/* ensure your fixed text stays above */
.text {
  z-index: 999;
}


@media (max-width:1400px){
.nav_item a {
  font-size: 1.5rem;
}
.headline {
width: 85vw;
}
}

@media (max-width:1050px){
.nav_item a {
  font-size: 1.5rem;
}
}

@media (max-width:768px){
.nav_item {
  right: 30px;    
  z-index: 1000;  
}
.nav_item a {
  font-size: 3vw;
}

}