/* Color variables */
:root {
  --white-color: #fff;
  --bg-color: #fff;
  --gray-color: #ccc;
}

/* Changing background color */
body {
  background: var(--bg-color) !important;
}

/* Changing link color */

.nav-item .nav-link {
  color: var(--white-color);
}

    .video-container {
      position: relative;
      width: 100%;
      height: 540px;  /* 600px */
      overflow: hidden;
    }
    
    /*
    video {
      width: 426px;
      height: 240px;
    }
    */
    
    
    .video-container video {
    
       width: 100%; height: 100%; object-fit: contain;
        
      /*
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      */
    }

    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 3em;
      font-weight: bold;
      text-align: center;
    }

/* Hero section background image */
.hero {
  height: 100vh;
  background-image: url("../images/under-construction.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#skills i {
  height: 100px;
  width: 100px;
}

#portfolio img {
  height: 300px;
  object-fit: cover;
}

#about .img,
#about img,
.hire-text h2 {
  position: relative;
}

/* Timeline background line */
#about .img::before {
  content: "";
  left: 50%;
  width: 10px;
  position: absolute;
  height: calc(100% + 140px);
  background: var(--gray-color);
}

#about img,
#about .hire-text h2 {
  width: 140px;
}

#about .hire-text h2 {
  height: 140px;
}

.social-icons a {
  width: 40px;
  height: 40px;
}

footer .social-icons a {
  width: 30px;
  height: 30px;
}

#cv img {
  width: 230px;
}

/* Contact section background image */
#contact {
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-image: url("../images/contact-bg.jpeg");
}

@media screen and (max-width: 990px) {
  #skills .card {
    width: calc(100% / 2 - 10px) !important;
  }
}

@media screen and (max-width: 668px) {
  #skills .card,
  #portfolio .card-wrapper {
    width: 100% !important;
  }
}

/* */