slider {
     font-family: Arial, sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100vh;
     margin: 0;
 }

 .slider-container {
     width: 300px;
     text-align: center;
 }

 input[type="range"] {
     width: 100%;
     -webkit-appearance: none;
     appearance: none;
     height: 6px;
     background: #ddd;
     border-radius: 5px;
     outline: none;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
     height: 20px;
     background: #007bff;
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }

 input[type="range"]::-moz-range-thumb {
     width: 20px;
     height: 20px;
     background: #007bff;
     border-radius: 50%;
     cursor: pointer;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }

 .range-labels {
     display: flex;
     justify-content: space-between;
 }
 
.able-zoom-container {
    position: absolute; /* Permite que o conteúdo role junto com a página */
    top: 0; /* Fixa no topo da tela */
    left: 0; /* Centraliza horizontalmente */
    transform-origin: top center; /* Origem do zoom no topo e centro */
    transform: translateX(-50%) scale(1); /* Centraliza e aplica o zoom inicial */
    margin: 0; /* Remove margens */
    padding: 0; /* Remove paddings */
    min-height: 100vh; /* Garante altura mínima para permitir rolagem */
    width: 100%; /* Ocupa 100% da largura */
    overflow-y: auto; /* Adiciona rolagem no container se necessário */
    background: white; /* Fundo branco para visualização limpa */
    transition: transform 0.2s ease-in-out; /* Suaviza o efeito do zoom */
}

input[type="range"]:focus {
    outline: 2px solid #007bff; /* Adiciona o contorno ao focar o slider */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* Adiciona o efeito de foco */
}

.slider-container a:focus {
    text-decoration: underline; /* Sublinha links que recebem foco */
}