/*
A submission for SC Johnson's Capstone Project
	My Design is titled SC Portfolio
	My Name is SC Johnson
	My solution is utilizng structural components from "How To Build a Responsive Navigation Bar with Flexbox"
		– Code written by @yuvrajghule281 
        - https://www.geeksforgeeks.org

    Developed with guidance from Microsoft Copilot (GPT-4)
    Copilot assisted in the HTML structure and the footer.
    Tool: https://copilot.microsoft.com/
    Date: November 2025

    "Vapor" Theme developed by Thomas Park 
      - Licensed under MIT
      - https://bootswatch.com/vapor/

    Navigation bar created by Bootstrap
      - Licensed under MIT
      - documents released under the CC BY 3.0 license
      - https://getbootstrap.com/docs/5.0/components/dropdowns/

    Image and video responsiveness solution created by Emily Barker
      - These solutions are utilized for the following pages:
        - index.html
        - about.html  

    Secondary image responsiveness solution created by Shane Howell
      - This solution is utilized for the following page: 
        - about.html

    "A CSS-only Carousel Slider" created by Christian Schaefer 
      - Licensed under MIT
      - https://codepen.io/Schepp/pen/WNbQByE 

    "Responsive Image Gallery with jQuery Lightbox" created by Melinda Golden 
      - Licensed under MIT
      - https://codepen.io/mmgolden/pen/YrGddm 
*/

 /*	This CSS file accompanies my Capstone Project */


 /*	/////  CSS CITATIONS */
 /* 	This CSS file is released under the Creative Commons License - 
		- https://creativecommons.org/licenses/by-nc-sa/4.0/  /* 
/* License allows: distribution, adaptations, and non commercial use, but requires ShareAlike and attribution to me /*


/* 	/////  IMAGE AND VIDEO CITATIONS */
 /* 	Images are all cited below and not included in the CC4.0 above, which is limited to the CSS only /* 

/*	All other images and videos are cited below and released under Creative Commons License CC BY-SA 4.0, and belong to the author of this website
    - https://creativecommons.org/licenses/by-sa/4.0/  
			- SC_Demo_Reel_Fixed.mp4 
        - This video features images from the “Sallyface” property that was originally created by Steve Garby, and is used under the CC BY-NC-SA 4.0 international license. 
      - SC-Morphing Clone Particles Final.mp4
      - SC-RenderKiwi.mp4
      - SC Rube Render Final.mp4
      - SC_Portrait_Fixed.jpg
      - Composite.jpg
      - dog_jockeys_Composite.jpg
      - Kiwi_Bird_Text.jpg
      - Studio_Woman.jpg
      - Studio_Woman_Colorized.jpg
      - optimus_still-cropped.jpg
        - This model is based on the character “Optimus Prime” that was originally created by Hasbro, and is used under the CC BY-NC-SA 4.0 international license.  
      - Terminator_vs_Alien_Movie_Poster.jpg
        - The character assets used in this poster are based on properties originally created by 20th Century Studios and Skydance Media, and is used under the CC BY-NC-SA 4.0 international license.
      - Peppers_Start.jpg
      - Peppers_Finish.jpg
*/

 /* main.css */

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

 /* Logo */

 .logo a {
     text-decoration: none;
     font-size: 24px;
     display: none;
 }

 /* Navigation Bar */

 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0px;
     color: #fff;
 }

 .nav-links {
     display: flex;
     list-style: none;
 }

 .nav-links li {
     margin: 0 15px;
 }

 .nav-links a {
     color: #fff;
     text-decoration: none;
     font-size: 18px;
     transition: color 0.3s, text-decoration 0.3s, background-color 0.3s;
     padding: 5px 10px;
 }

 .nav-links a:hover,
 .nav-links a.active {
     color: #e0e0e0;
     background-color: #361d87;
     border-radius: 4px;
 }

 /* Menu Toggle */

 .menu-toggle {
     display: none;
     flex-direction: column;
     cursor: pointer;
 }

 .menu-toggle .bar {
     background-color: #fff;
     height: 3px;
     width: 25px;
     margin: 5px;
 }

 /* Menu Mobile View */

 @media (max-width: 768px) {
     .nav-links {
         display: none;
         flex-direction: column;
         width: 100%;
         position: absolute;
         top: 60px;
         left: 0;
         background-color: #2f9bf9;
     }

     .nav-links.active {
         display: flex;
     }

     .nav-links li {
         margin: 10px 0;
         text-align: center;
     }

     .menu-toggle {
         display: flex;
     }
 } 


 /* Home Page */

 /* The video in the Home Page is not reponsive. The video does not adjust to the screen. Emilee Barker 2025 */

 main {
     padding: 2em;
 }

 .demo {
     text-align: center;
     padding: 50px;
     border-radius: 4px;
 }

 .demo p {
     color: rgb(199, 199, 199);
     margin-top: 20px;
 }

 /* Added a class tag to help to make the video reponsive. Emilee Barker 2025 */

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

/* End credit */

 /* Footer */

 footer {
     background: #333;
     color: #fff;
     text-align: center;
     padding: 1em;
     margin-top: 2em;
 }

/* 3D Modeling & Photoshop Pages */

 .modeling-content h1 {
     text-align: center;
 }

 .photoshop-content h1 {
     text-align: center;
     margin-bottom: 20px;
 }

/* Responsive Image Gallery by Melinda Golden */

#gallery {
  padding-top: 40px;
  @media screen and (min-width: 991px) {
    padding: 60px 30px 0 30px;
  }
}

.img-wrapper {
  position: relative;
  margin-top: 15px;
  img {
    width: 100%;
  }
}
.img-overlay {
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  i {
    color: #fff;
    font-size: 3em;
  }
}

#overlay {
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  /* Removes blue highlight */
  -webkit-user-select: none;
  -moz-user-select: none;    
  -ms-user-select: none; 
  user-select: none; 
  img {
    margin: 0;
    width: 80%;
    height: auto;
    object-fit: contain;
    padding: 5%;
    @media screen and (min-width:768px) {
        width: 60%;
    }
    @media screen and (min-width:1200px) {
        width: 50%;
    }
  }
} 


/* CSS Carousel Slider by Christian Schaefer */

/* Image Carousel Responsive */

 @media (max-width: 768px) {
     .carousel-img {
         width: 100%;
         height: auto;
    } 

    .carousel__navigation {
      padding: 10px; 
    }
 }

/* Image Carousel Responsive End */

@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

.cd__main{
   display: block !important;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
  max-width: 382px;
  height: 500px;
  margin: 15px auto;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
}

.carousel__slide:nth-child(even) {
  background-color: #99f;
}

.carousel__slide:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  margin: -30px;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button-1 {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
} 

.carousel__navigation-button-2 {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}

/* Large Buttons, element has been hidden due to compatibility issues on Firefox browsers */

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
  visibility: hidden;
}

.carousel::before,
.carousel__prev {
  left: -1rem;
}

.carousel::after,
.carousel__next {
  right: -1rem;
}

.carousel::before,
.carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
} 


/* Services Page */

 .services-content {
     border-radius: 4px;
 }

 .services-content h1,
 h4 {
     text-align: center;
 }

 .modeling {
     border-radius: 4px;
     padding: 40px;
     margin-bottom: 30px;
 }

 .photoshop {
     border-radius: 4px;
     padding: 40px;
 }

 
 /* About Page */


 .portrait {
     text-align: center;
     border-radius: 4px;
     padding: 20px;
 }

 .about h2 {
     text-align: center;
     padding-bottom: 10px;
 }

 .about {
     border-radius: 4px;
     padding: 30px;
 }


/* About Mobile View */

/* Added to make the image reponsive to the page by Shane Howell 2025 */

.portrait img{width: 100%;
height: auto;}

/* End credit */

/* Added to help with the overcrowding of text in the smaller screen sizes on the About Page by Emilee Barker 2025*/

 @media (max-width: 768px) {
     .portrait {
         flex-direction: column;
         width: auto;
         margin: auto;
         margin-bottom: 20px;
     }

     .portrait img {
         width: 100%;
         height: auto;
    }

     .about {
         flex-direction: column;
         width: auto;
         margin: auto;
         text-align: center;
     }

     .about h2 {
         flex-direction: column;
         width: auto;
         margin: auto;
     }
 }

/* End credit */

/* Contact Page */

.contact {
    text-align: center;
    padding: 30px;
}