/* ========================================
   Base Styles
======================================== */
html {
    scroll-behavior: smooth;
    min-height: 100%;
  }
  
  body {
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/codes-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: filter 0.3s ease-in-out;
    z-index: -1; /* Ensures background stays behind everything */
  }
  
  .background-blur::before {
    filter: blur(10px);
  }
  
  
  /* ========================================
     Navigation
  ======================================== */
  .navbar-burger span {
    background-color: white !important; /* Makes the hamburger lines white */
  }
  
  .navbar-brand img {
    filter: invert(1);
  }
  
  
  /* ========================================
     Layout & Sections
  ======================================== */
  .media-left {
    display: flex;
    align-items: center;
  }
  
  .section, .box {
    overflow: visible;
  }
  
  
  /* ========================================
     Components
  ======================================== */
  .message {
    transition: transform 0.3s ease-in-out !important;
  }
  
  .message:hover {
    transform: scale(1.05) !important;
    transform-origin: center;
  }
  
  #main-logo {
    transition: transform 0.3s ease-in-out;
  }
  
  #main-logo:hover {
    transform: scale(1.2); /* Increases the size by 20% */
  }
  
  
  /* ========================================
     Animations
     Generated by Animista on 2025-4-1 10:5:17
     Licensed under FreeBSD License.
     http://animista.net/license 
  ======================================== */
  
  /**
   * ----------------------------------------
   * animation puff-in-center
   * ----------------------------------------
   */
  @-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  
  #titleHeaderBox {
    -webkit-animation: puff-in-center 2.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: puff-in-center 2.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  }
  

    /* ========================================
     Mobile Alterations
  ======================================== */
  @media (max-width: 768px) {
    body::before {
      background-attachment: scroll !important;
      position: absolute !important;
    }
  }