/**
* Version: Version 2.2.0 with Bootstrap v5.3.3
* Author: github.com/TheNocturnalDevGypsy [ Abegail Baustista Torrendon ]
* Template Name: Link in Bio - Lite : Style 6
* GitHub Source: https://github.com/thenocturnaldevgypsy/bootstrap-coded-templates
* License: MIT License - https://github.com/thenocturnaldevgypsy/bootstrap-coded-templates/blob/master/LICENSE
*/

body {
   display: flex;
   align-items: center;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 40px;
   padding-right: 40px;
   font-family: Ubuntu, sans-serif;
   letter-spacing: 1px;
   position: relative;
   min-height: 100vh;
   overflow-x: hidden;
}

/* Video background */
.video-background {
   position: fixed; /* Fix the video so it doesn't scroll */
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: -1; /* Ensure it’s behind the content */
   overflow: hidden;
}

.video-background iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   border: 0;
   object-fit: cover;
   pointer-events: none; /* Prevent interaction with the video */
}

h1 {
   font-size: 18px;
   font-weight: bold;
   color: #CCDBEC;
}

h2 {
   font-size: 15px;
   font-weight: bold;
   color: #CCDBEC;
}

p {
   font-size: 12px;
   color: #CCDBEC;
}

a {
  color: #2c4c6e;
  transition: 0.3s ease;
  text-decoration: none;
}

a:hover {
  color: #CCDBEC;
  text-decoration: underline;
}

.linkinbio-main-container {
   width: 100%;
   max-width: 768px;
   text-align: center;
   padding-bottom: 30px;
   padding-left: 30px;
   padding-right: 30px;
   background-color: #101010cc; /* with 80% opacity */
   border-radius: 25px;
   margin: 40px auto;
}

.linkinbio-profile-header {
   margin-top: 40px;
   margin-bottom: 20px;
}

.linkinbio-profile-pic {
   width: 180px;
   height: 180px;
   border-radius: 50%;
   object-fit: cover;
   margin-top: 10px;
   margin-bottom: 20px;
}

.linkinbio-social-icons a {
   color: #2c4c6e;
   margin: 0 5px;
   font-size: 24px;
   text-decoration: none;
   transition: 0.3s ease;
}

.linkinbio-social-icons a:hover {
   color: #CCDBEC;
}

.linkinbio-quick-links {
   margin: 20px 0;
}

.linkinbio-link-button {
   display: block;
   width: 100%;
   padding: 15px;
   margin-top: 12px;
   background-color: #2c4c6e;
   color: #CCDBEC;
   text-decoration: none;
   border-radius: 20px;
   border-color: #2c4c6e;
   font-size: 11.5px;
   font-weight: bold;
   border: 2px solid #2c4c6e; /* Smooth 2px border on hover */
   transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition for background and border */
}

.linkinbio-link-button:hover {
   color: #101010;
   background-color: #CCDBEC;
   border: 2px solid #2c4c6e; /* Smooth 2px border on hover */
}

.linkinbio-footer {
   font-size: 12px;
   color: #CCDBEC;
   margin-top: 30px;
}

/* For Shaking Button */
@keyframes shake {
   0% { transform: translateX(0); }
   25% { transform: translateX(-10px); }
   50% { transform: translateX(10px); }
   75% { transform: translateX(-10px); }
   100% { transform: translateX(0); }
}

.shake {
   animation: shake 0.5s ease;
}

/* Responsive width adjustment */
@media (min-width: 768px) {
   body {
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 10px;
      padding-right: 10px;
   }
   .linkinbio-main-container {
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
   }
}