/* Start Global */
:root {
       --main-color: #216af3;
       --secondary-color: #ffffff;
}
html {
       direction: rtl;
       scroll-behavior: smooth;
}
* {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
}
body {
       font-family: 'Cairo', sans-serif;
}
/* End Global */
/* Start Main */
.main {
       background-image: url('../images/background.jpg');
       background-repeat: no-repeat;
       background-size: cover;
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 10px;
       position: relative;
       z-index: 1;
}
.main::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgb(0 0 0 / 35%);
       z-index: -1;
}
/* End Main */
/* Start Choose */
.choose.hide {
       display: none;
}
.choose button {
       padding: 20px;
       border: none;
       outline: none;
       border-radius: 5px;
       color: var(--main-color);
       font-weight: bold;
       font-size: 25px;
       cursor: pointer;
       display: block;
       margin-bottom: 20px;
}
.choose button.hide {
       display: none;
}
/* End Choose */
/* Start First */
.first.hide {
       display: none;
}
.first button {
       padding: 20px;
       border: none;
       outline: none;
       border-radius: 5px;
       color: var(--main-color);
       font-weight: bold;
       font-size: 25px;
       cursor: pointer;
}
/* End First */
/* Start Second */
.seconde {
       background-color: var(--secondary-color);
       border-radius: 5px;
}
.seconde.hide {
       display: none;
}
.seconde h2 {
       border-bottom: 1px solid #ccc;
       margin-bottom: 20px;
       padding: 15px;
}
.seconde .rules {
       padding: 15px;
}
.seconde p {
       margin-bottom: 20px;
       font-size: 18px;
}
.seconde .buttons {
       padding: 15px;
       border-top: 1px solid #ccc;
}
.seconde button {
       border: none;
       outline: none;
       border-radius: 5px;
       padding: 8px;
       font-weight: bold;
       cursor: pointer;
}
.seconde .buttons .continue {
       background-color: var(--main-color);
       color: var(--secondary-color);
}
.seconde .buttons .exit {
       border: 1px solid var(--main-color);
       color: var(--main-color);
       background-color: var(--secondary-color);
}
/* End Second */
/* Start Main Page */
.main-page {
       background-color: var(--secondary-color);
       border-radius: 5px;
       width: 500px;
       max-width: 100%;
       text-align: center;
       padding: 15px;
}
.main-page.hide {
       display: none;
}
.main-page .main-img {
       min-height: 200px;
       padding: 15px;
       margin-bottom: 20px;
       margin-top: 20px;
       border: 2px solid var(--main-color);
}
.main-page .main-img img {
       max-width: 100%;
}
.main-page .answers {
       padding: 15px;
       border-bottom: 1px solid #ccc;
}
.main-page .answers p {
       padding: 10px;
       background-color: rgb(33 106 243 / 34%);
       margin-bottom: 10px;
       border-radius: 5px;
       font-size: 18px;
       cursor: pointer;
}
.main-page .answers p.true {
       background-color: rgb(0 128 0 / 70%);
}
.main-page .answers p.false {
       background-color: rgb(255 0 0 / 70%);
}
.main-page .question-number {
       padding: 15px;
       display: flex;
       justify-content: space-between;
       align-items: center;
}
.main-page .question-number .next {
       border: none;
       outline: none;
       padding: 8px;
       background-color: var(--main-color);
       color: var(--secondary-color);
       border-radius: 5px;
       cursor: pointer;
}
.main-page .question-number .next.hide {
       pointer-events: none;
       background-color: rgb(33 106 243 / 34%);
}
.main-page .question-number span {
       font-size: 18px;
       font-weight: bold;
}
/* End Main Page */
/* Start Score Page */
.score-page {
       width: 500px;
       max-width: 100%;
       background-color: var(--secondary-color);
       color: var(--main-color);
       padding: 15px;
       border-radius: 5px;
       font-size: 25px;
       text-align: center;
}
.score-page .emojy {
       font-size: 40px;
       display: block;
       margin-bottom: 30px;
}
.score-page .your-score {
       font-size: 40px;
       font-weight: bold;
}
.score-page.hide {
       display: none;
}
/* End Score Page */
/* Start footer */
footer {
       width: 100%;
       text-align: center;
       position: fixed;
       bottom: 0;
       padding: 15px;
       background-color: var(--secondary-color);
}
footer a {
       text-decoration: none;
       color: var(--main-color);
}
/* End footer */