
header {
    max-width: 750px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    h1{
        text-align: right;
        background-color: navy;
        color:    rgb(255, 221, 0);
        font-size: 1.5em;
        /*font-weight: lighter;*/
        padding-right: 5px;
   
    }
    h2 {
        text-align: right;
        font-size: 1.3em;
        /*font-weight: lighter;*/
        padding-right: 5px;
            text-align: center;
    background-color: navy;
    color:    rgb(255, 221, 0);
    }               
}

body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
    direction: rtl;
}

div {
    background-color: rgb(112, 112, 170);
    color:    rgb(255, 221, 0);
}

 .grid-container {
        display: grid;
        grid-template-columns: 1fr 7fr ; /* Creates three equal-width columns */
        grid-template-rows: 1fr; /* Creates rows that adjust height based on content */
      
}
       /* gap: 20px; /* Adds space between grid items (columns and rows) */

    .grid-item {
        /* Optional: Add styling for individual column items */
       background-color: navy;
       h2{
          text-align: right;
          padding-right: 50px;
       }
    }
h1 {font-size: 1.5em; 
    text-align: center;
    padding: 5px;
}
h2 {
    text-align: right;
    background-color: navy;
    color:    rgb(255, 221, 0);
    padding: 5px;
    font-size: 1.4em;
} 
 h3{
    text-align: right;
    padding: 5px;
    font-size: 1.3em;
}
h4 {
    padding: 5px;
}
h5 {
    padding: 5px;
}   

p {
    color: #333;
    padding: 5px;
}

ul {
    list-style-type: square;
    padding-right: 5%;
}
a {
    color: rgb(62, 184, 198);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

article {
    max-width: 750px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

img { 
    max-width: 100%;
    height: auto;
     display: block;
}