:root
{
    --direction_ltr: ltr;
    --direction_rtl: rtl;
    --direction_right: right;
    --direction_right_ops: left;
    --direction_left: left;

    --main_color: #532eef;
    --dark_color: #08031e;
    --deep_color: #89cff0;
    /*--deep_color: #9bcdb4;*/
    --light_color: #59616f;
    --white_color: white;
    --button_background_color: #e0dbf4;
    --pagination_active_color: #e0dbf4;
    --pagination_border_color: #8bb8a2;
    --background: rgba(255, 255, 255, 0.48);

    --rotate: 360deg;
    --rotate_close: 180deg;

}

body.Ar
{
    --direction_ltr: rtl;
    --direction_rtl: ltr;
    --direction_right: left;
    --direction_right_ops: right;
    --rotate: 180deg;
    --rotate_close: 360deg;
}

body
{
    direction: var(--direction_ltr);
    background: var(--dark_color);
    /*background-color: #f3f4ff;*/
}

.Header nav
{
    background: var(--dark_color);
    height: 50px;
    position: fixed;
    width: 100%;
}

.Header nav ul
{
    float: var(--direction_right);
    margin-inline-end: 50px;
}

.Header nav ul li
{
    line-height: 50px;
    margin: 0 10px;
}


.MyBody {
    margin: 0;
    font-family: 'CairoRegular', serif;
    background-color: #0d1b2a;
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

[dir="rtl"] .container {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .container {
    direction: ltr;
    text-align: left;
}

h1, h2 {
    color: #20115b;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 6px;
}

p {
    text-align: justify;
}

@media screen and (max-width: 768px) {
    .container {
        padding: 15px;
    }
}