* {
    box-sizing: border-box;
  }

  

  /* GLOBAL STYLES */
    body{
        color: #907D90;
        font-family: "Irish Grover", system-ui;
        background-size: cover;
        background-repeat: no-repeat; 
        background-position: center;
        background-attachment: fixed; 
    }

    #Brief-container {
    display: flex;
    flex-direction: column;
    
}

    /* MENU */

    #menu-container{
        display:flex;
        flex:wrap;
        justify-content:space-evenly;
        font-size:1.2em;
        gap:170px;
    }

    #about-button, #home-button, #resume{
        transition: font-family 0.3s ease;
    }

    #about-button:hover,#home-button:hover,#resume:hover {
        font-family: "Inria Sans", sans-serif;
    }

    a {
        text-decoration: none; 
        color: inherit;
    }

    /* HOMEPAGE */

.portfolio-grid {
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center;     
  gap: 20px;               
  margin-bottom:50px;
}

.project {
  position: relative;
  display: block;
  max-width:350px;
  margin-top:5%;
}

.project img {
  width: 100%;
  height: 100%;     
  object-fit: cover;  
  display: block;
}

.overlay {
  position: absolute;
  inset: 0;
  background: #907d90ae; 
  color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.project:hover .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop hover */
.project:hover .overlay {
  opacity: 1;
}

/* Mobile tap state */
.project.active .overlay {
  opacity: 1;
  pointer-events: auto;
}

    .fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s ease, transform 1s ease;
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    #title-container{
        display:flex;
        flex:wrap;
        justify-content:center;
    }

    #profile{
        width:20%;
        height:100%;
    }

    #title{
        width:40%;
        height:100%;
        margin-top:3%;
    }

    #subtitle {
        font-size: .8em;
        display: flex;
        justify-content: center;
        margin-top: -20px;
        margin-left: 70px;
        text-align: center
    }

    .video{
        width:112px;
        height:63px;
    }

    .design{
        width:120px;
        height:75px; 
    }

    .graphic{
        width:112px;
        height:80px;
    }

    .photo{
        width:200px;
        height:130px;
    }

    .photo-container {
        display: flex; 
        justify-content: space-between; 
        max-width: 375px; 
        width: 100%;     
        margin: 0 auto;  
        gap: 20px;        
        margin-bottom:30px;
    }

    .photo-row {
    gap: 2px;         
    justify-content: center; 
    max-width: 800px;
    height: auto;
    margin-left:10%;
}

.girlvideos {
    margin-left:5%;
}


.photo-row .photo {
    width: 250px;      
    height: 250px;
    object-fit: cover;
}

.photo-wrapper {
    width: 260px;
    height: 360px;    
    overflow: hidden;  
    border-radius: 16px;   
}

.photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;      
    display: block;
}

.duo-row {
    display: flex;
    gap: 16px;         
    justify-content: center; 
    max-width: 800px;
    height: auto;
    
}

.photo-row img {
    max-width: 200px; 
    height: auto;
}

  
    .column1, .column2 {
        display: flex;
        flex-direction: column; 
        width: 48%;
        gap: 10px;
    }

    .column1{
        margin-left:10px;
    }
  
    .column2 {
        align-items: flex-end;
        margin-right:10px;
    }

    .column-title {
        text-align: center;
        width: 70%;
    }

    .photo-column-title{
        width: 70%;
    }

    .socials-column-title {
        white-space: nowrap;
        font-size:.8em;
        margin-top:2px;
    }

    /* ABOUT PAGE */

    #about{
        font-family: "Inria Sans", sans-serif;
        color:black;
        margin:30px;
    }

    .bold{
        font-weight:bold;
    }

    #profile{
        display:flex;
    }

    #profile-photo{
        width:190px;
        margin-left:20%;
    }

    #info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align:center;
        margin-top:30%;
        margin-left:60px;
    }

    #icons img{
        width:45px;
    }

    #icons{
        display: flex;
        justify-content: center;
        gap:30px;
        margin:20px;
    }

    .video-popup {
        position: absolute;
        display: none;
        background: rgba(255, 151, 205, 0.8);
        color: white;
        padding: 10px;
        border-radius: 5px;
        max-width: 250px;
        z-index: 1000;
    }

    .video-popup video {
        width: 100%;
        height: auto;
    }

    .popup-position {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 10px;
    }

    /* PHOTO DESCRIPTIONS */
    #photoinfo-container {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }

    #lighting-container {
        text-align: center; 
        max-width: 300px;
    }

    #title-photo{
        font-size:1.5em;
        margin-top:10px;
        margin-bottom:5px;
    }

    #description{
        font-family: "Inria Sans", sans-serif;
        font-size:.8em;
        margin-right:40px;
        margin-left:40px;
    }

    .slideshow {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }
    
    .arrows {
        position:fixed;
        width: 75%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
        margin-left: 10px;
        margin-top: -60px;
    }
    
    .arrow {
        background-color:#907D90;;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        user-select: none;
        width:5%;
        padding-right:5%;
    }
    
    .arrow:hover {
        background-color:#615361;;
    }

/* Converse Reborn */

#mockup-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .celebrity-insta-mockup {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
  }

  .tyler-mockup {
    margin-right: 0;
    margin-bottom:10px;
  }

  .depopwebsite {
  gap: 20px;            
  align-items: center;   
  max-width: 90%;
  margin-left:10%;
  }

  .cdsscreens {
     gap: 20px;            
  align-items: center;   
  max-width: 90%;
  }

  .brief-grid {
 margin-left:10%;
}

.tiktok{
    margin-top: 20px;
}

.trailer{
    width: 320px;
}

.left-image {
  grid-row: 1 / span 2;
  max-width: 50%;
  margin-left: 45%;
}

.brief-grid img {
  object-fit: cover;
  display: block;
  border-radius: 8px; 
}

  .celebrity-insta-mockup a {
    flex: 0 0 auto;
  }

  #mockup-container .photo {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
  }

  #mockup-container .photo:hover {
    transform: scale(1.05);
  }


  .celebrity-insta-mockup {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .celebrity-insta-mockup a,
  .tyler-mockup a {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #mockup-container .photo {
    max-width: 90%;
    width: 100%;
  }
  
  #mockup-container .tyler-photo {
    max-width: 240px;
  }

  #ConverseRebornTitle {
    font-size: 25px;
    color:black;
    text-align:center;
    font-family:'Lovelo', sans-serif;
    font-weight:900;
  }

  #RoleTitles {
    font-size: 15px;
    color:black;
    margin-left:15px;
    font-family:'Lovelo', sans-serif;
    font-weight:900;
  }

  #Disclaimer {
    font-size: 15px;
    color:black;
    margin-left:15px;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin-top:-10px;
  }

  .brief-summary{
    font-size: 15px;
    color:black;
    margin-left:15px;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin-bottom:10px;
  }

  .title-text{
    font-size: 15px;
    color:black;
    font-family:'Lovelo', sans-serif;
    font-weight:800;}

    #idea{
        font-size: 15px;
        color:black;
        margin-left:15px;
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }


@media (min-width: 900px) {
    
    /* MENU */

    #menu-container {
        font-size: 2em;
        display: flex;
        justify-content: space-between;
        margin-right: 5%;
        margin-left: 5%;
    }

    /* HOMEPAGE */

    #profile {
        width: 15%; 
        margin: 0;       
        display: block;
        align-items: center;
    }

    #title-container{
        margin-top:-100px;
    }

    #title{
        width:30%;
    }

    #subtitle{
        font-size:1.8em;
        margin-top:-45px;
        margin-left:12%;
    }

    .photo-container{
        max-width:900px;
    }

    .video{
        width:350px;
        height:100%;
    }
    
    .design{
        width:350px;
        height:240px; 
    }
    
    .graphic{
        width:350px;
        height:100%;
    }
    
    .photo{
        width:500px;
        height:100%;
    }

    .column-title {
        font-size:1.5em;
        margin-left:5%;
    }

    .photo-column-title{
        font-size:1.5em;
    }

    .socials-column-title {
        font-size:1.5em;
        margin-top:30px;
        margin-right:55px;
    }


    /* ABOUT PAGE */
    
    #about-container {
        display: flex;
        max-width: 1100px; 
        gap: 100px;       
        margin: 0 auto;  
        margin-top:-100px;
    }
    
    #about{
        margin:0px;
    }

    #info{
        font-size:1.6em;
        display:flex;
        flex-direction:row;
        gap:80px;
        margin-left:-355%;
        margin-top:-2px;
    }

    #icons{
        margin-top:56%;
        gap:10px;
    }

    #icons img{
        width:35px;
        margin-left:10px;
    }

    #profile-photo{
        width:400px;
        margin-top:110%;
        margin-left:25%;
    }

    #about{
        font-size:1.2em;
        margin-top:13%;
        margin-left:5%;
    }

    #email{
        white-space: nowrap;
    }

    /*PHOTO DESCRIPTIONS*/
    .two {
        height: 400px;
        width: 575px;
    }

    #title-photo{
        font-size:3em;
    }

    #description{
        font-size:1.2em;
        margin-right:175px;
        margin-left:175px;
    }

    #lighting-container {
        text-align: center; 
        max-width: 900px;
    }

    .arrows {
        width: 60%;
        margin-left: 10px;
        margin-top: -12%;
    }

    .arrow {
        padding:20px;
    }


    @media (min-width: 769px) {
        #mockup-container {
          flex-wrap: wrap;
          justify-content: center;
          gap: 40px;
        }
      
        .celebrity-insta-mockup {
          flex-direction: row;
          gap: 30px;
          justify-content: center;
          margin-top: 50px;
        }
      
        .tyler-mockup a{
          width: auto;
          max-width: 800px;
        }
      
        .celebrity-insta-mockup a {
            width: auto;
          max-width: 300px;}

        #mockup-container .photo {
          max-width: 800px;
        }
      
        #ConverseRebornTitle {
          font-size: 50px;
          text-align: center;
          margin-bottom: 20px;
        }
      
        #idea {
          font-size: 22px;
          margin: 0 auto;
          max-width: 800px;
          text-align: center;
          margin-bottom: 20px;
        }
      
        #RoleTitles,
        #Disclaimer,
        .brief-summary {
          font-size: 22px;
          margin-left: auto;
          margin-right: auto;
          max-width: 700px;
          text-align: center;
        }
      
        .brief-summary {
          margin-top: 40px;
          font-size:22px;
          margin-bottom:40px;
        }

        #slide-deck {
            width: 70% !important;
            max-width: 800px;
            margin: 2em auto !important;
          }

          .title-text{
            font-size: 22px;
            color:black;
            font-family:'Lovelo', sans-serif;
            font-weight:800;}
      
      }

      .project {
  position: relative;
  display: block;
  max-width:700px;
  margin-top:5%;
}

.overlay{
    font-size:1.7em;
}

.photo-row{
    margin-right: 4%;
    gap: 16px;  
    max-width: 800px;
    display: flex;
    margin-right:15%;
}

.depopwebsite{
    display:flex;
    max-width: 55%;
    margin-left: 22%;
}

.cdsscreens{
    display:flex;
    max-width: 55%;
}

.brief-grid{
     display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  margin-right: 29%;
  max-width: 1400px;  
}

.trailer{
    width: 800px;
}


.girlvideos {
    margin-left:-5%;
}

#wrap {
    max-width:1167px;
}



}