/* General container styling */
.container {
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  margin: 6rem auto;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  overflow: hidden;
}

/* Row for two-column layout 

- Max vewing hight of 50 
- Viewing width of 80 
- Two equal sized columns */
.row {
  display: flex;
  flex-direction: row;
  width: 60vw;
  overflow: visible; /* ✅ allow content to grow */
}
  
/* Left column: Photo 

- covers entire container
- matches text-column 
- centered and justified */
.photo-column {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border: .2rem solid pink;
  overflow: hidden;
}

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

  /* Right column: Text 
  
  - vertical scrolling 
  - centered and justified text */
 .text-column {
  flex: 1;
  padding: 1rem;
  flex-direction: column;
  text-align: justify;
  overflow: visible;   /* ✅ allow full text flow */
  user-select: text;
  font-size: 1.25rem; 
}

.text-column em {
  font-style: normal;
  font-size: 2rem;
}

  /* Generic Text Section
  
  - Fun-fact 
  - Project intro 
  - Coming soon */
.text-generic {
  width: 80vw;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  user-select: text;
}

/* Horizontal line Styling */
.line {
  width: 80%; 
  margin: 2rem; 
  border-color: #ccc; 
}
  
  /* When screen size is less than 650px:
  
  - Photo/Text Columntransitions to single column content
  - Text overflow is visible 
  - Vewing width equal to 80 */
@media (max-width: 1024px) {
  .row {
    flex-direction: column;
    max-height: none;
    width: 80vw;
    align-items: center;
  }

  .photo-column, .text-column {
    height: auto;
    width: auto;
  }

  .text-column {
    flex: 1; 
    max-width: 100%; 
    margin: 0;
    padding: 0;
    text-align: justify;
    overflow-y: visible; 
  }
}