/* Navbar */
.navbar-expand {
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
  font-weight: 100;
  font-size: x-large;
  align-content: center;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px); }

/* Page Head */
.pageHeader {
  position: sticky;
  z-index: 6;
  background-image: url("../img/bg1.jpg"); /* Here's that background image link */
  height: 105vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto;
  display: block;
  margin-top: -20px; }

.headerText {
  opacity: 1.0;}
  .headerText h1 {
    padding-top: 14%;
    font-family: "Lato", sans-serif;
    font-size: 90px; }
  .headerText h2 {
    font-size: 26px;
    font-weight: 100; }

/* About and Skills */
.skills {
    position: sticky;
    z-index: 6;
    background: #589696;
    padding: 1rem;
    padding-bottom: 50px;
    filter: drop-shadow(0px 1px 10px rgb(48, 48, 48, 0.7));
}

/* About and Skills */
.videos {
    position: sticky;
    z-index: 6;
    background: linear-gradient(180deg, transparent 0%, transparent 124px, #e7e6f0 125px);
    margin-top: -125px; /* The negative margin that allows it the overlay on about section */
    padding: 1rem;
    padding-bottom: 50px;
    filter: drop-shadow(0px 1px 10px rgb(48, 48, 48, 0.7));
}

.about {
  position: sticky;
  z-index: 6;
  padding-top:50px;
  padding-bottom: 200px;
  padding-left: 50px;
  padding-right: 50px;
  filter: drop-shadow(0px 1px 10px rgb(48, 48, 48));
  background-color: rgb(49, 114, 175);
  color:white; }
  .about p {
    font-size: 26px; 
    font-weight: 100; }
  .about h1 {
    font-size: 46px; }

.about-row {
    filter: drop-shadow(10px 10px 10px rgba(48, 48, 48, 0.5));
    border: 1px solid grey;
    border-radius: 1rem;
    border-color: rgba(45, 72, 146, 0.2);
    background-color: white;
}

.about-row2 {
    border: 0px solid grey;
    margin-top: -75px;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 1rem;
    padding-left: 50px;
    padding-right: 50px;
    border-color: rgba(45, 72, 146, 0.2);
    background-color: rgb(231, 230, 240);
}


.about-col {
  border-right: 1px solid grey; 
  border-color: rgba(45, 72, 146, 0.2); 
  padding:2rem;  }
  .about-col ul{
    list-style: none; 
    padding-left: 0; 
    font-weight: 500; }
  .about-col h6{
    margin: 0;
    font-weight: 700;
    color: rgb(49, 114, 175, 0.767); }
  .about-col p{
    font-weight: 500;
    color: black; }

button:focus { outline: 0; }
button:hover { cursor: initial; }

/* Underlines used in titles of sections */
.underline-white {
  border: none;
  background: linear-gradient(to right, transparent 30%, rgb(226, 226, 226) 50% , transparent 70%);
  height: 1px; }

.underline-black {
  border: none;
  background: linear-gradient(to right, transparent 30%, rgba(83, 83, 83, 0.514) 50% , transparent 70%);
  height: 1px; }


/* Projects */
.projects {
    z-index: 6;
    position: sticky;
    overflow: hidden;
    perspective: 1px;
    padding: 50px;
    color: rgb(39, 39, 39);
    background-color: rgb(222, 235, 195);
    filter: drop-shadow(0px 1px 7px rgb(77, 77, 77));
}

.project-item {
  filter: drop-shadow(3px 3px 5px rgba(36, 36, 36, 0.5));
  padding: 0;
  border-style: hidden;
  overflow: hidden;
  width: 100%;
  border-radius: 10px !important;
  transition-duration: 0.25s; }
  .project-item img{
    transition-duration: 0.25s;
    transform: scale(1);
    width: 100%; }
  .project-item:hover img{
    filter: brightness(25%) blur(1px);
    transition-duration: 0.5s;
    transform: scale(1.1); }
  .project-item:hover .projects-text-overlay{
    opacity:0.7;
    transition-duration: 0.5s;
    opacity: 1; }
  .project-item h2 {
    padding: 2rem;
    font-size: 2vw;
    font-weight: 100; }

.projects-text-overlay {
  transition-duration: 0.25s;
  color: white;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);}

.projects-btn {
  border: 2px solid rgb(49, 114, 175);
  border-radius: 2rem;
  background-color: transparent;
  color: white;
  padding: 6px 18px;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 1.5vw;
  font-weight: 100;  }
  .projects-btn:hover {
    background: rgb(49, 114, 175);
    color: white;
    text-decoration: none; }
    
video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: blur(0px) brightness(70%);
  z-index: -1;
  overflow: hidden; }

/* Work */
.work {
  z-index: -7;
  color:white; }
  .work p{
    margin: 0; }
  .work ul{ 
    font-weight: 100; }
    
.work-item {
  filter: drop-shadow(3px 3px 5px rgb(48, 48, 48, 0.3));
  padding: 0;
  border-style: hidden;
  overflow: hidden;
  width: 100%;
  border-radius: 10px !important;
  transition-duration: 0.25s; }
  .work-item img{
    transition-duration: 0.25s;
    transform: scale(1);
    width: 100%; }
  .work-item:hover img{
    filter: brightness(25%);
    transition-duration: 0.5s;
    transform: scale(1.1); }
  .work-item:hover .projects-text-overlay{
    opacity:0.7;
    transition-duration: 0.5s;
    opacity: 1; }


.work-btn {
  border: 2px solid rgb(49, 114, 175);
  border-radius: 2rem;
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  cursor: pointer;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size:  1.5vw;
  font-weight: 100; }
  .work-btn:hover {
    background: rgb(49, 114, 175);
    color: white;
    text-decoration: none; } 
  
/* z-index used so elements are displayed in correct order  */ 
#workTitle{
  background-color: #b65a5f;
  padding-top: 100vh; 
  margin-top: calc(-100vh + 50px);
  z-index: 5; }
#work1text{
  filter: drop-shadow(0px 1px 7px rgb(77, 77, 77));
  background-color: #b65a5f;
  z-index: 4; }
#work2text{
  filter: drop-shadow(0px 1px 7px rgb(77, 77, 77));
  background-color: #71b89d ;
  z-index: 3; }
#work3text{
  filter: drop-shadow(0px 1px 7px rgb(77, 77, 77));
  background-color: #E27D60 ;
  z-index: 2; }
#contact{
  color:black;
  z-index: 1; }
 
.parallax {
  align-items: center;
  position: sticky;
  bottom: 0;
  width: 100%;
  letter-spacing: 1px;
  overflow: hidden; }

/* Some CSS to make it more responsive to smaller devices */
@media only screen and (max-width: 768px) {
  .navbar-expand {
    font-weight: 100;
    font-size: small;
    align-content: center; }

  .project-item h2 {
    padding: .5rem;
    font-size:  3vmax; }
  .projects-btn {
    border-radius: 1rem;
    padding: 4px 10px;
    font-size: 2vmax;
    font-weight: 100;  }

  .work-item h2 {
    padding: .5rem;
    font-size:  3vmax;  }
  .work-item h6 {
    padding: .5rem;
    font-size: 2vmax; }
  .work-btn {
    border-radius: 1rem;
    padding: 4px 10px;
    font-size: 2vmax;
    font-weight: 100;  }
}

.blue{
  color:#589696 }

html, body {
  text-align: center; }

body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; }


.modal-dialog {
    max-width: max-content !important;
}

.modal-body {
    display: flex;
    padding: 0;
}

    .modal-body img {
        object-fit: contain;
        max-height: 90vh; /* Limits image height to 90% of the screen */
        width: auto;
    }