/*-------------
# Media Queries
--------------*/
@media (max-width: 1199px) {
  .header {
    left: -100%;
  } 
}
@media (max-width: 992px) {
  .myCard {
    padding: 20px;
  }
}
@media (max-width: 768px) {
  .section-title, #portfolio .subTitle {
    position: static; 
  }
  .section-title{
    top:60px;
  }
  .hero h2 {
    font-size: 32px;
  }
  .hero p {
    font-size: 20px;
  }
  #thirdCollapse{
    margin-top: -50px;
  }
  #portfolio .subTitle h3 .background{
    height: 50px;
  }
}
@media (max-width: 480px) {
  .section-title{
    top: 90px;
    width: 100%;
  }
  .section-title h2::before,
  .section-title h2::after {
    margin-top: 33.15px;
    margin-left: 2.5px;
    border-radius: 35px;
    width: 105px;
  }
  #portfolio .subTitle h3::before,
  #portfolio .subTitle h3::after, #cvH2::before,
  #cvH2::after {
    margin-top: 20.15px;
    margin-left: 2.5px;
    border-radius: 35px;
    width: 105px;
  }
  #cvTitle {
    font-size: 30px;
  }
  #portfolio img{
    max-height: 228px;
  }
  .portfolio-object {
    max-width: 405px; 
  }
  .inner {
    margin: -25px;
  }
}
@media (max-width: 405px) {
  #cvH2::before,
  #cvH2::after {
    margin-top: 18px;
  }
  #cvH2 .background {
    left: 2px;
    top: 0;
    height: 32px;
  }
  .cv #downloadButton {
    margin-top: 5px;
  }
}
@media (max-width: 300px) {
  .header {
    left: -200%;
    display: none;
  }
}
@media (min-width: 481px) {
  .section-title h2::before,
  .section-title h2::after,
  #portfolio .subTitle h3::before,
  #portfolio .subTitle h3::after {
    top: -11.75px;
    border-radius: 25px;
    height: 35px;
    width: 125px;
  }
  .section-title h2::before,
  .section-title h2::after {
    margin-top: 34px;
  }
  #portfolio .subTitle h3::before,
  #portfolio .subTitle h3::after {
    margin-top: 20px;
  }
  #portfolio .subTitle{
    top: 75px;
  }
  .inner {
    margin: -20px;
  }
  #firstExpCollapse{
    margin-top: -58px;
  }
  #secondExpCollapse{
    margin-top: -58px;
  }
  #thirdExpCollapse{
    margin-top: -75px;
    padding-top: 75px;
  }
  #fourthExpCollapse{
    margin-top: -58px;
  }
  #thirdCollapse{
    margin-top: -29px;
  }
  #fourthCollapse{
    margin-top:-48px;
  }
} 
@media (min-width: 768px){
  #fourthCollapse{
    margin-top: -30px;
  }
  #firstExpCollapse{
    margin-top: -58px;
  }
  #secondExpCollapse{
    margin-top: -58px;
  }
  #thirdExpCollapse{
    margin-top: -75px;
    padding-top: 75px;
  }
  #fourthExpCollapse{
    margin-top: -58px;
  }
}
@media (min-width: 992px) {
  .section-title h2 .span {
    font-size: 50px;
  }
  .section-title h2::before,
  .section-title h2::after{
    top: -9.75px;
    margin-left: 0px;
    height: 45px;
    width: 150px;
  }
    #portfolio .subTitle h3 .span {
      font-size: 35px;
      padding-bottom: 5px;
    }
    #portfolio .subTitle h3::before,
    #portfolio .subTitle h3::after {
      top: -9px;
      margin-left: 0px;
      height: 45px;
      width: 150px;
    }
  #nathanImg {
    position: sticky;
    top: 100px;
    margin-top: 45px;
  }
  .portfolio .portfolio-item .portfolio-info {
    height: 52%;
  }
  .portfolio .portfolio-item .portfolio-content img {
    max-height: 310px;
  }
  #thirdCollapse {
    margin-top: -48px;
  }
  #fourthCollapse {
    margin-top: -48px;
  }
  #fifthCollapse{
    margin-top: -48px;
  }
  #firstExpCollapse{
    margin-top: -58px;
  }
  #secondExpCollapse{
    margin-top: -58px;
  }
  #thirdExpCollapse{
    margin-top: -93px;
    padding-top: 90px;
  }
  #fourthExpCollapse{
    margin-top: -58px;
  }
}
@media (min-width: 1099px) {
  .section-title h2::before,
  .section-title h2::after,
  #portfolio .subTitle h3::before,
  #portfolio .subTitle h3::after {
    top: 0;
    height: 35px;
    width: 180px;
  }
}
@media (min-width: 1200px) {
  .header~main,
  .header~#footer {
    margin-left: 300px;
  }
  .section-title h2 .span {
    font-size: 55px;
  }
  #portfolio .subTitle {
    top: 95px;
  }
  #portfolio .subTitle h3 .span {
    font-size: 45px;
  }
  .section-title h2::before,
  .section-title h2::after,
  #portfolio .subTitle h3::before,
  #portfolio .subTitle h3::after {
    margin-left: 0px;
    height: 40px;
    width: 180px;
  }
  .section-title h2::before,
  .section-title h2::after {
    top: 0;
  }
}
@media (min-width: 1280px){
  .portfolio .portfolio-item .portfolio-info {
    height: 60%;
  }
}
@media(min-width:1427px){
  #thirdCollapse {
    margin-top: -48px;
  }
  #thirdExpCollapse{
    margin-top: -74.5px;
  }
}
@media (min-width: 1500px){
  .portfolio .portfolio-item .portfolio-info {
    height: 70%;
  }
  #fourthCollapse {
    margin-top: -48px;
    padding-top: 40px;
  }
  #fifthCollapse {
    margin-top: -30px;
  }
  #firstExpCollapse {
    margin-top: -58px;
  }
  #secondExpCollapse {
    margin-top: -57px;
  }
  #thirdExpCollapse {
    margin-top: -75px;
    padding-top: 70px;
  }
  #fourthExpCollapse {
    margin-top: -58px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #040b14;
    --text-color: #ffffff;
    --heading-color: #eee;
    --surface-color: #505050;
    --surface-hover-color: #dcdcdc80;
    --tooltip-bg-color: #dcdcdc;
    --shadow-color: #d2d2d21a;
    --cv-shadow: -1px 1px 4px 1.5px rgba(250, 250, 250, 0.5);
  }
  .toolTip {
    --bs-tooltip-color: #fff;
  }
    #contactForm input[type=text],
    #contactForm input[type=email],
    #contactForm textarea {
      color: var(--surface-color);
      background-color: var(--nav-color);
      border-color: var(--heading-color);
      &:focus {
        border-color: var(--accent-color);
        background-color: var(--nav-hover-color);
        color: color-mix(in srgb, var(--surface-color), transparent 70%);
      }
      &:hover {
        color: color-mix(in srgb, var(--surface-color), transparent 70%);
        background-color: var(--tooltip-bg-color);
      }
    }
}

/*---------------------------------------------
# Disable aos animation delay on mobile devices
-----------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}