/* You can add custom CSS and extend Boostrap styles in this file. Remember, Bootstrap is just CSS at the end of the day! */
body {
  position: relative;
}

/* --------------------Navbar Section--------------------- */
#nav-img {
  opacity: 0.7;
  transition-duration: 0.3s;
}

#nav-img:hover {
  opacity: 1;
}

/* --------------------Hero Section--------------------- */
#hero-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("https://i.etsystatic.com/35400682/r/il/c4e382/3939967724/il_fullxfull.3939967724_7nmz.jpg");
  background-size: cover;
  background-position: center;
  text-align: center;
  color: white;
  width: 100vw;
  height: 100vh;
}

#hero-section img {
  border: white solid 5px;
  border-radius: 50%;
  width: clamp(100px, 30vw, 250px);
  margin-top: 35vh;
}

#name {
  margin: 30px 0 10px 0;
  font-size: clamp(10px, 5vw, 40px);
}

#tagline {
  font-size: clamp(5px, 3vw, 20px);
}

/* --------------------Mission Section--------------------- */
#mission-section {
  background-image: linear-gradient(to right, black, black, black, #0b1941);
  color: white;
}

#mission-section .col-12,
.col-md-6 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#mission-section h1 {
  padding-top: 50px;
  font-size: clamp(25px, 10vw, 75px);
}

#mission-section img {
  width: clamp(150px, 40vw, 600px);
}

#mission-section p {
  margin: 15px 0 50px 0;
}

/* --------------------Skills Section--------------------- */
#skills-section {
  background-color: #f9f9f9;
}

#skills-section h1 {
  padding-top: 50px;
  padding-bottom: 25px;
  font-size: clamp(25px, 10vw, 75px);
}

#skills-section img {
  width: clamp(75px, 20vw, 200px);
  margin-bottom: 15px;
}

#skills-section p {
  margin: 0 75px 50px 75px;
}

#skills-section .col-12,
.col-md-6,
col-lg-3 {
  display: flex;
  flex-direction: column;
}

/* --------------------Contact Section--------------------- */
#contact-section {
  font-size: 50px;
  background-color: #00b4d8;
  color: #0b1941;
}

#contact-section h1 {
  padding-top: 50px;
  padding-bottom: 25px;
  font-size: clamp(25px, 10vw, 75px);
}

#contact-section a {
  color: #0b1941;
  text-decoration: none;
}

#contact-section p {
  display: inline-block;
  margin-bottom: 50px;
  transition-duration: 0.3s;
}

#contact-section p:hover {
  color: #f9f9f9;
}

/* --------------------Travel Section--------------------- */
#travel-section {
  background-color: #0b1941;
  color: white;
  padding-bottom: 50px;
}

#travel-section h1 {
  padding-top: 50px;
  padding-bottom: 25px;
  font-size: clamp(25px, 10vw, 75px);
}

.carousel {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
}

.carousel-item img {
  height: 75vh;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

@media (max-width: 768px) {
  #portland-img {
    object-position: calc(50% - 100px) center;
  }
}

.carousel-item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}

.carousel-caption {
  z-index: 10;
}

/* --------------------Footer Section--------------------- */
#footer-section {
  height: 100px;
  width: 100vw;
  text-align: center;
  color: white;
}

#footer-section p {
  padding-top: 35px;
}

/* --------------------All Sections--------------------- */
#mission-target,
#skills-target,
#contact-target,
#travel-target {
  position: relative;
  top: -60px;
}