.body {
    margin: opx;
    padding: 0px;    
}
.zaglavlje{
    font-size: 13px;
    text-shadow: 2px 2px 2px white;
    color: rgba(61, 25, 139, 0.842);
    background: linear-gradient(white, rgb(179, 173, 236), white)   
}
.zaglavlje >h1{
    text-align: center; 
}
#header{
    text-align: center;
    display: flex;
    justify-content: space-between;
}
#header img{
    width: 70px;
    height: 70px;
}
/* Add a black background color to the top navigation */
.topnav {
    background-color: #463096 ;
    overflow: hidden;
    
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    
  }
  
  /* Add an active class to highlight the current page */
  .active {
    background-color: #9380d4;
    color: white;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    float: left;
    overflow: hidden;
    
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
   
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color:  #4c34a5;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: rgb(255, 252, 252);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color:#9380d4 ;
    color: white;
    transition: 200ms;
  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #9380d4;
    color: rgb(249, 248, 248);
    transition: 200ms;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
 
  
#table{
    background-color: white;
    height: auto;
}
.tabela{
    display: flex;
    justify-content: space-between;
    color: black; 
    font-size: 12px;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 30px;
}
tr:nth-child(odd) {
    background-color: #f2f2f2;
  }
#footer{
    display: flex;
    flex-direction: column;
     background-color: rgb(189, 188, 188);
     color: rgb(70, 69, 69);
     padding-left: 20px;
     padding-top: 5px;
 }
 #myBtn {
  display: none;
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(54, 42, 113); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 25px; /* Increase font size */
}

#myBtn:hover {
  background-color:  #9380d4; /* Add a dark-grey background on hover */
}
 #footer img{
     float: left;
     width: 20px;
     height: 20px;
     padding: 0px 15px 5px 0px;
    } 
    @media screen and (max-width: 600px){
        .topnav a:not(:first-child), .dropdown .dropbtn {
            display: none;
    
          }
          .topnav a.icon {
            float: right;
            display: block;
            padding: 10px;
          }
          .topnav.responsive {position: relative;}
          .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
          }
          .topnav.responsive .dropdown {float: none;}
          .topnav.responsive .dropdown-content {position: relative;}
          .topnav.responsive .dropdown .dropbtn {
           display: block;
            width: 100%;
            text-align: left;
          }
        #header{
            padding-top: 10px;
            font-size: 6px;
        }
        #header img{
          border-radius: 50%;
            width: 40px;
            height: 40px;
            padding-bottom: 3px;
        }
        #table{
            height: auto;
        }
        .tabela{
            flex: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            font-size: 13px;
           
        }
        #footer{
          display: flex;
          flex-direction: column;
           background-color: rgb(189, 188, 188);
           color: rgb(70, 69, 69);
           padding-left: 15px;
           padding-top: 5px;
        }
        #footer img{
           float: left;
           width: 20px;
           height: 20px;
           padding: 3px;
          
        }
         }
         @media only screen and (min-width: 601px) and (max-width: 768px){
          .tabela{
            flex: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            font-size: 13px;
            }
         }
         @media only screen and (min-width: 601px) and (max-width: 992px){
          .tabela{
            flex: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            font-size: 13px;
            }
            #table{
              height: auto;
            }
        }
        @media only screen and (min-width: 993px) and (max-width: 1369px){
          .tabela{
            flex: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            font-size: 13px;
            }
            #table{
              height: auto;
            }
        }