/* General Styles */
    body {
      font-family: 'Arial', sans-serif;      
      background-color: #f4f4f9;
      color: #333;      
      align-items: center;
      justify-content: center;            
      background-image: url('qrwhiskey.png'); /* Replace with your PNG file path */   

   height: 90vh; /* Set the height to the full viewport height */
      background-image: url('qrwhiskey.png'); /* Replace with your PNG file path */
      background-size: cover; /* Ensures the image covers the entire space */
      background-position: center; /* Centers the image */  
    }

    h1, h2 {
      margin-top: 20px;
      text-align: center;
    }

   /* Styling the h1 element */
    h1 {
      font-size: 2rem;
      color: white;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Adds a shadow effect to the text */
      animation: glow 2s infinite alternate; /* Adds a glowing animation */
    }

    /* Keyframes for glowing effect */
    @keyframes glow {
      from {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.5);
      }
      to {
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 255, 255, 1);
      }
    }

    h2 {
      font-size: 1.8rem;
      color: #0056b3;
    }

    p {
      font-size: 1rem;
      margin: 10px 0;
      line-height: 1.6;
      text-align: justify;
    }

/* Container Styles */
.container {
  width: 90%;
  max-width: 600px; /* Optional: Set a max-width for larger screens */
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin: 10px auto; /* Center the container horizontally */
  display: flex; /* Use flexbox for alignment */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
  justify-content: center; /* Center children vertically */
}

   

    .section {
      margin-bottom: 30px;
    }

    /* Input and Button Styles */
    input[type="file"],
    input[type="text"] {
      width: 95%;
      padding: 10px;
      margin: 10px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1.5rem;
color: green

    }

    button {
      width: 100%;
      padding: 10px;
      font-size: 1rem;
      color: #fff;
      background-color: #007BFF;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #0056b3;
    }

    button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    /* Output and Generator Styles */
    #output, #generator {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: #f9f9f9;
      text-align: left;


    }

    #output p, #generator p {
      margin: 5px 0;
    }

    canvas {
      margin-top: 10px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    /* Responsive Design */
    @media (max-width: 600px) {
      h1 {
        font-size: 2rem;
      }

      h2 {
        font-size: 1.5rem;
      }

      button {
        width: 100%;
      }

      .container {
        padding: 15px;
      }

      input[type="file"],
      input[type="text"] {
        font-size: 0.9rem;
      }
    }

    /* Toggle Buttons Styles */
    .container {
      margin-top: 20px;
    }

    .toggle-buttons {

display: flex; /* Use flexbox for alignment */
  flex-direction: row; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
  justify-content: center; /* Center children vertically */

     
      gap: 10px;
      margin-bottom: 20px;
    }

    .toggle-buttons button {
      padding: 10px 20px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      color: #333;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
width: 150px;
height: 70px;

    }
    .toggle-buttons button.active {
      background-color: #28a745;
      color: white;
      border-color: #28a745;
    }
    .hidden {
      display: none;
    }

#downloadPngButton {
    background-color: green;
 margin-bottom: 5px;
}

#downloadSvgButton {
     background-color: green;
 margin-bottom: 5px;
}

#downloadPngButton:hover {
      background-color: #0056b3;
    }

#downloadSvgButton:hover {
      background-color: #0056b3;
    }




#readerButton:hover {
      background-color: #0056b3;
color: white;
    }

#generatorButton:hover {
      background-color: #0056b3;
color: white;
    }

#output {

color: green;

}


#footer {
    color: gray; /* Gray text for readability */
    text-align: center; /* Center the text */
    padding: 10px; /* Add some padding for spacing */
    position: relative; /* Corrected from 'reative' to 'relative' */
    font-family: Arial, sans-serif; /* Change font for a modern look */
    border-top: 0px solid #555; /* Optional: add a top border for separation */
  
}

#footer p {
    margin: 0; /* Remove default margin */
    font-size: 1em; /* Font size for emphasis */
 text-align: center; /* Center the text */
}