/* Setup and Base style */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex; /* align to center*/
  background-color: #efefef; /* off-white */
  color: #1a1a1a;
  font-family: 'Bodoni Moda', serif;
  min-height: 100vh;
  
  align-items: flex-start;
  justify-content: center;
  padding: 40px 0;
}

main {
    display: flex;
    flex-direction: column;

   /* limit page width for all*/
    width: 100%;
    max-width: 1400px;
    padding: 80px 60px;
    
    gap: 150px; /* gap between sections */
}


/*##########*/

/* Shared class */
.image-box {
    display: block;
    background-color: #888;
    border-radius: 10px;
    width: 100%;
}

/* 00 front page */

.section-zero-container {
    display: grid;
    width: 90vw; /*90% screen*/
    height: 90vh; /*90% screen*/
    grid-template-columns: 1fr 1.2fr; /* right col like 20% larger*/
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
    justify-content: center;
}
/* |flex|, clamp height */
.zero-left-column { 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}
/* ai was used for the image wrappers because I had no clue how to fix the images being so big without hardcoding the source link*/
.zero-image-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.zero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
}
.zero-image-wrapper:hover img {
    transform: scale(1.05);
    transition: transform 0.5s ease;
}
/* |flex| */
.zero-right-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 0;
}
/*"My |flex|
   Portfolio"*/
.zero-title {
  display: flex;
  flex-direction: column;
  font-size: clamp(4rem, 9vw, 11rem); /* */
  font-weight: 400;
  line-height: 0.85; /* tight, but not too tight*/
  letter-spacing: -0.05em; /*little smaller than element font size*/
  text-transform: uppercase;
}
.zero-line-1,
.zero-line-2 {
  display: block;
}
/* =flex= */
.zero-footer-row { 
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-right: 40px;
}
.zero-name {
  font-size: 1.2rem;
  color: #888; /* slight contrast? */
}
.zero-tag {
  font-family: Tahoma, sans-serif;
  font-weight: 600;
  font-size: .8rem; /* like 20% smaller */
  text-transform: uppercase; /* like 20% cooler */
  color: #000; /*black*/
}


/* 01 about me */

.section-second-container{
  display: grid;
  grid-template-columns: 1fr 2.5fr; /* left col text, right col 2.5 -> 0.8fr 1fr */
  gap: 60px;
  align-items: start;

  /* width: 90vw; /*90% screen*/
  /* max-width: 1400px; /*cap for large screens*/
  /* padding: 40px 60px; */
}

.text-content {
    margin-top: 10px;
    min-width: 250px;
}
.second-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1;
}
.second-description {
    font-size: 1.5rem;
    line-height: 1.5;
    color: #333;
    max-width: 300px;
}
/* something here is buggy w/ resizing*/
.second-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}
.second-box-tall {
    grid-row: 1 / span 2;
    grid-column: 1;
    height: 100%;
    min-height: 400px;
    min-width: 200px;
}
.second-box-wide { 
    /*force aspect ratio for vertical box*/
    aspect-ratio: 16 / 10; 
    grid-column: 2;
}


/* 02 projects */

.section-third-container{
  display: grid;
  grid-template-columns: .8fr 1fr; 
  gap: 40px;
  align-items: center;
}

.third-headline {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
}

.third-body{
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 420px;
}

.third-image {
    aspect-ratio: 1.2 / 1;
}


/* 03 04 experience & skills */

.section-fourth-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    min-height:  600px;
}
.fourth-image {
    height: 100%; /*fill height of grid row*/
    min-height: 400px; /*mobile sizing*/
}
.fourth-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /*push to top and bottom*/
    padding: 20px 0;
}
.fourth-exp-block{
    max-width: 400px;
}
.fourth-skill-block { /*align bottom section correctly*/
    align-self: center;
    margin-top: 40px;
     max-width: 400px;
}

.fourth-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.fourth-item {
    margin-bottom: 2rem;
    font-size: 1.2rem;
    color: #333;
    display: block;
    margin-bottom: 0.5rem;
}


/* 05 contact */

.section-fifth-container{
  display: grid;
  grid-template-columns: .8fr 1fr; 
  gap: 40px;
  align-items: center;
  /* maybe dark for last section */
}

.fifth-headline {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    font-style: underline;
}

.fifth-body{
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 420px;
}

.fifth-image {
    aspect-ratio: 1.2 / 1;
}




@media (max-width: 900px) {

    main{
        padding: 40px 20px;
        gap: 80px;
    }

    .section-zero-container {
        grid-template-columns: 1fr; /* stack*/
        height: auto;
        gap: 40px;
    }


    
    .section-second-container,
    .section-third-container,
    .section-fourth-container,
    .section-fifth-container {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: auto;
    }

    /* stack images for 01 */
    .second-grid {
        display: flex;
        flex-direction: column;
    }
    /* looked bad otherwise*/
    .second-box-tall {
        aspect-ratio: 3/4;
    }

    .fourth-image {
        min-height: 250px;
        aspect-ratio: 3/4;
    }
    .fourth-content {
        gap: 30px;
    }
}