body{
    background-color: #ffffff;
  }
  
  .slike{
      padding: 100px 130px 0px 170px;
  }
  
  .slika img{
      height: 330px;
      width: 510px;
  }
  
  .slika{
      margin-top: 30px;
      display: flex;
      justify-content: center;
      
  }
  
  .linkovi{
      display: flex;
      flex-direction: row;
  }
  .linkovi a{
      margin-right: 6px;
  }
  
  .opis{
    width: 500px;
    margin-left: 10px;
  }
  
  .tds{
    width: 1080px;
  }
  
  .toZoom {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }
    
    .toZoom:hover {opacity: 0.7;}
    
    .modal {
      display: none;
      position: absolute; 
      z-index: 1; 
      padding-top: 40px; 
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0,0.9); 
    }
    
    /* Modal Content (image) */
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      margin-top: 200px;
    }
  
    .demografskitrendovi{
      padding: 0px 130px;
      margin: 40px 0px;
    }
    
    /* Add Animation */
    .modal-content {  
      animation-name: zoom;
      animation-duration: 0.6s;
    }
  
    .customers {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
      margin-top: 20px;
    }
    
    .customers td, .customers th {
      border: 1px solid #ddd;
      padding: 8px;
    }
    
    .customers tr:nth-child(even){background-color: #f2f2f2;}
    
    .customers tr:hover {background-color: #ddd;}
    
    .customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: left;
      background-color: #5ca2ca;
      color: white;
    }
    
    @keyframes zoom {
      from {transform: scale(0.1)} 
      to {transform: scale(1)}
    }
    
    /* The Close Button */
    .close {
      position: absolute;
      top: 115px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
  
  
  
  
  
  
  /* dark */
  
  body.dark{
    background-color: #323335;
  }
  
  
  body.dark .customers th{
    background-color: rgb(37, 35, 35);
    color: #f1f1f1;
  }
  
  body.dark .customers td, .customers th {
    color: #f1f1f1;
    border: #35383b;
  }
  
  body.dark .customer td{
    background-color: #373838;
  }
  
  body.dark   .customers tr:nth-child(even){background-color: #4b4b4b;color: #c4c4c4;}
  
  body.dark   .customers tr:hover {background-color: #5f5f5f;color: #9e9e9e;}
  
  
  
    .knjige{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .knjiga{
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 40px;
        text-align: center;
    }
    
    .knjiga img{
        width: 250px;
        margin-bottom: 10px;
    }

  .knjiga h1{
    font-size: 23px;
    margin-bottom: 10px;
  }

  .knjiga a{
    font-size: 18px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: #2c2e30;
    padding: 8px 30px;
    border-radius: 6px;
  }


  .knjiga a:hover{
    background-color: #5ca2ca;
  }



    
    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
      .modal-content {
        width: 100%;
      }
      .demografskitrendovi{
        padding: 10px;
      }
      .slika{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }
      .slika img{
        width: 370px;
        height: 200px;
      }
      .slike{
        padding: 100px 130px 0px 130px;
      }
      .knjige{
        flex-direction: column;
      }
    }