* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input,
button,
textarea,
select {
    font: inherit;
    border: none;
    outline: none;
    background: none;
}

body {
    background: linear-gradient(45deg, rgb(31, 22, 105), rgb(67, 126, 79));
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Jost", sans-serif;
    padding: 50px;
}


.container {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 13px 14px 9px 6px rgba(34, 60, 80, 0.28);

}

.start-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    gap: 30px;

}

.start-title {
    font-size: 30px;
}

.test__title {
    width: 100%;
    color: #fff;
    font-size: 25px;
    justify-content: center;
    display: flex;
    padding: 30px;
    background: linear-gradient(135deg, rgb(78, 67, 178), rgb(12, 116, 139));
    border-top-left-radius: 27px;
    border-top-right-radius: 27px;
    box-shadow: 9px 8px 16px -7px rgba(255, 255, 255, 0.6) inset;
}

.start-desc {
    font-size: 20px;
    font-weight: 700;
}

#start-btn {
    background: linear-gradient(90deg, rgb(41, 65, 137), rgb(50, 163, 180));
    padding: 10px;
    color: #fff;
    border-radius: 7px;
    transition: filter 0.6s ease, transform 0.3s ease;
    cursor: pointer;
    box-shadow: 5px 5px 9px 6px rgba(34, 60, 80, 0.28);
}

#start-btn:hover {
    filter: hue-rotate(90deg);
    transform: translateY(-3px);
}

.question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    gap: 30px;
}

.question-disc {
    font-size: 20px;
    font-weight: 700;
}

.answers {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.option-btn {
    width: 100%;
    padding: 3px 10px;
    background-color: #dad9d9;
    border-radius: 20px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.6) inset;
}

.option-btn:hover {
    scale: 1.03;
}

#feedback {
    display: flex;
    justify-content: center;
    gap: 50px;
}

#next-btn {
    padding: 7px;
    background-color: #4f98aa;
    border-radius: 10px;
    box-shadow: 9px 8px 16px -7px rgba(255, 255, 255, 0.6) inset;
    transition: transform 0.3s ease;
    cursor: pointer;
}

#next-btn:hover {
    transform: translateX(10px);
}

.correct-answer {
    display: flex;
    align-items: center;
    font-weight: 900;
}

#input-answer {
    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
    padding: 10px;
    width: 100%;
    border-radius: 10px;
}

#submit-answer {
    padding: 7px;
    background-color: #4f98aa;
    border-radius: 10px;
    box-shadow: 9px 8px 16px -7px rgba(255, 255, 255, 0.6) inset;
    cursor: pointer;
}

#submit-answer:hover {
    scale: 1.03;
}

.correct-user-answer {
    background-color: #d3f3bd;
    border: 2px solid #089e08;
    border-radius: 5px;
    padding: 5px;
}

.incorrect-user-answer {
    background-color: #ebb1b1;
    border: 2px solid #db1515;
    border-radius: 5px;
    padding: 5px;
}

.results {
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 10px;
}

.result-title {
    text-align: center;
    font-size: 35px;
}

.result-desc {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
}

.result-score {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.restart-btn {
    display: flex;
    justify-content: center;
}
#restart-btn {
    padding: 10px 20px;
    background-color: #6f77c0;
    border-radius: 10px;
    box-shadow: 5px 5px 9px 6px rgba(34, 60, 80, 0.28);
    cursor: pointer;
    font-weight: 700;
}

#restart-btn:hover {
    scale: 1.3;
}

.correct {
    background-color: #90e469;
}

.incorrect {
    background-color: #d87d7d;
}