:root {
    --buttons-hover: #4430b3;
    --buttons: #9b8fe3;
    --text-color: #27243a;
    --base-color: rgb(112, 110, 110);
    --white: #cdcdcd;
}
.card{
    width: 100%;
    height: 100%;
    background-color: var(--white);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    color: #333;
    margin: 50px;
}
.card p{
    font-weight: 500;
    color: #000;
    margin: 30px;
}
label{
    display: block;
    width: 200px;
    background-color: #98c1d9;
    color: var(--white) solid 50px;
    padding: 12px;
    margin: 80px auto;
    border-radius:5px;
    cursor: pointer;
}
label .btn{
    color: var(--white);
}
input{
    display: none;
}
.hidden{
    display: none;
}
.card {
    width: 50%;
    max-width: calc(100% - 8rem);
    margin: 4rem auto;
    margin-top: 8rem; ;
    background: var(--white);
    padding: 2rem;
    border-radius: 1.5rem;
    text-align: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#preview {
    display: none;
    max-width: 100%;
    margin-top: 1rem;
    border-radius: 0.5rem;
    align-items: center;
}
.hidden {
    display: none;
    margin-top: 1rem;
}
#quiz, #analyzeBtn {
    width: 100%;
    margin-top: 10px;
}
.btn_1{
    color: var(--white);
}