queue.css

:root {
    --primary-light: #8abdff;
    --primary: #6d5dfc;
    --primary-dark: #5b0eeb;
    --white: #222222;
    --greyLight-1: #111111;
    --greyLight-2: #000000;
    --greyDark: #ffffff;
}

/* Reset styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    overflow-y: scroll;
    background: var(--greyLight-1);
}

@media screen and (min-width: 900px) {
    html {
        font-size: 75%;
    }
}

/* Container for queue page */
.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Poppins", sans-serif;
    background: var(--greyLight-1);
}

.components {
    width: 75rem;
    border-radius: 3rem;
    box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
    padding: 4rem;
    display: grid;
    grid-template-rows: repeat(autofit, -webkit-min-content);
    grid-template-rows: repeat(autofit, min-content);
    grid-row-gap: 2.5rem;
    align-items: center;
}

/* Queue header styling */
.queue-header {
    font-size: 2.4rem;
    color: var(--primary-dark);
    padding: 1rem 0;
}

/* Queue info section */
.queue-info p {
    font-size: 1.6rem;
    color: var(--greyDark);
    margin-bottom: 1rem;
}

/* Queue list styling */
.queue-list {
    background-color: var(--greyLight-1);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}

.queue-list p {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 1rem;
}

#studentList li {
    font-size: 1.6rem;
    color: var(--greyDark);
    list-style-type: none;
}

#studentList li:nth-child(odd) {
    color: var(--greyDark);
}

#studentList li:nth-child(even) {
    color: var(--greyLight-2);
}

/* Highlight "YOU" in red */
#studentList li:nth-child(n) {
    color: var(--greyDark);
}

#studentList li:contains("YOU") {
    color: red;
    font-weight: bold;
}

/* Button styling */
button, .btn {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    padding: 1.5rem;
    background-color: var(--primary);
    color: var(--greyLight-1);
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
    text-align: center;
    font-size: 1.4rem;
    border: none;
    margin-top: 1rem;
}

button:hover, .btn:hover {
    color: var(--white);
}

button:active, .btn:active {
    box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);
}