/* Corpo da página */
body {
    font-family: sans-serif;
    background-color: #a000fd;
    display: flex;
    justify-content: center;
    padding: min(5%, 50px); /* padding responsivo */
}

/* Container principal */
.container {
    background-color: #ffffff;
    padding: min(5%, 50px); /* padding responsivo */
    border-radius: min(50em, 50px);
    box-shadow: 0px min(2px, 8px) min(10px, 100px) rgb(0, 255, 76);
    width: min(90%, 300px); /* não ultrapassa 300px, mas encolhe em telas pequenas */
}

/* Formulário */
form {
    display: flex;
    flex-direction: column;
    gap: min(1em, 10px); /* espaçamento responsivo */
}

input, button {
    padding: min(0.5em, 10px);
    border: 1px solid #ddd;
    border-radius: min(0.5em, 4px);
}

button {
    background-color: #fff;
    color: #000;
    cursor: pointer;
    border: none;
    transition: 0.3s;
}

button:hover {
    background-color: #000;
    color: #fff;
}

/* Lista de alunos */
ul {
    list-style: none;
    padding: 0;
}

li {
    background: #eee;
    margin-top: min(0.5em, 5px);
    padding: min(0.5em, 8px);
    border-radius: min(0.5em, 4px);
    display: flex;
    justify-content: space-between;
}

/* Cabeçalhos */
h1 {
    font-variant: unset;
}

/* Container de áudios fixo no rodapé */
.audio-container {
    position: fixed;          /* Fixa no viewport */
    bottom: min(1em, 20px);   /* distância do rodapé */
    left: 50%;                /* centraliza horizontalmente */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: min(0.5em, 10px);
    background-color: rgba(255, 255, 255, 0.8); /* fundo levemente transparente */
    padding: min(0.5em, 10px);
    border-radius: min(0.5em, 10px);
    box-shadow: 0px 0px min(5px, 10px) rgba(0,0,0,0.3);
    z-index: 1000; /* garante que fique acima do conteúdo */
}