@import url(./style.css); /* Import de style.css */

h2{
    text-align: center;
    font-size: 2em;
    padding-top: 15px;
    font-weight: bolder;
}

h3{
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -5px;
    text-decoration: none;
}

a{
    text-decoration: none;
}

.linkQuiz img{
    width: 14vw;
    height: 22vh;
    object-fit: cover;
    border-radius: 10px 10px 0px 0px;
    margin : 10px;
}

.quizCard{
    text-align: center;
    border-radius: 15px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

.quiz-container{
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: start;
    align-items: self-start;
    gap: 2vw;
    margin-top: 2em;
    min-height: 68vh;
    width: 95vw;
    padding: 15px;
    border-radius: 15px;
}

/* Dark mode */

.dark-mode h3 {
    color: white;
}

.dark-mode .quizCard {
    background: var(--main-dark-gradient);
}

.dark-mode .quiz-container {
    background: black;
}

/* Light mode */

.light-mode h3 {
    color: black;
}

.light-mode .quizCard {
    background: var(--main-light-gradient);
}

.light-mode .quiz-container {
    background: #46BE73;
}