* {
    user-select: none;
}

.wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    color: #fff;
    background-color: #242629;
}





.page {
    width: 540px;
    max-width: 100%;
}





h1 {
    font-size: 4rem;
}

h2 {
    font-size: 2.4rem;
}

.st-btn,
.int-btn,
.cnf-btn,
.qz-btn {
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1.25rem;
    font-weight: bold;
    border: none;
    background-color: #67BA49;
    color: #fff;
}

.st-btn:hover,
.int-btn:hover,
.cnf-btn:hover,
.qz-btn:hover {
    background-color: #1C8E0D;
    color: #fff;
}

.qz-btn {
    padding: .8rem 2rem;
    background-color: #78d756;
}

.dis-Btn {
    background-color: #bfe7b0;
    color: #000;
}

.dis-Btn:hover {
    color: #8AA680;
    background-color: #bfe7b0;
}

input {
    color: #fff;
    background-color: #3C3C3C;
    height: 3rem;
    border: none;
    border-radius: .6rem;
    padding-left: 1rem;
}

input:focus {
    outline: 2px solid #bfe7b0;
}

.custom-alert {
    color: #000;
    background-color: #e0e5ed;
    border-radius: 1rem;
}

.custom-alert button {
    color: #000;
    background-color: #67BA49;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1.25rem;
    font-weight: bold;
}

.custom-alert button:hover {
    color: #fff;
    background-color: #1C8E0D;
}

li {
    list-style: none;
    border: 2px solid #63676e;
    padding: 1rem 2rem;
    border-radius: 1rem;
    cursor: pointer;
}

.li-Hover:hover {
    background-color: #43454a;
}

.crct-Ans,
.crct-Ans:hover {
    background-color: #204220;
    border: 2px solid #00ff00;
}

.wrong-Ans,
.wrong-Ans:hover {
    background-color: rgb(70, 25, 25);
    border: 2px solid #ff0000;
}