body {
    background-color: white;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Noto Sans', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

h1 {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-size: 26px;
    color: #00be00;
    max-width: 100%;
    overflow-x: auto;
    border: 3px solid #00be00;
    white-space: pre;
    letter-spacing: normal;
    line-height: 1.4;
}

pre {
    background-color: rgb(255, 255, 255);
    padding: 20px;
    font-weight: bold;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-size: 18px;
    color: #000000;
    max-width: 90%;
    overflow-x: auto;
    border: 4px solid #00be00;
    background-image: url('https://www.transparenttextures.com/patterns/islamic-geometric-pattern.png');
    background-repeat: repeat;
    font-family: 'Consolas', 'Courier New', monospace;
    white-space: pre;
    letter-spacing: normal;
    line-height: 1.4;
}

.archprophet, .messenger, .nonMessenger, .adam, .tribe, .important, .abbasid, .umayyad,
.motherofall, .wife, .mother, .sister, .wife-sister, .wife-mother, .dau-wife, .prophet-mother {
    font-weight: bold;
}

.archprophet { color: #01ff01; }
.messenger { color: #FFD700; }
.nonMessenger { color: #1E90FF; }
.adam { color: #FF5733; }
.tribe { color: #8B4513; }
.important { color: #800080; }
.abbasid { color: #5F9EA0; }
.umayyad { color: #B22222; }
.motherofall { color: #FF7F50; }
.wife { color: #20B2AA; }
.mother { color: #4682B4; }
.sister { color: #ff004c; }
.wife-sister { color: #9932CC; }
.wife-mother { color: #ff00b3; }
.dau-wife { color: #FF6347; }
.prophet-mother { color: #009959; }
.navigation-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.nabi{
    color: red;
}
.rasul{
    color: green;
}

.navigation-links a {
    text-decoration: none;
    font-size: 24px;
    margin: 20px;
}

.previous {
    margin-left: 20px; /* Move the 'Previous' button a bit more to the left */
}

.next {
    margin-right: 20px; /* Move the 'Next' button a bit more to the right */
}

.footer {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: #666666;
    margin-top: 40px;
}

.footer .credit {
    font-size: 20px;
    color: #999999;
    font-style: italic;
    margin-top: 5px;
}

.footer .credit a {
    color: #007bff;
    text-decoration: none;
}

.footer .credit a:hover {
    text-decoration: underline;
}