body{font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; flex-direction: column; justify-content: flex-start; /* Cambiado a flex-start para permitir el scroll */ align-items: center; min-height: 100vh; /* Cambiado a min-height para permitir el scroll */ margin: 0; padding: 20px; box-sizing: border-box; overflow-y: auto; /* Asegurar que haya scroll vertical */}.container{background-color: white; padding: 20px; border-radius: 12px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); text-align: center; max-width: 600px; width: 100%; margin-bottom: 20px; position: relative; /* Añadir posición relativa para posicionar el toggle button */}.logo{width: 150px; margin-bottom: 20px;}h1{color: #044c3b; margin-bottom: 20px;}.quick-select{padding: 10px; border: none; border-radius: 8px; background-color: #4bcc8c; color: white; cursor: pointer; font-size: 16px; margin: 5px; transition: background-color 0.3s, transform 0.3s;}.quick-select:hover{background-color: #044c3b; transform: scale(1.05);}.quick-select-container{display: flex; justify-content: center; margin-bottom: 20px; flex-wrap: wrap;}.lorem-ipsum{margin-top: 20px; font-size: 14px; color: #555; text-align: left;}.copy-button{padding: 10px; border: none; border-radius: 8px; background-color: #4bcc8c; color: white; cursor: pointer; font-size: 16px; margin-top: 10px; transition: background-color 0.3s, transform 0.3s;}.copy-button:hover{background-color: #044c3b; transform: scale(1.05);}.button-container{display: flex; justify-content: center; margin-top: 20px;}body.dark-mode{background-color: #121212; color: #e0e0e0;}body.dark-mode .container{background-color: #1e1e1e; color: #e0e0e0;}body.dark-mode .quick-select{background-color: #444444; color: #ffffff;}body.dark-mode .quick-select:hover{background-color: #666666;}body.dark-mode .lorem-ipsum{color: #bbbbbb;}body.dark-mode .copy-button{background-color: #444444; color: #ffffff;}body.dark-mode .copy-button:hover{background-color: #666666;}.toggle-button{background-color: transparent; border: none; cursor: pointer; position: absolute; /* Cambiado a posición absoluta */ top: 10px; /* Ajusta según sea necesario */ right: 10px; /* Ajusta según sea necesario */ padding: 0; width: auto; height: auto; outline: none; /* Ensures no outline on focus */}.toggle-button img{width: 24px; height: 24px; transition: filter 0.3s;}.toggle-button:hover{background-color: transparent; /* Ensures no background */}.toggle-button:hover img{filter: brightness(0.5);}body.dark-mode .toggle-button{background-color: transparent; /* Ensures no background in dark mode */}body.dark-mode .toggle-button:hover{background-color: transparent; /* Ensures no background in dark mode on hover */}body.dark-mode .toggle-button img{filter: brightness(0) invert(1);}body.dark-mode .toggle-button:hover img{filter: brightness(0.7) invert(1);}.custom-message{position: fixed; bottom: 20px; right: 20px; background-color: #4bcc8c; color: white; padding: 10px 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transition: opacity 0.5s; opacity: 1; z-index: 1000;}