/*MAIN CSS FILE FOR THE PORTFOLIO WEBSITE*/

body {
    background-color: #E4DBDB;
    min-height: 100vh;
    overflow-x: hidden;
   
}

@font-face {
    font-family: 'Aestera';
    src: url('fonts/Aestera.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*NAV STYLING */
#button-box {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 1;
  
}

.links {
    display:flex;
    flex-direction: row;
    gap: 1rem;
   
}

.linkbuttons {
  text-decoration: none;
  color: #000;
  font-weight: bold;

}

.outcomes-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.outcomes-menu-content {
    display: none;
    flex-direction: column;

}

.projectsbtn, .outbtn, .aboutmebtn {
    background-color: transparent;
    border: transparent;
}

/* SLIDESHOW STYLING */

.perleadership-2 {
width: 100%;
max-width: 22.5rem; 
margin-bottom: 2rem;
}



.perleadership-2-proof {

position: relative;
display: block;
width: 20rem;
border-radius: 0.5rem;


}


/* MAIN PAGE STYLING */

#main-page {
    background-color: #E4DBDB;
    display: flex;
    text-align: center;
   flex-direction: column;
   align-items: center;
   max-height: 100vh;
   width: 100%;
  
 
}

.header-main {

    font-size: 7.7rem;
    display: flex;  
    font-family: 'Vogue', sans-serif;
    transform: scale(1.3, 1.9);
    letter-spacing: 0.8rem;
    margin-top: 2.1rem;
    margin-bottom: 8rem;
   
    
}

.moth {
    position: absolute; 
    width: 40rem;
    top: 14vh;
    left: 30%;
    transform: translateX(-50%);
    transition: top 0.1s ease-out;
    z-index: 1;
    pointer-events: none;
}


.main-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    align-items: flex-start;
    
}

.moto {
    display: flex;
    flex-direction: column;
    background-color: #6A533B;
    align-content: center;
    width: 30%;
    flex-shrink: 0;
    margin-top: 3rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
   
.moto-text {
    color: #E4DBDB;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: space-around;
    font-family: 'Aestera';
    margin: 1rem;
}

#symbolism {
    font-style: italic;
}

.name {
    display: flex;
    flex-direction: row;
   align-items: center;
   width:  50%;
   width: auto;
   margin-left: 3rem;
}


.name-letter {
    font-size: 15rem;
    flex-shrink: 0 ;
    line-height: 1;
    font-family: 'Vogue', sans-serif;
    transform: scale(1.3, 2);
    color: #6A533B;
    margin-top: 4rem;
  
}

.name-letters {
    font-family: 'Aestera';
    font-size: 2rem;
    margin-bottom: 3rem;
}



/*PROJECT PAGE STYLING*/

#projects-page {
    background-color: #E4DBDB;
    display: flex;
    text-align: center;
   flex-direction: column;
   align-items: center;
   max-width: 100%;
   
   
}

.header-projects {

    font-size: 5rem;
    display: flex;  
    font-family: 'Vogue', sans-serif;
    transform: scale(1.3, 2.1);
    letter-spacing: 0.2rem;
    align-self: flex-start;
    padding-left: 5rem;
    padding-top: 2rem;
   
}

.projects-content {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 3rem;
    gap: 0;
    padding: 0;
    margin-bottom: 4rem;
}

.project-card {
      width: 100%;
    height: auto;
    max-height: 12rem;
    object-fit: contain;
    box-sizing: border-box;
    margin: 0;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-name {
    font-size: 1rem;
    font-family: 'Vogue', sans-serif;
    margin-top: 3rem;
    color: hsl(0, 0%, 0%);
}

#portfolio-card {
  margin-top: 1rem;

}
.project-photo {
    width: 100%;
    height: auto;
    max-height: 12rem;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

@keyframes shake {

    0% {transform: translateX(0);}
    20% {transform: translateX(-10px);}
    40% {transform: translateX(10px);}
    60% {transform: translateX(-10px);}
    80% {transform: translateX(10px);}
    100% {transform: translateX(0);}
}

.project-photo.shake {
animation: shake 0.5s ease-in-out ;
}




/* LEARNING OUTCOMES STYLING */

#learning-outcomes-page {
    background-color: #E4DBDB;
    display: flex;
    text-align: center;
   flex-direction: column;
   align-items: center;
   max-width: 100%;
   
   
}

.header-learning-outcomes {

    font-size: 5rem;
    display: flex;  
    font-family: 'Vogue';
    transform: scale(1.3, 2.1);
    letter-spacing: 0.2rem;
    align-self: flex-start;
    padding-left: 8rem;
    padding-top: 2rem;
   
}

.learning-outcomes-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: 3rem;
}

.learning-outcomes-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    margin: 0.5rem;
    border: 0.3rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: transparent;
    text-decoration: none;
    color: inherit;
   
}

.learning-outcomes-name {
    font-size: 1rem;
    font-family: 'Vogue', sans-serif;
    margin-top: 3rem;
    color: hsl(0, 0%, 0%);
}

.learning-outcomes-photo {
    width: auto;
    height: 15rem;
    object-fit: cover;
    cursor: pointer;
    
}



  

/* Outcomes styling */

#outcome {
    display: flex;
  flex-direction: column;
    justify-content: center;
    position: relative;

}

.outcomes-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: 0;
}

.outcomes-title {
    font-size: 5rem;
    font-weight: bold;
    font-family: 'Vogue', sans-serif;
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
    margin-left: 1rem;
    animation: slideFromLeft 1.2s ease-in-out;
}

.outcomes-subheader {
    font-size: 3rem;
    font-weight: bold;
    font-family: 'Vogue', sans-serif;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    margin-left: 1rem;
    margin-bottom: 0;
    animation: slideFromLeft 1.2s ease-in-out;
}

@keyframes slideFromLeft {

    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

.outcome-box {
     display: flex;
 flex-direction: row;
align-items: flex-start;
width: 100%;
margin: 4rem;
}

.outcome-photo {
   width: 30%;
    height: auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-right: 2rem;
    margin-left: 5rem;
    margin-top: 2rem;
    
   
  }

  .outcome-pics-container {
  display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    margin-top: 8rem;
    margin-left: 2rem;
  }

  .outcome-pics {
    max-width: 400px;
    height: auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
  }


 

  .outcome-photo[alt="interviewquestions"] {

    align-items: center;
    justify-content: center;
    width: 60%;
    max-width: 500px;
    display: block;
    margin-left: 18rem;

  }

  
.outcome-photo[alt="interviewstudent"] {
   
    width: 50%;
    max-width: 500px;
    display: block;
    height: auto;


  }


  .outcome-photo[alt="low-fidelity-prototype"],
  .outcome-photo[alt="prototype-colour-scheme"],
  .outcome-photo[alt="projets-versions"],
  .outcome-photo[alt="final-prototype"] {
    width: 45%;
    max-width: 500px;
    height: auto;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-bottom: 2rem;
  }

  .outcome-photo[alt="logo-ver1"],
  .outcome-photo[alt="logos-pt1"],
  .outcome-photo[alt="logos-pt2"],
  .outcome-photo[alt="logos-pt3"],
  .outcome-photo[alt="logos-pt4"],
  .outcome-photo[alt="logos-pt5"] {
    width: 45%;
    max-width: 500px;
    height: auto;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-bottom: 2rem;
  }

.outcome-photo[alt="aboutme-ver1"],
.outcome-photo[alt="prototype-ver1"],
 .outcome-photo[alt="aboutme-ver2"],
  .outcome-photo[alt="aboutme-ver3"]{
    width: 30%;
    max-width: 500px;
    height: auto;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-left: 2rem;
  }
.outcome-photo[alt="lo-page-versions"]{
    width: 90%;
    max-width: 500px;
    height: auto;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-left: 2rem;
  }


.outcome-photo[alt="lo-page-iteration1"],
.outcome-photo[alt="lo-page-feedback"],
.outcome-photo[alt="lo-page-feedback2"],
.outcome-photo[alt="finalver"]{
    width: 75%;
    max-width: 500px;
    height: auto;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-left: 2rem;
  }


  .outcome-photo[alt="pl-feedback"]{
    width: 95%;
    max-width: 500px;
    height: auto;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-left: 2rem;
     }


.outcome-photo[alt="gallery-ver1"],
.outcome-photo[alt="gallery-ver2"],
.outcome-photo[alt="gallery-ver3"],
.outcome-photo[alt="gallery-ver1-fb"],
.outcome-photo[alt="gallery-ver2-fb"],
.outcome-photo[alt="menu-ver1"],
.outcome-photo[alt="menu-ver2"],
.outcome-photo[alt="menu-ver3"],
.outcome-photo[alt="menu-ver4"],
.outcome-photo[alt="menu-ver1-fb"],
.outcome-photo[alt="menu-ver2-fb"],
.outcome-photo[alt="gal-verf"]{

     font-family: "Lora", serif;
     font-size: 1.5rem;
        width: 60%;
        justify-content: center;

     }

    #itdesign-textbox{
        margin-left: 7rem;
    }

     #itdesign-textbox video {
        width: 50%;
        max-width: 700px;
        height: auto;
        object-fit: contain;
        margin: 2rem auto;
     }
   .outcomes-subtitle {
    font-size: 1.7rem;
    font-family: 'Vogue', sans-serif;
    text-align: left;
    margin-top: 2rem;
   
  }

  .outcomes-textbox {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 auto;
    padding-right: 8rem;
    align-items: center;
    gap: 1rem;
 
  }
   

  /* SLIDESHOW STYLING */

  .perleadership-2-slideshow-container {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    margin-left: 3rem;
    justify-content: center;
    position: relative;
    }

    .slides {
        display: none;
     

    }

    .perleadership-2-photo {
        width: 20rem;
        object-fit: cover;
        height: auto;
    }


    

    .prev-slide, .next-slide {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 1rem;
        color: white;
        transition: 0.6s ease;
        border-radius: none;
      
    }

    .prev-slide {
        left: -2rem;
    }

    .next-slide {
        right: -2rem;
    }



/* OUTCOMES NEW STYLING */
#Toutcome {
    display: flex;
  flex-direction: column;
    justify-content: center;
    position: relative;

}

.T-title {
    font-size: 5rem;
    font-weight: bold;
    font-family: 'Vogue', sans-serif;
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    margin-left: 1rem;
    text-align: center;
}
  

.Toutcomes-introbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 4rem;
    padding-bottom: 2rem;
    margin-left: 2rem;
    box-sizing: border-box;
    overflow: hidden;
    

}



.Toutcomes-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
    border-top: black solid 0.2rem;
    

    
}


.Toutcomes-section1 {
    border-right: rgb(62, 32, 32) solid 0.2rem;
    padding-right: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    flex-grow: 0;
    width: 50%;
    margin-left: 2rem;

}

.Toutcomes-section2 {
    
    padding-left: 0.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    width: 50%;
    justify-content: space-between;
    gap: 0;
    margin-right: 2rem;


}

.outcome-photo[alt="gifimg"]{
     width: 75%;
    max-width: 600px;
    height: auto;
    display: flex;
    align-self: center;
    align-items: left;
    margin: 0;
    margin-top: 1.7rem;

}
.outcome-photo[alt="Tproof-interactive-prototype"] {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: flex;
    align-self: center;
    align-items: left;
    margin: 0;
    margin-top: 1.7rem;

}

.Toutcomes-text {
    font-family: "Lora", serif;
    font-size: 1.1rem;
    }
  
  
  .tabs {
    margin-top: 30px;
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 2rem;
  }
  
  .tabs span {
    position: relative;
    cursor: pointer;
    font-weight: bold;
    color: #834550;
    font-family: "Lora", sans-serif;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    flex-wrap: nowrap;
  }
  
  .tabs span::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    bottom: -5px;
    background-color: #6A533B;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
  }
  
  .tabs span:hover {
    color: black;
  }
  
  .tabs span:hover::after {
    transform: scaleX(1);
  }
  
  
  ul {
    list-style-type: disc;
    padding-left: 20px;
  }
  


  /* OUTCOMES CAROUSEL STYLING*/
  
.outcomeimgs-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    border-radius: 1rem;
    width: 900px;
    height: 430px;
    position: relative;
    overflow: hidden;
}

 .outcomeimgs-carousel::before {
    content: "";
    position: absolute;
    background-color: #6A533B;
    background-size: cover;
    filter: blur(10px);
    background-position: center;
    inset: 0;
    z-index: 0;
 }

 .outcomeimgs-carousel > * {
    position: relative;
    z-index: 1;
 }

.carousel-image {
    width: 500px;
    height: 400px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 8px;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.carousel-slide{
    display: flex;
    position: relative;
}
.carousel-caption{
    font-size: 1.8rem;
    font-family: 'Vogue', sans-serif;
    pointer-events: none;
    position: absolute;
    z-index: 2;
    top: 1rem;
}

/*ABOUT PAGE STYLING*/

#about-page {
    position: relative;
    display: flex;
    flex-direction: column;
     
}

.about-introcontent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    
}
.about-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    margin-bottom: 3rem;
    margin-top: 0;
    align-items: center;
    flex-wrap: wrap;

   
}

.aboutphoto2, .aboutphoto3 {
   width: 30vw;        /* Responsive width */
  max-width: 270px; 
    margin: 0;
    margin-bottom: 1rem;
    align-self: center;
   
  
}

.aboutphoto2 {
    margin-left: 20rem;
}

.aboutphoto3 {
    margin-top: 2rem;
}

.about-textbox1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 1rem;
    width: 50%;
    margin: 0 auto

}

.subheader {
    font-size: 5rem;
    font-family: 'Vogue';
    margin-left: 1rem;
    margin-bottom: 0.2rem;
    position: relative;
    text-align: left;
    
}

.intro {
    font-size: 2.4rem;
    font-family: 'Vogue';
    margin: 0;
    margin-left: 2rem;
}

.aboutphoto {
    width: 27%;
    height: 40%;
    margin: 0;
    align-self: center;
    justify-content: center;
    margin-bottom: 3rem;
   
    
}


.moth1 {

    width: 40rem;
    left: 1%;
    top: 10vh;
    transition: top 0.1s ease-out;
    z-index: 1;
    position: absolute;
}


/*FOOTER STYLING*/

.contact-content {
    position: relative;
    display: flex;
    flex-direction: column;
}
  

.social-media {
     display: flex;
    flex-direction: row;
    gap: 5rem;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: 3rem;
    
}

.social-icon {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    display: block;
    margin-top: 0;
    
    
}

.social-media-name {
    font-size: 1rem;
    font-family: 'Vogue', sans-serif;
    color: black;
    margin-top: 0.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.social-media-box:nth-child(3) .social-icon {
  width: 6rem;
  height: 6rem;
  

}

.social-media-box:nth-child(3) {
  margin-top: -1rem;
}


.social-media-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  
}


.itoutcomes-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
    border-top: black solid 0.2rem;

}
    
.itoutcomes-section1 {
    border-right: rgb(62, 32, 32) solid 0.2rem;
    padding-right: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    flex-grow: 0;
    width: 50%;
    margin-left: 2rem;

}

.itoutcomes-section2 {
    
    padding-left: 0.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    width: 50%;
    justify-content: space-between;
    gap: 0;
    margin-right: 2rem;


}


/* Responsive Design */

@media (max-width: 1200px) {
    .header-main {
        font-size: 8rem;
        margin-bottom: 3rem;
    }
    .name-letter {
        font-size: 8rem;
    }
    
    .main-content {
        gap: 1rem;
    }
    .moth {
        width: 25rem;
        top: 8vh;
    }
    .header-learning-outcomes,
    .header-projects {
      margin-left:3rem;
    }
  .projects-content,
  .learning-outcomes-content,
  .outcomes-content,
  .Toutcomes-content {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .project-card,
  .learning-outcomes-card {
    width: 80%;
    margin-bottom: 2rem;
  }
  .outcome-box {
    flex-direction: column;
    margin: 2rem 0;
    align-items: center;
  }
  .outcomes-textbox,
  .Toutcomes-introbox {
    padding-right: 2rem;
    margin-left: 0;
    width: 100%;
  }
  .outcomes-text {
    width: 90%;
    
  }
  .outcomeimgs-carousel {
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-height: 250px;
  }
  .carousel-image {
    width: 90vw;
    max-width: 100%;
    height: auto;
  }
 
  .about-introcontent {
    width: 80%;
  }
}

@media (max-width: 800px) {
   .main-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .name {
        margin-left: 0;
        justify-content: center;
    }
    .moto {
        width: 90vw;
        min-width: unset;
        margin-top: 1rem;
    }
    .header-main {
        font-size: 6rem;
        margin-bottom: 2rem;
    }
    .name-letter {
        font-size: 5rem;
        margin-top: 1rem;
    }

     .name-letters {
        font-size: 1.5rem;
        
    }
    .moth {
        width: 60vw;
        min-width: 180px;
        top:4vh;
    }
  
  .header-projects,
  .header-learning-outcomes,
  .outcomes-title,
  .T-title {
    font-size: 2.5rem;
    padding-left: 1rem;
  }
  .project-card,
  .learning-outcomes-card {
    width: 95%;
    padding: 0.5rem;
  }
  .outcomes-textbox,
  .Toutcomes-introbox {
    padding: 0 1rem;
    margin-left: 0;
    width: 100%;
  }
  .outcomes-text {
    width: 100%;
    font-size: 1rem;
  }
  .outcomeimgs-carousel {
    width: 100vw;
    min-width: 0;
    height: auto;
    min-height: 180px;
  }
  .carousel-image {
    width: 100vw;
    max-width: 100%;
    height: auto;
  }
  .outcome-photo,
  .outcome-photo[alt] {
    width: 100%;
    max-width: 100vw;
    margin: 1rem 0;
    margin-left: 0;
    margin-right: 0;
  }
  .outcomes-subtitle {
    font-size: 1.2rem;
  }
  .aboutphoto2,
  .aboutphoto3,
  .aboutphoto {
    width: 40vw;
    margin-left: 0;
  }
  .moth,
  .moth1 {
    width: 90vw;
    left: 0;
  }
 
  .social-media {
    gap: 1rem;
  }
   .tabs {
    gap: 0.5rem;
    margin: 1rem 0.5rem;
    font-size: 1rem;
  }
  .tabs span {
    font-size: 1rem;
    padding: 0.5rem 0.5rem;
  }
}


@media (max-width: 500px) {
   .header-main {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        padding: 0;
    }
    .name-letter {
        font-size: 7rem;
        margin-top: 2rem;
    }

    .name-letters {
        font-size: 1rem;
        
    }
    .moth {
        width: 80vw;
        min-width: 100px;
        top: 2vh;
    }
    .moto {
        width: 98vw;
        margin-top: 0.5rem;
    }
 
  .header-projects,
  .header-learning-outcomes,
  .outcomes-title,
  .T-title {
    font-size: 1.3rem;
    padding-left: 0.5rem;
  }
  .outcomes-text {
    font-size: 0.9rem;
  }
  .outcomes-subtitle {
    font-size: 1rem;
  }
   .social-media {
    gap: 1rem;
  }
   .tabs {
    gap: 0.2rem;
    margin: 0.5rem 0.2rem;
    font-size: 0.9rem;
  }
  .tabs span {
    font-size: 0.9rem;
    padding: 0.3rem 0.3rem;
  }
}