@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');



  /* Původní CSS zůstává nezměněno */

  body {

    font-family: 'Roboto', sans-serif;

    line-height: 1.6;

    color: #333;

    max-width: 800px;

    margin: 0 auto;

    padding: 20px;

    background-color: #f4f4f4;

    transition: background-color 0.3s ease;

  }



  body.dark-mode {

    background-color: #2c3e50;

    color: #ecf0f1;

  }



  h1, h2 {

    color: #3498db;

    text-align: center;

    transition: color 0.3s ease;

  }



  .dark-mode h1, .dark-mode h2 {

    color: #5dade2;

  }



  .input-container, .contact-form, #result, #chart-container {

    background-color: #fff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    margin-bottom: 20px;

    transition: all 0.3s ease;

  }



  .dark-mode .input-container,

  .dark-mode .contact-form,

  .dark-mode #result {

    background-color: #34495e;

    box-shadow: 0 4px 6px rgba(0,0,0,0.3);

  }



  .dark-mode #chart-container {

    background-color: #d4d4d4;

    box-shadow: 0 4px 6px rgba(0,0,0,0.3);

  }



  .input-field {

    display: flex;

    align-items: center;

    margin-bottom: 15px;

  }



  .input-field input,

  .contact-form input,

  .contact-form textarea {

    flex: 1;

    padding: 10px;

    margin: 10px 0;

    border: 1px solid #ddd;

    border-radius: 4px;

    transition: all 0.3s ease;

    

  }



  .dark-mode .input-field input,

  .dark-mode .contact-form input,

  .dark-mode .contact-form textarea {

    background-color: #2c3e50;

    border-color: #5dade2;

    color: #ecf0f1;

  }



  .input-field label {

    min-width: 120px;

  }



  .percentage {

    margin-left: 10px;

    color: #3498db;

    font-weight: bold;

    transition: color 0.3s ease;

  }



  .dark-mode .percentage {

    color: #5dade2;

  }



  #total-sum {

    margin-top: 20px;

    font-weight: bold;

    font-size: 1.2em;

    color: #2c3e50;

    transition: color 0.3s ease;

  }



  .dark-mode #total-sum {

    color: #ecf0f1;

  }



  button {

    background-color: #3498db;

    color: #fff;

    border: none;

    padding: 10px 20px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.3s ease;

    width: 100%;

    margin-top: 10px;

  }



  button:hover {

    background-color: #2980b9;

    transform: translateY(-2px);

    box-shadow: 0 2px 4px rgba(0,0,0,0.2);

  }



  #download-buttons {

    display: flex;

    justify-content: space-between;

    margin-top: 20px;

    margin-bottom: 20px;

  }



  #download-buttons button {

    flex: 1;

    margin: 0 10px;

  }



  #toggle-mode {

    position: fixed;

    top: 20px;

    right: 20px;

    background-color: #34495e;

    color: #ecf0f1;

    border: none;

    padding: 10px;

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s ease;

    width: auto;

  }



  .dark-mode #toggle-mode {

    background-color: #ecf0f1;

    color: #34495e;

  }



  .fade-in {

    animation: fadeIn 0.5s ease-in;

  }



  @keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

  }



  .slide-in {

    animation: slideIn 0.5s ease-out;

  }



  @keyframes slideIn {

    from { transform: translateY(20px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

  }



  /* Nové styly pro vylepšení formuláře */

  .contact-form {

    display: flex;

    flex-direction: column;

    padding: 45px;

  }



  .contact-form input,

  .contact-form textarea {

    margin-bottom: 15px;

  }



  .contact-form button {

    align-self: flex-start;

    width: auto;

  }



  /* Styly pro tlačítko DATA */

  .data-button {

    display: inline-block;

    margin-top: 20px;

    text-decoration: none;

  }



  .data-button button {

    width: auto;

  }



  /* Přidané styly pro vyskakovací okno */

  .popup {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    z-index: 1000;

    border: 4px solid #3498db;

  }



  .dark-mode .popup {

    background-color: #34495e;

    color: #ecf0f1;

     border: 4px solid #3498db;

  }



  



  .close-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 20px;

    cursor: pointer;

    color: #333;

  }



  .dark-mode .close-btn {

    color: #ecf0f1;

  }

  



a:link {

    color: inherit;      

    text-decoration: underline; 

    }

a:visited,

a:hover {

    color: inherit;      

    text-decoration: underline; 

    }

a:active {

    color: inherit;      

    text-decoration: none; 

    }