  /* CSS Document */  
  body {
    font-family: Lato, sans-serif;
    color: #fff;
    min-height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    scroll-behavior: auto;
    font-size: 16px;


    background-size: cover;
            background-position: center;
            transition: background-image 0.2s ease-in-out; /* Optional: for a smooth transition */
     }

span.najvecaslova  {
    font-size: 50px;
     }
span.velikaslova  {
    font-size: 35px;
     }
     span.vecaslova  {
     /* font-weight: bold ; */
    font-size: 25px;
     }

   .navbar-brand {
        color: #fff;
    } 
    .navbar-brand:hover {
        color: orange; cursor: pointer; 
    }  

ul.navbar-nav a:hover { color: orange !important; cursor: pointer; }

     /* change navbar background on collapse */
@media (max-width: 992px) {
    nav.navbar {
      background: rgba(0,0,0,1);
    }
}

   .navbar.fixed-top.scrolled {
    background-color: #000 !important;
    transition: background-color 200ms linear;
  }

  #navbar {
    border-color: rgba(255, 255, 255, 0.8) !important;
    background-color: #000 !important;
  }

   .my-footer-hr {
      border-top-width: 1px; /* Example: sets the line height to 2px */
      border-color: rgba(255, 255, 255, 0.8)  /* Example: changes the line color */
    }


    .fa.fa-navicon, .fa.fa-navicon:active {
            color:white;
            border:1px; border-color: #fff;
          }

    .flex-fill {
        flex: 1 1 auto;
     } 
    
.rounded-div {
  border: 2px solid #000; /* Sets a 2px solid border with a dark grey color */
  border-radius: 15px;    /* Rounds all corners with a radius of 15 pixels */
  margin: 20px;
  padding: 20px;          /* Adds internal spacing */
   /* width: 200px;          Sets a fixed width */
  /*height: 100px;           Sets a fixed height */
  background-color: rgba(10,10,10,0.5);
}

.active-link {
  color: orange  !important;
}
  #napis {
      text-decoration: underline;
      text-decoration-color: orange;
      text-decoration-thickness: 3px;
      text-underline-offset: 5px;
        }
  .podvuci {
      text-decoration: underline;
      text-decoration-color: orange;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
        }


    .my-background-div {
        width: 100%; /* Or a fixed width like 500px */
        height: 100%; /* Or a fixed height */
         
        background-size: cover; /* Or contain, auto, specific values */
        background-position: center; /* Or top, bottom, left, right, specific values */
        background-repeat: no-repeat; /* Or repeat, repeat-x, repeat-y */
    }        

    a, a:hover {
      color: orange;
      text-decoration: underline;
      text-decoration-color: orange;
        }