body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
    text-align: center;
}

.navbar {
    display: flex;
    background-color: black;
    justify-content: center;
    padding: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    margin: 0 20px;
}

.navbar a:hover {
    background-color: #f5f5f5;
    color: #000000;
}

main {
    flex-grow: 1;
}

footer {
    background-color: #f5f5f5;
    color: #000000;
    padding: 10px;
    text-align: center;
    margin-top: 10px;
}

.grid-quiz-items {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.quiz-item-container {
    border: 2px solid #000000;
    padding: 10px;
}

.text-align\:center {
    text-align: center;
}

.quiz-button {
    box-sizing: inherit;
    margin: 0;
    font-style: inherit;
    font-weight: inherit;
    display: -webkit-flex;
    color: #000;
    background: transparent;
    align-items: center;
    box-shadow: 0 4px 2px rgba(45,35,66,.4),0 0 3px 0 rgba(45,35,66,.3),inset 0 -5px 0 #54545433;
    transition: box-shadow .15s ease,transform .15s ease,-webkit-box-shadow .15s ease,-webkit-transform .15s ease;
    border: 0 solid #000;
    border-width: clamp(.2rem,2vw,.1rem);
    padding: .5rem 1rem;
    cursor: pointer;
    font-size: 70%;
}

.quiz-button:active {
    -webkit-box-shadow: inset -4px 2px 5px #89464833;
    box-shadow: inset -4px 2px 5px #89464833;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}